Solved

How to create a ribbon of thumbnails?

Posted on 2014-02-07
1
355 Views
Last Modified: 2014-02-07
Hello,

Iam using this imageslider
http://bxslider.com/examples/thumbnail-pager-1

The question is how do I create a ribbon of thumbnails here.  I have more than 50 images to display and so the images are getting stacked on each other in thumbnail row.  I would like to have only one row of the thumbnails.

Thank you
0
Comment
Question by:perlwhite
1 Comment
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 39843435
Check this : http://jsfiddle.net/5Nb9L/7/

jQuery(function($) {
    
    $('.bxslider').bxSlider({
        pagerCustom: '#bx-pager'
    });
    
    $("#bx-pager").append("<ul/>");
    $("#bx-pager a").wrap("<li/>");
    $("#bx-pager li").appendTo("#bx-pager ul");
    $("#bx-pager").prepend('<a href="#" class="prv"><img src="http://www.tulalipluxeline.com/Userfiles/template/prev-button%402x.png" /></a>');
    $("#bx-pager").append('<a href="#" class="nxt"><img src="http://www.tulalipluxeline.com/Userfiles/template/next-button%402x.png" /></a>');    
        
    $(".prv").click(function() {
        $("#bx-pager ul li:last").prependTo("#bx-pager ul");
    });

    $(".nxt").click(function() {
        $("#bx-pager ul li:first").appendTo("#bx-pager ul");
    });
    
});

Open in new window

0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Centering Vertically 3 28
Why is this panel heading creating extra space 2 37
Centered Image 2 23
two layers of simple javascript validation 2 26
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

896 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now