Flexslider - diversa velocità di presentazione su ogni diapositiva

Question

Uso Flexslider e mi è stato chiesto di visualizzare ogni diapositiva in un momento diverso a seconda di quanto contenuto ha, così veloce per una frase breve e lento per un paragrafo. Come posso configurarlo quando flexslide consente solo il valore di 1 Slideshowspeed. Il mio codice:

$(window).load(function() { 
     $('#flexslider1').flexslider({ 
     easing: "swing", 
     animation: "fade", 
     slideshowSpeed: 7000, 
     animationSpeed: 600, 
     startAt: 0, 
     initDelay: 0, 
     controlNav: true, 
     directionNav: true, 
     pausePlay: true, 
     pauseText: 'Pause', 
     playText: 'Play' 
    }); 
}); 

Answer 1

Non conosco flexslider ma dovresti essere in grado di modificare la velocità nella funzione di richiamata dopo evento. Qualcosa del genere:

$('#flexslider1').flexslider({ 
easing: "swing", 
animation: "fade", 
slideshowSpeed: 7000, 
animationSpeed: 600, 
startAt: 0, 
initDelay: 0, 
controlNav: true,    
directionNav: true, 
pausePlay: true, 
pauseText: 'Pause',    
playText: 'Play', 
after: function(){$(this).flexslider('slideshowSpeed',1000)} 
}); 

Ma ora, come puoi ora per quale diapositiva devi cambiare velocità. La documentazione di flexslider non fornisce alcuna informazione su quale argomento viene passato dopo la funzione di callback. E a seconda di come questo plugin è codificato, è forse impossibile modificare l'opzione al volo, suggerendo che è necessario distruggere il cursore e ricreare uno nuovo mantenendo quale passo/diapositiva è attualmente mostrato, codifica strana.

Quindi, vi suggerisco di contattare lo sviluppatore principale di questo plugin o provare ad estenderlo da soli.

Answer 2

Penso di aver trovato una soluzione. Io uso dopo il callback per modificare l'intervallo di slideshowSpeed:

$(window).load(function(){ 
     $('.flexslider').flexslider({ 
     animation: "slide", 
     slideshowSpeed: time, 
     controlNav: false, 
     directionNav: false, 
     pauseOnAction: false, 
     pauseOnHover: false, 
     pausePlay: true, 
     after: function(slider){ 
      clearInterval(slider.animatedSlides); 
      slider.animatedSlides = setInterval(slider.animateSlides,*YOURTIME in MS*) 
     }, 
     start: function(slider){ 
      $('body').removeClass('loading'); 
     } 
     }); 
    }); 

Speranza che aiuta!

Thibaut.

Answer 3

Avevo lo stesso problema cercando di cambiare solo la velocità di una diapositiva per essere diversa dalle altre. Questo è lo script che ho usato e funziona!

<script type="text/javascript"> 
$(window).load(function(){ 
    $('.flexslider').flexslider({ 
    animation: "fade", 
    slideshowSpeed: 1500, 
    animationSpeed: 1000, 
    controlNav: false, 

    start: function(slider){ 
     slider.removeClass('loading'); 
    }, 
    after: function(slider){ 
     if(slider.currentSlide == 3){ 
      slider.pause(); 
      setTimeout(function(){ 
       slider.play(); 
      }, 5000); 
     } 
    } 
    }); 
}); 

Ho 5 immagini totali ma voglio il 4 ° scivolo (slider.currentSlide == 3) per rimanere più a lungo per 5 secondi.

Answer 4

perché dopo richiamata CALL dopo l'animazione prima diapositiva, abbiamo bisogno di aggiungere timeout START callback (per 3 diapositive):

$(window).load(function() {   
    $('.flexslider').flexslider({ 
     animation: "slide", 
     controlNav: false, 
     directionNav: false,   
     pausePlay: true, 
     animationSpeed: 300, 
     start: function(slider) { 
      clearInterval(slider.animatedSlides); 
      slider.animatedSlides = setInterval(slider.animateSlides, YOUR_TIMEOUT_FOR_FIRST_SLIDE(ONLY FOR START));     
     }, 
     after: function(slider){ 
      if(slider.currentSlide == 0) { 
       clearInterval(slider.animatedSlides); 
       slider.animatedSlides = setInterval(slider.animateSlides, FIRST_TIMEOUT); 
      } 
      if(slider.currentSlide == 1) { 
       clearInterval(slider.animatedSlides); 
       slider.animatedSlides = setInterval(slider.animateSlides, SECOND_TIMEOUT); 
      } 
      if(slider.currentSlide == 2) { 
       clearInterval(slider.animatedSlides); 
       slider.animatedSlides = setInterval(slider.animateSlides, THIRD_TIMEOUT); 
      } 
     }   
    }); 
    }); 

Answer 5

Rendendosi conto che questo è vecchio, ma per gli altri in cerca, come mi è stato, si può fare anche questo: (usando FlexSlider v.2.2.2).

Aggiungere un attributo data-durata al di Li

<div class="flexslider" data-animation="fade" data-control-nav="false" data-slideshow="true" data-start-at="0"> 
    <ul class="slides"> 
     <li data-duration="6000"> 
      <img src="http://placehold.it/600x210" alt="Alt" /> 
     </li> 
     <li data-duration="2000"> 
      <img src="http://placehold.it/600x200" alt="Alt Text" /> 
     </li> 
    </ul> 
</div> 

E nel tuo inizializzazione pagina:

$hook = $('.flexslider'); 
$hook.flexslider({ 
        animation: $hook.data('animation'), 
        controlNav: $hook.data('control-nav'), 
        slideshow: $hook.data('slideshow'), 
        startAt: $hook.data('start-at'), 
        pauseOnHover: true, 
        controlNav: false, 
        after: function(slider){ 
         // clears the interval 
         slider.stop(); 
         // grab the duration to show this slide 
         slider.vars.slideshowSpeed = $(slider.slides[slider.currentSlide]).data('duration'); 
         // start the interval 
         slider.play(); 
        } 
       }); 

Fiddle qui:

http://jsfiddle.net/uzery/3/

Answer 6

La combinazione di due risposte dall'alto

$hook = $('.flexslider'); 
 
$hook.flexslider({ 
 
    animation: $hook.data('animation'), 
 
    controlNav: $hook.data('control-nav'), 
 
    slideshow: $hook.data('slideshow'), 
 
    startAt: $hook.data('start-at'), 
 
    pauseOnHover: true, 
 
    controlNav: false, 
 
    start: function(slider) { 
 
     var start_time = $(slider.slides[slider.currentSlide]).data('duration'); 
 
     clearInterval(slider.animatedSlides); 
 
     slider.animatedSlides = setInterval(slider.animateSlides, start_time); 
 
    }, 
 
    after: function(slider){ 
 
     // clears the interval 
 
     slider.stop(); 
 
     // grab the duration to show this slide 
 
     slider.vars.slideshowSpeed = $(slider.slides[slider.currentSlide]).data('duration'); 
 
     // start the interval 
 
     slider.play(); 
 
    } 
 
});