web-dev-qa-db-fra.com

Flexslider - vitesse de diaporama différente sur chaque diapositive

J'utilise Flexslider et on m'a demandé d'afficher chaque diapositive à une heure différente, en fonction de la quantité de contenu qu'elle contient, donc rapide pour une phrase courte et lente pour un paragraphe. Comment puis-je configurer cela lorsque flexslide n'autorise qu'une seule valeur de diaporama. Mon code:

$(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'
    }); 
});
jqueryflexslider
12
Rowan

J'avais le même problème en essayant de ne modifier que la vitesse d'une diapositive pour qu'elle soit différente des autres. C'est le script que j'ai utilisé et ça marche!

  <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);
        }
    }
  });
});

J'ai 5 images au total mais je veux que la 4ème diapositive (slider.currentSlide == 3) reste plus longtemps pendant 5 secondes.

9
nan

Je pense avoir trouvé une solution… .. Je l'utilise après rappel pour modifier l'intervalle de 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');
        }
      }); 
    });

J'espère que ça aide!

Thibaut.

5
Thibaut

En réalisant que c'est vieux, mais pour les autres, comme moi, vous pouvez également le faire: (Utilisation de FlexSlider v.2.2.2).

Ajouter un attribut data-duration à la 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>

Et dans votre initialisation de page:

$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();
                    }
                });

Violon ici:

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

3
tentwofour

Parce que APRES le rappel après la première animation de diapositive, nous devons ajouter un délai d'attente au rappel START (pour 3 diapositives):

  $(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);
            }
        }          
    });
  });
1
Eugene

Je ne connais pas flexslider mais vous devriez pouvoir modifier la vitesse après le rappel de la fonction d'événement. Quelque chose comme ca:

$('#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)} 
});

Mais maintenant, comment pouvez-vous maintenant pour quelle diapositive vous devez changer de vitesse. La documentation de flexslider ne fournit aucune information sur l'argument passé après la fonction de rappel. Et selon la manière dont ce plugin est codé, il est peut-être impossible de modifier l'option à la volée, ce qui suggère que vous devez détruire le curseur et en recréer un nouveau en conservant la séquence/diapositive actuellement affichée, un code étrange.

Donc, je vous suggère de contacter le développeur principal de ce plugin ou d'essayer de l'étendre par vous-même. 

0
A. Wolff

Combinant deux réponses d'en haut

$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();
    }
});

0
lalo