Solved

How to create a ribbon of thumbnails?

Posted on 2014-02-07
1
353 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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

This article discusses four methods for overlaying images in a container on a web page
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

762 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

22 Experts available now in Live!

Get 1:1 Help Now