Flexslider - différentes diaporama de la vitesse sur chaque diapositive

Je suis en utilisant Flexslider et ont demandé l'affichage de chaque diapositive à une autre heure, en fonction de la quantité de contenu qu'il a, de manière très rapide pour une phrase courte et lente pour un paragraphe. Comment puis-je configurer lorsque flexslide permet juste 1 Slideshowspeed valeur. 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'
    }); 
});

OriginalL'auteur Rowan | 2012-11-07

flexslider jquery

J'ai eu le même problème en essayant de ne changer que la vitesse d'une diapositive à être différent 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 le 4ème de la diapositive (curseur.currentSlide == 3) pour rester plus de 5 secondes.

OriginalL'auteur nan

5

Je crois que j'ai trouvé une solution.
J'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');
        }
      }); 
    });
```
Espère que cela aide!

Thibaut.

Excellente solution, merci. Si vous voulais à la base de la YOURTIME dans MS variable sur le contenu du prochain volet, vous pouvez utiliser quelque chose comme var chars = -80 + curseur.diapositives[curseur.animatingTo].innerText.longueur * 30; (-80 était d'environ la longueur de la marge, j'ai été à l'aide de la diapositive, et *30 est une belle multiplicateur, qui laisse suffisamment de temps à l'utilisateur pour afficher le résultat). HTH.
C'est parfait. J'ai créé un tableau avec chacun des vitesses j'ai besoin pour chaque diapositive, et la after fonction par le biais de chaque élément sur chaque diapositive changement.

OriginalL'auteur Thibaut

De réaliser que c'est vieux, mais pour les autres, à la recherche, comme je l'ai été, vous pouvez également le faire: (à l'Aide de FlexSlider v. 2.2.2).

Ajouter un attribut de durée de 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 page d'initialisation:

$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/

OriginalL'auteur tentwofour

Parce que, APRÈS rappel de l'APPEL après la première diapositive d'animation, nous avons besoin d'ajouter le délai d'attente pour COMMENCER rappel (3 lames):

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

OriginalL'auteur Eugene

0

Je ne sais pas flexslider, mais vous devriez être capable de modificate vitesse après l'événement de la fonction de rappel. Quelque chose comme ça:
```
$('#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 dès maintenant à la diapositive qui vous avez à changer de vitesse. La Documentation de flexslider ne fournit pas d'informations sur l'argument d'après la fonction de rappel sont passés. Et selon la façon dont ce plugin est codé, sa peut-être impossible de modifier l'option à la volée, ce qui suggère que vous avez besoin de détruire le curseur et en recréer un nouveau gardant l'étape/diapositive est affichée, bizarre de codage.

Donc, ill vous conseillons de contacter le principal développeur de ce plugin ou d'essayer de l'étendre par votre propre.

OriginalL'auteur A. Wolff

Vous devez vous connecter pour publier un commentaire.