2

I'm using the slideshow cycle.all.js jquery plugin for my drupal website.(http://jquery.malsup.com/cycle/) I'm trying to skip the first slide after it loops once. Not sure how to do this, can someone give me hint or a solution?

Thanks

Trekdrop
  • 475
  • 7
  • 27

5 Answers5

1

working on this, too -- used the following code to success

$('.slider').cycle({
  after: onAfter; 
}); 

function onAfter(curr,next,opts) {
  //if next slide is 0, then it's the first slide. switch to "1", second slide
  if(opts.nextSlide == 0 ) {opts.nextSlide = 1}; 
}
matthew.collins
  • 41
  • 3
0

In the plugin you have the option startingSlide which is the index of the slide on which to start (0 being the first one). So after displaying the first slide, you can try to change this option to 1 to skip the first one on next cycle.

Something like this might work:

$('#mydiv').cycle({ 
    after: function(currSlideElement, nextSlideElement, options, forwardFlag) {
        $(this).cycle({startingSlide: 1});
    }
});
koopajah
  • 23,792
  • 9
  • 78
  • 104
  • @LarsKerff Yeah I tried, but I'm not sure it would work. You would mix this solution and the one from Cristy to remove the first image from the slideshow in the after callback – koopajah Feb 01 '13 at 12:39
0

I know this may not be the nicest way, but it seems to work.

$(document).ready(function() {
    //Call the slider so that the images overlap
    $('.slideshow').cycle({
        timeout:  800,
        speed: 200
    });
    //Display the first slide for 1000ms
    setTimeout(function(){
        //Remove first slide
        $('.slideshow img:first').remove();
        //Reinit the cycle
        $('.slideshow').cycle('destroy').cycle({
            timeout:  800,
            speed: 200
        });
        }, 1000);
});

http://jsfiddle.net/Q8HK3/3/

XCS
  • 27,244
  • 26
  • 101
  • 151
  • I prefer the answer of koopajah – Trekdrop Feb 01 '13 at 12:40
  • Well I think startingSlide will just make the slider start from that frame when it first start, but will still loop through all the slides. – XCS Feb 01 '13 at 12:41
  • Hm you might be right indeed, was a bit to quick with my reaction. My excuse. I'll figure it out with both answers. Thanks – Trekdrop Feb 01 '13 at 12:45
  • Updated the answer so now the first slide will be slided by the cycle plug-in (that means you can use whatever transition effect you want). – XCS Feb 01 '13 at 12:47
  • Hm tried several things. It actually removes the first slide, that works. But my slider shows me a empty first slide now, even where there is nog
    at all. Not sure how to fix this.
     – Trekdrop Feb 01 '13 at 13:39
0
$(window).ready(function() {
$('#slideshow').cycle({
fx: 'fade',
startingSlide: 0,
random:  1,
speed: '200', 
timeout:'2000',
delay: 5000,
next:   '#next', 
prev:   '#prev', 
slideResize: true,
containerResize: false,
width: '100%',
fit: '1',
cleartypeNoBg: 'true',
cleartype: 'true',
after: onAfter
}); 

function onAfter(curr,next,opts) {

  if(opts.nextSlide == 0 ) {opts.nextSlide = 1}; 
}

});



    $(document.documentElement).keyup(function (e) {
    if (e.keyCode == 39)
    {        
       $('#slideshow').cycle('next');
    }

    if (e.keyCode == 37)
    {
        $('#slideshow').cycle('prev');
    }

});
function MM_goToURL() { //v3.0
  var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
  for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
john
  • 1
0

It's possible to do so also from admin through slider API (but 1st slide might blink for a second:( ):

var ended = false;
revapi1.bind("revolution.slide.onchange",function (e,data) {
    var totalSlides = revapi1.revmaxslide();
    if (data.slideIndex === totalSlides) {
       ended = true;
    }
});
revapi1.bind("revolution.slide.onbeforeswap",function (e, data) {
    if (ended && data.nextslide.index() === 0) {
      console.log("Slider: skip first slide after loop")
      revapi1.revshowslide(2); 
      ended = false;
    } 
});
am0wa
  • 7,724
  • 3
  • 38
  • 33