All geek questions in one place

Owlcarousel 2 will change settings after init

I'm already

var owl = $(".owl-carousel").owlCarousel({loop: true, nav: true});

I am trying to change the setting of loop or nav parameter, but not working

 owl.data('owl.carousel').settings.loop = false; owl.data('owl.carousel').settings.nav = false;

How to do it.

+5
source share
3 answers

I was able to solve this with

 owl.data('owl.carousel').options.loop = false; owl.data('owl.carousel').options.nav = false;
-3
source

You should try like this.

 $(".owl-carousel").owlCarousel({ autoplay: true, autoplayTimeout:2000, autoplayHoverPause:true, loop: true, margin: 10, responsiveClass: true, navText : ["<i class='fa fa-chevron-left' aria-hidden='true'></i>","<i class='fa fa-chevron-right' aria-hidden='true'></i>"],// If you want to change next and previous text to font-awesome icon. responsive: { 0:{ items: 1, nav: false, dots: true, margin: 0 }, 600:{ items: 2, nav: false, dots: true, margin: 25 }, 768: { items: 3, nav: false, dots: true, margin: 25 } } }); 

 $(".owl-carousel").owlCarousel({ autoplay: true, autoplayTimeout:2000, autoplayHoverPause:true, loop: true, margin: 10, responsiveClass: true, navText : ["<i class='fa fa-chevron-left' aria-hidden='true'></i>","<i class='fa fa-chevron-right' aria-hidden='true'></i>"], responsive: { 0:{ items: 1, nav: false, dots: true, margin: 0 }, 600:{ items: 2, nav: false, dots: true, margin: 25 }, 768: { items: 3, nav: false, dots: true, margin: 25 } } }); 
 .owl-carousel { margin-bottom: 80px; } .owl-carousel .owl-dots { position: absolute; bottom: -80px; display: -webkit-box; display: -ms-flexbox; display: flex; flex-direction: row; width: 100%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .owl-carousel .owl-dots .owl-dot { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; width: 10px; height: 10px; border-radius: 50%; background-color: white; } .owl-carousel .owl-dots .owl-dot.active { background-color: #0199d6; } .owl-carousel .owl-dots .owl-dot:not(:last-child) { margin-right: .75rem; } /* Testimonial card */ .testimonial-card { margin-bottom: 1.875rem; padding: 1.25rem; border: 1px solid #d8d8d8; background-color: white; } .testimonial-card h4 { font-family: 'Rubik', sans-serif; font-size: 1.25rem; font-weight: 400; margin-top: 0; margin-bottom: .75rem; color: #222; } .testimonial-card span { font-family: 'Rubik', sans-serif; font-size: .9375rem; font-weight: 300; display: block; margin-bottom: 2.5rem; color: #0199d6; } .testimonial-card p { font-family: 'Open Sans', sans-serif; font-size: 13px; font-weight: 400; font-style: italic; line-height: 1.4; margin-bottom: 0; } 
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400|Rubik:300,400" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" /> <div class="owl-carousel"> <div class="item"> <div class="testimonial-card"> <h4>Wilson Edwards</h4> <span>Developer</span> <p>"We love the approachable format, and the fact that they chose to feature cuomers that users can really relate to."</p> </div><!-- Testimonial card --> </div> <div class="item"> <div class="testimonial-card"> <h4>Wilson Edwards</h4> <span>Developer</span> <p>"We love the approachable format, and the fact that they chose to feature cuomers that users can really relate to."</p> </div><!-- Testimonial card --> </div> <div class="item"> <div class="testimonial-card"> <h4>Wilson Edwards</h4> <span>Developer</span> <p>"We love the approachable format, and the fact that they chose to feature cuomers that users can really relate to."</p> </div><!-- Testimonial card --> </div> <div class="item"> <div class="testimonial-card"> <h4>Wilson Edwards</h4> <span>Developer</span> <p>"We love the approachable format, and the fact that they chose to feature cuomers that users can really relate to."</p> </div><!-- Testimonial card --> </div> <div class="item"> <div class="testimonial-card"> <h4>Wilson Edwards</h4> <span>Developer</span> <p>"We love the approachable format, and the fact that they chose to feature cuomers that users can really relate to."</p> </div><!-- Testimonial card --> </div> <div class="item"> <div class="testimonial-card"> <h4>Wilson Edwards</h4> <span>Developer</span> <p>"We love the approachable format, and the fact that they chose to feature cuomers that users can really relate to."</p> </div><!-- Testimonial card --> </div> <div class="item"> <div class="testimonial-card"> <h4>Wilson Edwards</h4> <span>Developer</span> <p>"We love the approachable format, and the fact that they chose to feature cuomers that users can really relate to."</p> </div><!-- Testimonial card --> </div> <div class="item"> <div class="testimonial-card"> <h4>Wilson Edwards</h4> <span>Developer</span> <p>"We love the approachable format, and the fact that they chose to feature cuomers that users can really relate to."</p> </div><!-- Testimonial card --> </div> <div class="item"> <div class="testimonial-card"> <h4>Wilson Edwards</h4> <span>Developer</span> <p>"We love the approachable format, and the fact that they chose to feature cuomers that users can really relate to."</p> </div><!-- Testimonial card --> </div> <div class="item"> <div class="testimonial-card"> <h4>Wilson Edwards</h4> <span>Developer</span> <p>"We love the approachable format, and the fact that they chose to feature cuomers that users can really relate to."</p> </div><!-- Testimonial card --> </div> </div><!-- Owl Carousel -->
+5
source

For Owl Carousel 2, try updating the carousel after the change options:

 $('.owl-carousel').data('owl.carousel').options.nav = false; $('.owl-carousel').trigger( 'refresh.owl.carousel' );
+2
source

Source: https://habr.com/ru/post/1272581/

More articles:


All Articles