Owl carousel checks item count for doing something - javascript

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.

Related

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/

Set single item scroll on mousewheel and multiple item scroll on button click in owl carousel

Currently, It scrolls 3 items on both next-previous button click and on mouse scroll.
My setting is as below:
$(document).ready(function() {
var owl = $('.owl-carousel');
owl.owlCarousel({
loop: true,
nav: true,
margin: 10,
slideBy: 'page',
dots: false,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
960: {
items: 5
},
1200: {
items: 3
}
}
});
owl.on('mousewheel', '.owl-stage', function(e) {
if (e.deltaY < 0) {
owl.trigger('next.owl.carousel');
} else {
owl.trigger('prev.owl.carousel');
}
e.preventDefault();
});
});
Basically, it scrolls 3 items because of my setting slideBy: 'page'. But, I want single item scroll on mousescroll.
Only a hint will be fine.
#Dharmesh
You can use owl.trigger('to.owl.carousel', [0, 500]); to replace owl.trigger('next.owl.carousel'); owl.trigger('prev.owl.carousel');
Custom owl.carousel.js. find Navigation.prototype.getPosition Navigation.prototype.next Navigation.prototype.prev method and custom the
params;
This is my custom demo page:
https://gyx8899.github.io/YX-JS-ToolKit/pages/owlCarousel2/owl-mousewheel.html

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.

Owl-Carousel, scroll two items at a time

I am working on a slider with Owl-Carousel 2 (beta), but there is a lot that doesn't work well.
I want the owlCarousel to work like this:
It should scroll 2 items at a time, showing 2 items at a time.
So: [0,1] slide [2,3] slide [4,5]
On mobile, it should show one picture and scroll by 1 picture at a time.
owl = $('.owl-carousel')
owl.owlCarousel({
center: true,
loop: false,
margin: 20,
items: 2,
responsive: {
0: {
items: 1,
navigation: true,
nav: true
},
640: {
items: 2,
navigation: true,
nav: true
}
},
scrollPerPage: true,
navigation: true
}).css("z-index", 0)
You can use the slideBy option.
owl = $('.owl-carousel')
owl.owlCarousel({
center: true,
loop: false,
margin: 20,
items: 2,
responsive: {
0: {
items: 1,
navigation: true,
nav: true,
slideBy: 1 // <!-- HERE
},
640: {
items: 2,
navigation: true,
nav: true,
slideBy: 2 // <!-- HERE
}
},
scrollPerPage: true,
navigation: true
}).css("z-index", 0)

Categories

Resources