2015-06-13 12 views
5

मैं उल्लू कैरोसेल 2 का उपयोग कर रहा हूं और मेरे पास कस्टम एनवी बटन हैं जिन्हें मैं अगली/पिछली वस्तु और अगले/पिछला पृष्ठ के लिए उपयोग करना चाहता हूं। मैं अगले आइटम को गति प्रदान करने के लिए निम्नलिखित का उपयोग कर रहा:ट्रिगर अगले पृष्ठ उल्लू कैरोसेल 2

var slider = $('.owl-carousel'); 

$('#nextItem').click(function() { 
    slider.trigger('next.owl.carousel'); 
}); 

यह ठीक काम करता है, लेकिन मैं यह भी अगले पृष्ठ (कि बिंदुओं काम करने के लिए समान) को गति प्रदान करने की जरूरत है। ऐसा लगता है कि एक स्लाइड द्वारा एक विकल्प है जिसे आप किसी पृष्ठ द्वारा स्लाइड करने के लिए उपयोग कर सकते हैं, लेकिन यह मदद नहीं करेगा क्योंकि मुझे आइटम और पृष्ठ नेविगेशन दोनों की आवश्यकता है।

$('#nextPage').click(function() { 
    // go to next page 
}); 

उत्तर

7

आप डॉट्स पर क्लिक करता है को चालू कर सकते: यदि आप पिछले पर हैं

// Go to page 3 
$('.owl-dot:nth(2)').trigger('click'); 

अगले पृष्ठ पर या पहले करने के लिए जाने के लिए, आप इसे इस तरह कर सकते हैं:

var $dots = $('.owl-dot'); 

function goToNextCarouselPage() {  
    var $next = $dots.filter('.active').next(); 

    if (!$next.length) 
     $next = $dots.first(); 

    $next.trigger('click'); 
} 

$('.something-else').click(function() { 
    goToNextCarouselPage(); 
}); 
2

आप अगले पृष्ठ (स्लाइडर) पर होने वाले क्लिक को चालू कर सकते विकल्प केवल जोड़ने

slideBy: 3

 
.....   
responsive:{ 
       0:{ 
        items:1, 
        nav:false 
       }, 
       600:{ 
        slideBy: 3, 
        items:3, 
        nav:true 
       }, 
       1000:{ 
        slideBy: 3, //Option for trigger next page to click on nav. 
        items:3, 
        nav:true, 
        loop:true 
       } 
      } 
..... 

+0

स्वीकार्य उत्तर होना चाहिए! –

0
$('#js-carousel-models').owlCarousel({ 
    center: true, 
    items: 1.5, 
    loop:true, 
    margin: 0, 
    dots: true, 
    autoplay: true 
}); 

var owl = $('#js-carousel-models'); 
owl.owlCarousel(); 

$('.owl-item').click(function() {   
    if($(this).next().hasClass('center')){ 
     // scroll to prev 
     owl.trigger('prev.owl.carousel'); 
    } 
    if($(this).prev().hasClass('center')){ 
     // scroll to next 
     owl.trigger('next.owl.carousel'); 
    }    
}) 
संबंधित मुद्दे