2017-10-15 17 views
5

मैं jQuery का उपयोग कर एक अनंतता स्लाइडर बनाने की कोशिश कर रहा हूं। सक्रिय स्लाइड स्क्रीन के 2/3 होगी, आगामी स्लाइड 1/3 होगी। तो आप अगली स्लाइड का पूर्वावलोकन देख चुके हैं।इन्फिनिटी स्लाइडर पिछले बटन तर्क काम नहीं कर रहा

मैंने जो स्लाइडर बनाया है वह काम कर रहा है। जब आप next पर क्लिक करते हैं तो स्लाइडर बाईं ओर एनिमेटेड होगा।

चाल

init पर मैं अंतिम स्लाइड के बाद पहले दो डुप्लिकेट स्लाइड। जब slideIndex, जो वर्तमान अनुक्रमणिका पर नजर रखता है, स्लाइड्स शून्य 1 की संख्या है, यह स्लाइडर को शून्य पर रीसेट कर देगा। तो आपके पास एक अनंत स्लाइडर है।

समस्या

समस्या आता है जब मैं भी प्रभाव लागू करने के लिए जब आप पहली स्लाइड पर हैं और पहले से क्लिक करें। इसे मूल रूप से वही करना चाहिए, लेकिन स्लाइडर को शून्य पर रीसेट नहीं करना चाहिए, लेकिन स्लाइड के अंत तक।

var slider = $('.slider'); 
var slides = slider.find('.slides').children(); 
var slidesW = slides.width(); 

root.offset = -Math.abs((root.slideIndex * slides.eq(index).width())); 
console.log(root.offset); 

// Update active class 
slides.removeClass('active'); 
// slides.eq(index).addClass('active'); 

// Add class active 
TweenMax.to(slides.eq(index), 1, { 
    className: 'active', 
    onComplete: function() { 

     if (root.slideIndex >= (root.numOfSlides - 2)) { 

      slider.find('.slides').addClass('no-transition'); 

      slides.removeClass('active'); 
      slides.filter(':first').addClass('active'); 

      root.offset = 0; 

      TweenMax.set(slider.find('.slides'), { 
       x: root.offset, 
       onComplete: function() { 
        root.slideIndex = 0; 
        $('#footer .paging #indicator').find('span').html('01'); 

        return false; 
       } 
      }); 

     } 
    } 
}); 

// Remove no-transition class 
slider.find('.slides').removeClass('no-transition'); 

// Change position of ul.slides 
TweenMax.to(slider.find('.slides'), 0.4, { 
    x: root.offset 
}); 

क्योंकि मैं if (root.slideIndex === (root.numOfSlides - 2)) { का एक अगर बयान यह हमेशा, शून्य करने के लिए रीसेट करने दिया जाएगा जब slideIndexroot.numOfSlides - 2 के बराबर है। तो इससे कोई फर्क नहीं पड़ता कि आप पिछले या अगले पर क्लिक करते हैं, जब slideIndex स्लाइड 4 पर मेरे उदाहरण में है, तो यह शून्य पर रीसेट हो जाएगा।

मैं एक codepen में स्लाइडर को पुन: https://codepen.io/anon/pen/zEmozr

आशा कोई मुझे मदद कर सकते हैं खोज और कुछ दिनों अब कोशिश कर के बाद, इस समस्या का समाधान करने के लिए कैसे पता नहीं है। अगर कुछ पर्याप्त या कुछ भी स्पष्ट नहीं है, तो कृपया मुझे बताएं। अग्रिम धन्यवाद। इस लाइन

उत्तर

1

बदलें:

if (dir == "ss-prev") { 
    // root.slideIndex--; 
    root.slideIndex = (root.slideIndex - 1 < 0) ? root.numOfSlides - 1 : root.slideIndex - 1; 
    console.log('prev', root.slideIndex); 
} 

द्वारा:

if (dir == "ss-prev") { 
    // root.slideIndex--; 
    root.slideIndex = (root.slideIndex - 1 < 0) ? root.numOfSlides - 3 : root.slideIndex - 1; 
    console.log('prev', root.slideIndex); 
} 

https://codepen.io/anon/pen/xXBMZJ?editors=1111

संबंधित मुद्दे