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 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.
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/
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
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.
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)