Search code examples
jqueryslideshowcycle

Cycle slideshow: only autoshow some specified slides

I'm using the Cycle plugin for my slideshow: http://jquery.malsup.com/cycle/

The slides starts automatic and uses a navigation that gets fired with an hover.

I would like that the slideshow only slides through specified slides, and only shows the other ones when they are hovered in the navigation.

I hope someone understands.

Edit: I've made an image. Maybe that makes a bit more clear what I try to achieve. http://www.vrds.nl/foto/slide_example.jpg

Solution

  • First, there is a version 2 of the cycle plugin located here (https://github.com/malsup/cycle2)

    API: http://jquery.malsup.com/cycle2/api/

    In order to do this, you just need to hook into the cycle-after event and when the slide is on the 3rd one to pause the slideshow.

    $( '#mySlideshow' ).on( 'cycle-after', function( event, opts ) {
   if (opts.currSlide==2) $('#mySlideshow').cycle('pause');  // pause on 3rd one
});

    For the hover overs, you can just attach an event to them. Assuming the right part are li elements (they can be whatever just making an assumption here):

    $('li').mouseover(function() {
   $('#mySlideshow').cycle('goto', $(this).index());  // something like this;
});

    If you don't want to use the second most up to date version of the plugin, the logic is exactly the same.