फ्लेक्सस्लाइडर - प्रत्येक स्लाइड पर विभिन्न स्लाइड शो गति

Question

मैं फ्लेक्सस्लाइडर का उपयोग कर रहा हूं और इसे प्रत्येक सामग्री को कितनी सामग्री के आधार पर प्रदर्शित करने के लिए कहा गया है, इसलिए एक छोटी सी वाक्य के लिए तेज़ और पैराग्राफ के लिए धीमा। फ्लेक्सस्लाइड केवल 1 स्लाइडशोस्पेड वैल्यू की अनुमति देता है जब मैं इसे कैसे सेट कर सकता हूं। मेरे कोड:

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

मैं flexslider नहीं जानता, लेकिन आप के बाद घटना समारोह कॉलबैक में गति modificate में सक्षम होना चाहिए। कुछ ऐसा:

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

लेकिन अब, अब आप किस स्लाइड के लिए गति को बदलना चाहते हैं। Flexslider का दस्तावेज़ीकरण कॉलबैक फ़ंक्शन पारित होने के बाद कौन सी तर्क के बारे में कोई जानकारी प्रदान नहीं करता है। और यह प्लगइन कैसे कोड किया गया है, इस पर निर्भर करता है कि फ्लाई पर विकल्प को बदलने के लिए असंभव हो सकता है, आपको स्लाइडर को नष्ट करने की आवश्यकता है और एक नया कदम फिर से बनाना है जो वर्तमान में कौन सा चरण/स्लाइड दिखाया गया है, अजीब कोडिंग।

तो, बीमार आपको इस प्लगइन के मुख्य डेवलपर से संपर्क करने का सुझाव देता है या इसे अपने आप से विस्तारित करने का प्रयास करता है।

Answer 2

मुझे लगता है कि मुझे एक समाधान मिला है। मैं 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'); 
     } 
     }); 
    }); 

आशा है कि यह मदद करता है!

थिबॉट।

Answer 3

मुझे एक ही समस्या थी जो केवल एक स्लाइड की गति को दूसरों से अलग करने की कोशिश कर रही थी। यह वह स्क्रिप्ट है जिसका मैंने उपयोग किया और यह काम करता है!

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

मैं 5 छवियों कुल है, लेकिन मैं 4 स्लाइड (slider.currentSlide == 3) 5 सेकंड के लिए लंबे समय तक रहना चाहते हैं।

Answer 4

क्योंकि पहली स्लाइड एनीमेशन के बाद कॉलबैक कॉल के बाद, हम (3 स्लाइड के लिए) कॉलबैक शुरू करने के लिए समय समाप्ति जोड़ने की जरूरत है: यह महसूस करते हुए कि इस पुरानी है

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

, लेकिन दूसरों की तलाश में, जैसा कि मैंने था, तो आप कर सकते हैं यह भी करें: (फ्लेक्सस्लाइडर v.2.2.2 का उपयोग करना)।

ली के

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

और अपने पेज प्रारंभ में एक डाटा-अवधि विशेषता जोड़ें:

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

फिडल यहाँ:

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

Answer 6

ऊपर से दो जवाब का मेल

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