I'm using Owl Carousel 2 with Bootstrap framework. There are 12 items that I have in the Carousel and I need to display three on the 1280-pixel wide resolution.
The owl-stage width is calculated as the total width of the Carousel (on desktop-1280px) which comes out to be as 3772px when there is no scroll bar on page.
Now if I open developer tools and then close it back again (i.e. bring a scroll bar onto the page and then remove) the width of class owl-stage becomes 3840px.
Due to this, on page load since the width is 3772 some content of the fourth slide is visible (probably just 5–6 pixels) but it disturbs the layout.
autoWidth:true is not applied.
$('.owl-carousel').owlCarousel({
loop: true,
margin: 0,
nav: true,
onInitialized: fixOwl,
onRefreshed: fixOwl,
navText: [
"<span class='left-arrow-purple-bar'></span>",
"<span class='right-arrow-purple-bar'></span>"
],
responsiveClass: true,
responsive: {
320: {
items: 1.2,
nav: true
},
520: {
items: 1.45,
nav: true
},
720: {
items: 2.4,
nav: false
},
960: {
items: 3,
nav: true,
loop: false,
slideBy: 3,
margin: 0
}
}
});
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 implemented owl carousel in my application. I need to show half of prev and next images on the modal gallery of main image.
The modal gallery opens when you click on the main bigger image of the page. I tried to set stagePadding property, but it didnt work out.
Can I achieve the same without stagePadding property.
I have implemented thumbnails and other parts. You can view the implemented fuctionality here.
https://www.realtor.com/realestateandhomes-detail/6836-Xana-Way_Carlsbad_CA_92009_M29922-47778
galleryId.owlCarousel({
items: 1,
loop: true,
margin: 5,
startPosition: 1,
animateOut: 'fadeOut',
navSpeed: 100,
lazyLoad: true,
dots: false,
nav: true,
stagePadding: 100,
});
i had the same problem and my problem was solved with center:false.
$(".owl-carousel").owlCarousel({
center:false,
nav: true,
dots: false,
loop: true,
autoHeight: true,
autoWidth:false,
stagePadding: 10,
margin: 30
});
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);
Is it possible to use a custom animation option for mobile devices?
I have used options animateIn and animateOut with fadeIn and fadeOut.
This works well, carousel uses this effect when autoplay, but if I try to swipe slides, this animation is disabled, and carousel slide like a default one.
$('.carousel').owlCarousel({
mouseDrag:false,
touchDrag:true,
loop:true,
animateOut: 'fadeOut',
animateIn: 'fadeIn',
autoplay:true,
margin:0,
nav:true,
dots:false,
navText: ['',''],
responsive: {
0:{
items:1
},
600: {
items:1
},
1000: {
items:1
}
}
});
It looks, like animation options have no effect for touchdrag.
My solution might not be ideal but something like this may work:
$(".carousel").owlCarousel({
mouseDrag: false,
touchDrag: true,
loop: true,
animateOut: "fadeOut",
animateIn: "fadeIn",
autoplay: true,
margin: 0,
nav: true,
dots: false,
navText: ["", ""],
responsive: {
0: {
items: 1
},
600: {
items: 1
},
1000: {
items: 1
}
},
onDragged: function(e) {
$(e.target).hide().fadeIn("slow");
}
});
So we tie in to the onDragged event and simply hide and fade-in the entire carousel. Do test to ensure it is not buggy, but this might work for you as a kind of stop-gap solution (it isn't the best way as it may simply be masking the underlying transition and that is something you might notice if you flick through quite quickly).
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);