Develop Reference

Owl carousel checks item count for doing something

I have an owl carousel and I want to write a function which can check whether the number of items is equal to 1 and then disable corresponding navigation arrows.
Please help me do, this is what I tried (a function which will show number of items in the console and their respective index, but it isn't working)
var owl = $('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
responsiveClass: true,
dots: false,
responsive: {
0: {
items: 1,
nav: false,
},
767: {
items: 2,
nav: false
},
1000: {
items: 3,
nav: true,
loop: false
},
onDragged : callback
}
})
function callback() {
var items = event.items.count;
var item = event.item.index;
console.log(items,item);
}

Let's try in this way:
var owl = $('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
responsiveClass: true,
dots: false,
responsive: {
0: {
items: 1,
nav: false,
},
767: {
items: 2,
nav: false
},
1000: {
items: 3,
nav: true,
loop: false
},
onDragged : callback
}
})
function callback(event) {
var navValue = $(this).get(0).options.nav;
console.log('Old nav value = ' + navValue);
if (event.item.count == 1) {
//if total count of items = 1 - we change value
navValue = false;
//check if changed
console.log('New nav value = ' + navValue);
}
};

This can be done with an option:
loop: false
Does what you want.

Both Vertical slide and Horizontal slide using Owl Carousel

I want to include both vertical slide and horizontal slide using owl carousel in same page.Here is my reference code.Issue is only one slide is working,if we implement both in same file
<-----------Vertical slide------------>
<script>
jQuery(document).ready(function() {
var owl = jQuery('.owl-carousel');
owl.owlCarousel({
autoplay: true,
items: 1,
nav: true,
loop: true,
autoplayHoverPause: true,
animateOut: 'slideOutUp',
animateIn: 'slideInUp',
autoplayTimeout: 5000,
autoplayHoverPause: false,
});
});
</script>
<-----------Horizontal slide---------------------->
<script>
jQuery('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
nav: true,
navText: [
"<i class='fa fa-caret-left'></i>",
"<i class='fa fa-caret-right'></i>"
],
autoplay: true,
autoplayHoverPause: true,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 5
}
}
})
</script>

owl carousel sliders not working when page is refresh and sometime it works

owl carousel sliders works weird.Sometimes initally its not rendering and sometimes it works on refresh and again not rendered when we refresh again.
$(document).ready(function() {
var owl = $('#sellers');
var topBooks = $('#schoolBooks');
owl.owlCarousel({
nav: true,
navRewind:true,
autoplay:true,
stagePadding:10,
responsive: {
0: {
items: 1,
},
414:{
items: 1.2,
},
568:{
items: 1.5,
},
768: {
items: 2.2
},
1024: {
items: 2.5
},
1336:{
items:3
},
1920:{
itemS:3.5
}
}
});
topBooks.owlCarousel({
nav:true,
loop: true,
navRewind:true,
autoWidth:true,
});
How to resolve it.

owl carousel - not show last item when is rtl and loop is false

I have 2 problem when use owl carousel2 on mobile screen size and set rtl: true and center: true.
Problem 1: last slide (slide 5 on demo) not show when drag by mouse or touch.
Problem 2: If have one slide, then slide 1 not showing.
$(document).ready(function () {
var owl = $('.owl-carousel');
owl.owlCarousel({
rtl: true,
center: false,
items: 4,
responsiveClass: true,
loop: false,
nav: false,
margin: 10,
lazyLoad: false,
autoplay: false,
autoplayTimeout: 10000,
smartSpeed: 200,
autoWidth: true,
responsive: {
0: {
items: 1,
center: true,
autoWidth: true
},
768: {
items: 2,
center: false,
autoWidth: true
},
992: {
items: 3,
center: false,
autoWidth: false
},
1200: {
items: 4,
center: false,
autoWidth: false
}
}
})
})
I create an example with js and css file from owlcarousel2.github.io with new owl carousel2 updates.
Demo problem:
https://jsfiddle.net/j7jg7ynb/6/

How to trigger after functions with Owl Carousel 2?

I use a owl carousel and I want to detect the first and last elements when active. I'm trying to trigger a function with the afterAction attribute but I cannot make it happen.
This is the initialiser:
$('#carousel').owlCarousel({
slideBy: 4,
loop: true,
margin: 10,
responsiveClass: true,
responsive: {
0: {
items: 1,
nav: true
},
600: {
items: 3,
nav: false
},
1000: {
items: 4,
nav: true,
loop: false
}
},
afterAction : afterAction
});
function afterAction(){
console.log("owl after action");
}

For the first and last "elements" that are visible in the carousel:
In the afterAction function this.visibleItems returns an array of the visible items displayed in the carousel. The first visible item will always be at array position 0 and the last will be the length - 1.
function afterAction() {
var first = this.visibleItems[0];
var last = this.visibleItems[this.visibleItems.length - 1];
console.log(first, last);
console.log($('.owl-item')[first], $('.owl-item')[last]);
}
$('#carousel').owlCarousel({
slideBy: 4,
loop: true,
margin: 10,
responsiveClass: true,
responsive: {
0: {
items: 1,
nav: true
},
600: {
items: 3,
nav: false
},
1000: {
items: 4,
nav: true,
loop: false
}
},
afterAction : afterAction
});

You can access the elements inside the carousel (I'm assuming you're referring to the panels) like this $('#carousel .owl-item:first) and $('#carousel .owl-item:last). To create the carousel and trigger a function only after the carousel is built try the method below.
var exampleApp = {
createCarousel : function(options) {
$('#carousel').owlCarousel({
slideBy: 4,
loop: true,
margin: 10,
responsiveClass: true,
responsive: {
0: {
items: 1,
nav: true
},
600: {
items: 3,
nav: false
},
1000: {
items: 4,
nav: true,
loop: false
}
}
});
this.afterwards(options.passedStr);
},
afterWards : function( testStr ){ // passedStr becomes testStr here
console.log('afterwards method ',testStr );
},
init : function (options) {
this.createCarousel(options);
}
}
exampleApp.init({"passedStr":"singleton pattern"});
This is a JavaScript Singleton pattern.