jQuery Cycle with carousel thumbs pager

A nice cycle gallery with thumbnail pictures navigation ( like here http://jquery.malsup.com/cycle/pager3.html ), but to use less space, make the thumbnails pager a carousel. ( see a demo here … note, that this is just to prove the concept, not much attention was given to styles ).

If you have “Prev / Next” controls on the cycle slideshow, then you will stumble upon an annoying situation: When you cycle through the slides with the cycle controls, and reach the last visible thumbnail in carousel, you will have to use the carousel controls to go to the current slide’s thumb; to avoid this i used the cycle’s ‘onPrevNextEvent’ callback to navigate through the carousel in the same time you cycle through the slides.

You will need:

1. jQuery

2. Cycle plugin

3. any jquery carousel you want ( i have used jCarousel lite )

Make the markup as you want, and adapt the jQuery code to it.

$('#slideshow').cycle({
    fx: 'scrollHorz',
    speed: 'fast',
    timeout: 0,
    prev: '#prev',
    next: '#next',
    nowrap: 1,
    pager: '#slide-pager ul',
    pagerAnchorBuilder: function(idx, slide) {
        // return selector string for existing anchor
        return '#slide-pager ul li:eq(' + idx + ') a';
    },
    onPrevNextEvent: function(dir, id, el) {
        if (dir === true) {
		if (id >= 3) { //replace '3' with your number of visible elements
			$('#slide-pager_next').click();
		}
        }
        else {
		if (id >= 1) {
			$('#slide-pager_prev').click();
		}
        }
    }
});

$("#slide-pager").jCarouselLite({
    btnNext: "#slide-pager_next",
    btnPrev: "#slide-pager_prev",
    circular: false,
    visible: 3
});

See the demo here.

Comments

  1. written by: Mario on October 28, 2012 at 10:22 am - Reply

    Hello, I use your code and it’s works very fine. Now I wont to show the gallery in one Overlay (like simplemodal) – but the thumbs at the jcarousell not shown – can you help me?
    Sorry for this bad english ….

    • written by: mihai on October 31, 2012 at 10:12 am - Reply

      I think this is due to the overflow: hidden; of the modal container.
      I haven’t used simplemodal, but you should try to set the height and optionally the width to the simplemodal, in order to force the modal to show all your inner elements.

      $(“#element-id”).modal({ minHeight: ‘350px’, minWidth: ‘350px’ });

      I hope it helps.

  2. written by: Ahmed on April 6, 2013 at 11:05 pm - Reply

    i was looking for this style of slider and got what i want , Thank You very very very much .

    i wish if i can help you in the future to return this favor :)

    • written by: mihai on April 9, 2013 at 12:50 pm - Reply

      I’m glad my article helped you.
      Who knows, maybe some article of your will help me someday.

  3. written by: biplab on April 9, 2013 at 2:04 pm - Reply

    Hi, i was trying to use it with jquery 1.4.2, but it does not work. Could you please let me know if i this can be done.

    • written by: mihai on April 14, 2013 at 2:11 pm - Reply

      Yes, it works.
      Check the demo again, now is running with jQuery 1.4.2.

  4. written by: Alvina on May 2, 2013 at 2:57 pm - Reply

    Thanks for the code! Works great.
    I do have a question though. I’ve changed the code a little bit to have the carousel auto start en circle around.

    $(“.slider-pager”).jCarouselLite({
    btnNext: “#pager_next”,
    btnPrev: “#pager_prev”,
    auto: 5000,
    circular: true,
    visible: 4
    });

    I want to use the ‘activeSlide’ class provided by the cycle plugin. When I change circular to false then it works correctly (I have a border on the current slide). When I say that circular is true I only have a border on the first item but not the rest.

    Would you be able to tell me how I can make this work?

    • written by: mihai on May 3, 2013 at 4:32 pm - Reply

      Hi,

      This problem appears because of how jCarousel works in circular mode.
      If you look at the HTML of the carousel items when in circular mode, you will see that jCarousel doubles them, in order to achieve the circular effect. This messes all up, because the slideshow and the carousel will no longer be synchronized.

      I don’t know right now if is possible to make this work with the carousel in circular mode, unless you find a carousel plugin that won’t affect the number of items when running in circular mode.

Leave a Reply

Your email address will not be published. Required fields are marked *

5 × = 45

This site uses Akismet to reduce spam. Learn how your comment data is processed.