jQuery anythingSlider - make the first slide last twice as long.

Question

I'm using the anythingSlider by Chris Coyier.

Basically it makes list-items slide in from the left after a specified time.

I'd like to tweak the code, so that the first <li> is visible for twice as long as the others.

E.g. If the slides are visible for 7 seconds, the first slide needs to be visible for 14 seconds.

Any ideas?

Answer 1

You could change the startStop function to this (notice var extraTime):

     // Handles stopping and playing the slideshow
 // Pass startStop(false) to stop and startStop(true) to play
 base.startStop = function(playing){
  if(playing !== true) playing = false; // Default if not supplied is false

  // Update variable
  base.playing = playing;

  // Toggle playing and text
  if(base.options.autoPlay) base.$startStop.toggleClass("playing", playing).html( playing ? base.options.stopText : base.options.startText );

  var extraTime = 0;
  if(base.currentPage == 1){
   extraTime = base.options.delay;
  }

  if(playing){
   base.clearTimer(); // Just in case this was triggered twice in a row
   base.timer = window.setInterval(function(){
    base.goForward(true);
   }, base.options.delay + extraTime);
  } else {
   base.clearTimer();
  };
 };

This is in line 223 of jquery.anythingslider.js.

Answer 2

Should be easy enough

var timeVisible = 7000;
$('.anythingSlider').anythingSlider({
    autoPlay: true,
    startStopped: true,
    delay: timeVisible ,
    ...
});

setTimeout(function() {
    $("div.anythingSlider a#start-stop").trigger("click");
}, timeVisible);

Answer 3

anythingSlider doesn't seem to work in Opera 10.10 (at least for me).

.anythingSlider .wrapper ul { width: 99999px; ---> .anythingSlider .wrapper ul { width: 9999px;

Answer 4

*HOSOIToshiya thank you!

Answer 5

@HOSOIToshiya another thank you from me! Had a client complaining it wasn't working on Opera. I tried to reason that no-one uses it - I lost, but now I've Won!