Menu
I have already
var owl = $(".owl-carousel").owlCarousel({loop: true, nav: true});
I try change setting of loop or nav option but not working
owl.data('owl.carousel').settings.loop = false;
owl.data('owl.carousel').settings.nav = false;
How to do that thanks.
215
For Owl Carousel 2 try refresh carousel after change options:
$('.owl-carousel').data('owl.carousel').options.nav = false;
$('.owl-carousel').trigger( 'refresh.owl.carousel' );
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 -->
owl.data('owl.carousel').options.autoWidth = true;
owl.trigger('refresh.owl.carousel');
try this is working call after change event calling
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
