I am trying to implement owl slider in my website and it is working good but the only problem is that owl slider show 5 items on one slide by default so I need to make it 3 items to be display per slide instead of 5.
I have also tried to add below code which is available on it official website but it is not working for me please let me know how to fix.
jQuery(document).ready(function(){
jQuery('.owl-demo').owlCarousel({
margin: 0,
responsiveClass: true,
smartSpeed: 500,
dots: ($(".owl-carousel .item").length > 1) ? true: false,
loop:($(".owl-carousel .item").length > 1) ? true: false,
responsive: {
0: {
items: 1,
},
1140: {
items: 3,
},
1110: {
items: 3,
}
}
})
Thanks
I have a similar problem, and my problem is below:
I import a dynamic css style file;
When document is ready, the dynamic file have not loaded, but owl is inited;
And then the dynamic file loaded, now the dynamic file's some style resize owl-carousel container, but now owl's responsive is not triggered;
You may should init Owl when all style is ready.
window.addEventListener("load", function () {
jQuery('.owl-demo').owlCarousel({
margin: 0,
responsiveClass: true,
smartSpeed: 500,
dots: ($(".owl-carousel .item").length > 1) ? true : false,
loop: ($(".owl-carousel .item").length > 1) ? true : false,
responsive: {
0: {
items: 1,
},
1140: {
items: 3,
},
1110: {
items: 3,
}
}
}, false);
Another workaround is below:
setTimeout(function () {
$('.owl-carousel').trigger('refresh.owl.carousel');
}, 500);
Related
My owl carousel has a dot-data, and I just want it have a dot-data from 0px to 1024px, and from 1025px there will be no more dot-data just a dot, so I write like this, and it's just work with a owl-nav, and about an owl-dots, I have to reload the page for it to work.Please help me, I would appreciate all the answers, thank you.
$(window).on('load', function() {
const next_icon = '<img src="./images/next-icon.svg">';
const prev_icon = '<img src="./images/prev-icon.svg">';
$('.owl-carousel').owlCarousel({
loop: true,
margin: 30,
items: 1,
dots: true,
responsiveClass: true,
navText: [
prev_icon,
next_icon
],
responsive: {
0: {
dotData: true,
dotsData: true,
nav: false,
},
1025: {
dotData: false,
dotsData: false,
nav: true,
}
}
});
})
First of all - there no such option as dotData. Only dotsData, if we talk about owl-carousel-2 version. And responsiveClass also.
About dotsData
in Owl docs (here: https://owlcarousel2.github.io/OwlCarousel2/demos/responsive.html) you can see that the dotsData in List of responsive only on load so it works correctly - only if page will be reloaded.
So, you must to create another solution by jQuery. For ex.:
jQuery(window).resize(function() {
if (window.innerWidth > 1024) {
jQuery('.your-dot-item-class').removeAttr('data-dot');
} else {
jQuery('.your-dot-item-class').attr('data-dot', '<p>Some content</p>');
}
});
I have a problem implementing Tiny Slider prev and next button on a single page but with multiple instances and it lays on each of jQuery ui-tabs content (tab-pane).
so, The tabs is not a problem, but each tab wrapped the container for slider with tns-outer class so the .slide-nav element that lies just next to (sibling) on my slider container is now not a sibling anymore but a sibling of the tns-outer (parent) element. The problem is, on the first slide I could make the prev next running just fine. But when the tabs is changed, the next and prev button doesn't work at all.
I use jQuery each and using 'this' to select the element, I'm trying to select the parent of 'this' inside tns object creation function, and if it just use 'this' no errors thrown but if I use jQuery(this) it always give me error.
This code only works on the first slide and the first tab:
listingSlider: function(){
if (jQuery('.listings').length) {
jQuery('.tab-content .listings').each(function() {
var slider = tns({
container: this,
items: 4,
slideBy: 1,
autoplay: true,
prevButton: '.prev',
nextButton: '.next',
nav: false,
mouseDrag: true,
gutter: 14,
responsive: {
0 : {
items: 1,
},
640: {
items: 2,
},
768: {
items: 3,
},
992: {
items: 4,
},
}
});
console.log('bul');
})
console.log('slider built')
}
}
Then this code is what I'm trying to do, but it gives me error, I need a way to use 'this' as selector to select it's parent with class .tab-pane and then find a child with class prev / next.
On prevButton, I use this without $ / jQuery, and on nextButton, I use jQuery but all just throws error.
listingSlider: function(){
if (jQuery('.listings').length) {
jQuery('.tab-content .listings').each(function() {
var slider = tns({
container: this,
items: 4,
slideBy: 1,
autoplay: true,
prevButton: this.parent('.tab-pane').find('.slide-nav .prev'),
nextButton: jQuery(this).parent('.tab-pane').find('.slide-nav .prev'),
nav: false,
mouseDrag: true,
gutter: 14,
responsive: {
0 : {
items: 1,
},
640: {
items: 2,
},
768: {
items: 3,
},
992: {
items: 4,
},
}
});
console.log('bul');
})
console.log('slider built')
}
}
Thank you
I am using Owl Carousel 2 with 3 items per page setup. I want to select every second item when the slide event occurs because I am blurring first and second items and making the only second one visible.
I am using this piece of jQuery code to achieve this:
$("#service-slider .active:eq(1)").addClass("myActive");
And this is how i initiate my Owl Carousel:
$("#service-slider").owlCarousel({
loop: true,
margin: 10,
nav: true,
dots: false,
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: false,
smartSpeed: 1500,
onChange: activeSelect(),
onDrag: activeSelect(),
onTranslate: activeSelect(),
responsive: {
0: {
items: 1
},
600: {
items: 1
},
1000: {
items: 3
}
}
});
$("#service-slider .active:eq(1)").addClass("myActive");
function activeSelect() {
$("#service-slider .active").removeClass("myActive");
$("#service-slider .active:eq(1)").addClass("myActive");
}
var owl = $('#service-slider');
owl.owlCarousel();
owl.on('next.owl.carousel', function (event) {
$("#service-slider .active").removeClass("myActive");
$("#service-slider .active:eq(1)").addClass("myActive");
});
owl.on('prev.owl.carousel', function (event) {
$("#service-slider .active").removeClass("myActive");
$("#service-slider .active:eq(1)").addClass("myActive");
});
It is working fine for the first time but when an item transitioned it is not working; Only working when the whole page changes.
Here is a fiddle: https://jsfiddle.net/iCromwell/mpoxf9rc/1/
user7290573 found a solution. You can use the center option of the Owl Carousel to achieve what I want. His fiddle can be found here: https://jsfiddle.net/y2xhr4dk/
$("#service-slider").owlCarousel({
loop: true,
margin: 10,
nav: true,
dots: false,
center: true,
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: false,
smartSpeed: 1500,
responsive: {
0: {
items: 3
},
600: {
items: 3
},
1000: {
items: 3
}
}
});
I have 3 carousels, and i'm trying to display each carousel on clicking a respective link, using jquery.
When i add the css "display: none" to a div, the owl carousel does not quite behave correct. The size of the carousel elements shrink, and sometimes disappear.
I have made a jsfiddle for it, i'd appreciate your help in finding what is going wrong - https://jsfiddle.net/prtkvarma/yLjw7gsk/3/
Thanks.
Following is just the JS part of the code -
jQuery(document).ready(function($) {
$('.owl-one').owlCarousel({
items: 4,
lazyLoad: true,
margin: 20,
nav: true,
dots: false,
responsive: {
0: {
items: 2
},
480: {
items: 3
},
786: {
items: 4
}
}
});
$('.owl-two').owlCarousel({
items: 4,
lazyLoad: true,
margin: 20,
nav: true,
dots: false,
responsive: {
0: {
items: 2
},
480: {
items: 3
},
786: {
items: 4
}
}
});
$('.owl-three').owlCarousel({
items: 4,
lazyLoad: true,
margin: 20,
nav: true,
dots: false,
responsive: {
0: {
items: 2
},
480: {
items: 3
},
786: {
items: 4
}
}
});
/*Change css of links on click*/
$('.select-link li').click(function() {
$('.select-link li').removeClass('active-link');
$(this).addClass('active-link');
});
/*showing/hiding particular carousels on clicking links*/
$('.link-promotions').click(function() {
$('.sec-casino-games').hide();
$('.sec-live-odds').hide();
$(".sec-promotions").show(1000);
$(".pic1, .pic2, .pic3, .pic4").hide('slow');
});
$('.link-casino-games').click(function() {
$('.sec-promotions').hide();
$('.sec-live-odds').hide();
$(".sec-casino-games").show(1000);
$(".pic1, .pic2, .pic3, .pic4").hide('slow');
});
$('.link-live-odds').click(function() {
$('.sec-promotions').hide();
$('.sec-casino-games').hide();
$(".sec-live-odds").show(1000);
$(".pic1, .pic2, .pic3, .pic4").hide('slow');
});
});
You typically want to stay away from built in special effects that hardcode inline styles on elements that leverage libraries that are heavy on visual user experience. The reason for this is because the jQuery built in special effects all change the style attribute of the element directly, which will typically clash with library CSS rules.
I've taken the liberty to rewrite most of your jQuery to be simpler, less redundant, and streamlined. The main thing, to answer your question, is to leverage the .addClass() method, which allows you to .animate() add classes to your element, much like that same manner that .hide() does. This is done by adding time in milliseconds as second parameter when using the .addClass() method.
jQuery
jQuery(document).ready(function($) {
$('.owl-carousel').each(function(index, element) {
jQuery(element).owlCarousel({
items: 4,
lazyLoad: true,
margin: 20,
nav: true,
dots: false,
responsive: {
0: {
items: 4
}
}
});
});
var owl_content = jQuery('.owl-carousel');
var owl_links = jQuery('.select-link a');
jQuery(owl_links).each(function(index, element) {
jQuery(element).click(function(e) {
jQuery(owl_content).each(function(i, el) {
jQuery(el).addClass('c', 500);
if (i === index) {
jQuery(owl_content[index]).removeClass('c', 500);
console.log(i);
}
});
});
});
/*Change css of links on click*/
$('.select-link li').click(function() {
$('.select-link li').removeClass('active-link');
$(this).addClass('active-link');
});
jQuery('.c.first').removeClass('c');
});
Fiddle
https://jsfiddle.net/dixalex/yLjw7gsk/8/
Sources
animating addClass/removeClass with jquery
I am trying to make a carouFredsel responsive carousel that should show a variable amount of elements depending on how many fit in the width. The problem I have is that whenever I set responsive to true, the elements get a 100% with and this is not what I need.
I managed to create a fiddle where I show:
1) a carousel with a 100% width that shows as many elements as they fit and when the browser window gets resized, more or less elements are shown
2) an item image that gets resized according to the size of the screen
I would like to combine 1 and 2 and have a carousel that behaves like 1 with elements that behave like 2.
It is not possible for me to know in advance how many items would fit (not even in percentage) since for each carousel the elements may have any width (though all of them have the same).
Is this possible ? What am I missing ?
http://jsfiddle.net/379zW/2/
var options = {
circular: true,
infinite: false,
auto : false,
responsive: false,
prev : {
button : "#p",
key : "left"
},
next : {
button : "#n",
key : "right"
},
width: '100%',
};
$("#carousel_123").carouFredSel(options);
This might solve your problem:
var options = {
circular: true,
infinite: false,
auto: false,
items: {
width: '100%',
height: 'variable',
visible: {
min: 1,
max: 999
}
},
responsive: false,
prev: {
button: "#p",
key: "left"
},
next: {
button: "#n",
key: "right"
},
width: '100%',
};
$("#carousel_123").carouFredSel(options);