मैं वर्तमान में चित्रों के साथ एक स्लाइड बनाने के लिए उल्लू हिंडोला का उपयोग कर रहा हूँ। लेकिन अब समस्या यह है कि, मैं दोनों तरफ नेविगेशन बनाना चाहता हूं (स्लाइड के ऊपर नहीं)।

नीचे मेरी स्क्रिप्ट है:

$('.teamc').owlCarousel({
items: 4,
margin: 20,
autoHeight : true,
autoWidth: true,
center: true,
nav: true,
loop: true,
autoplay:true,
navText: ['<div class="customNextBtn" style="float:left; margin-left:33px"></div>', '<div class="customPreviousBtn" style="float:right; margin-right:33px"></div>'],
responsiveClass: true,
responsive: {
  0: {
    center: true,
    items: 1,
    margin: 20,
    autoHeight : true,
    autoWidth: true,
    nav: false,
    loop: true
  },
  600: {
    center: true,
    items: 4,
    margin: 20,
    autoHeight : true,
    autoWidth: true,
    nav: false,
    loop: true
  },
  1000: {
    center: true,
    items: 4,
    margin: 20,
    autoHeight : true,
    autoWidth: true,
    nav: true,
    loop: true
  }
}});

मैं जो चाहता हूं उसका नमूना चित्र यहां दिया गया है:

0
Stacie T. 23 जून 2019, 15:16

1 उत्तर

सबसे बढ़िया उत्तर

यदि आपके पास यह है:

<div class="main-content">
  <div class="owl-carousel owl-theme">
    <div class="item">...</div>
    <div class="item">...</div>
    ...
 </div>
 <div class="owl-theme">
    <div class="owl-controls">
        <div class="custom-nav owl-nav"></div>
    </div>
</div>

आपको जेएस में नीचे कोड जोड़ना चाहिए:

$('.main-content .owl-carousel').owlCarousel({
    .... ,
    navContainer: '.main-content .custom-nav',
    ....
});
0
masoud 23 जून 2019, 16:11