साइड पर उल्लू कैरोसेल 2 एनवी

Question

हाय मैं उल्लू कैरोसेल संस्करण 2 का उपयोग कर रहा हूं और सही और बाएं शेवरॉन या तीर जैसे कैरोसेल के किनारों पर नेविगेशन डालने के लिए एक उदाहरण नहीं मिला। आप इसे कैसे करते हो?

Answer 1

मैं सिर्फ यह कल :)

सबसे पहले यह सुनिश्चित करें एनएवी बनाने config

https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html

$('#_samewidth_images').owlCarousel({ 
     margin:10, 
     autoWidth:false, 
     nav:true, 
     items:4, 
     navText : ['<i class="fa fa-angle-left" aria-hidden="true"></i>','<i class="fa fa-angle-right" aria-hidden="true"></i>'] 
    }) 

यह डोम में नियंत्रण इंजेक्षन जाएगा में चालू है, देखा था

https://owlcarousel2.github.io/OwlCarousel2/docs/api-classes.html

<div class="owl-carousel owl-theme owl-loaded"> 
    <div class="owl-stage-outer"> 
     <div class="owl-stage"> 
      <div class="owl-item">...</div> 
      <div class="owl-item">...</div> 
      <div class="owl-item">...</div> 
     </div> 
    </div> 
    <div class="owl-controls"> 
     <div class="owl-nav"> 
      <div class="owl-prev">prev</div> 
      <div class="owl-next">next</div> 
     </div> 
     <div class="owl-dots"> 
      <div class="owl-dot active"><span></span></div> 
      <div class="owl-dot"><span></span></div> 
      <div class="owl-dot"><span></span></div> 
     </div> 
    </div> 
</div> 

अगला उपयोग सीएसएस अगला और पिछला नियंत्रण स्थिति है, यह मैं क्या उपयोग किया जाता है:

.owl-prev { 
    width: 15px; 
    height: 100px; 
    position: absolute; 
    top: 40%; 
    margin-left: -20px; 
    display: block!IMPORTANT; 
    border:0px solid black; 
} 

.owl-next { 
    width: 15px; 
    height: 100px; 
    position: absolute; 
    top: 40%; 
    right: -25px; 
    display: block!IMPORTANT; 
    border:0px solid black; 
} 
.owl-prev i, .owl-next i {transform : scale(1,6); color: #ccc;} 

मेरी माउस के लिए मैं फ़ॉन्ट बहुत बढ़िया इस्तेमाल किया है, लेकिन आप समान कुछ भी इस्तेमाल कर सकते हैं। जावास्क्रिप्ट कोड में navText पर ध्यान दें, यह वह जगह है जहां आप अपना कस्टम HTML डालते हैं। मुझे लगता है कि आप एक छवि का भी उपयोग कर सकते हैं (या इसे .owl-next और .owl-prev divs की पृष्ठभूमि में डाल दें। नोट मैंने अपने तीरों को उच्च बनाने के लिए ट्रांसफॉर्म का उपयोग किया।