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
});
Related
I'm using owl carousel + animate.css to achieve an effect for my carousel but the code just doesn't work for me.
I want the first card to zoom out and disappear as the second card slides in.
Here is what I have tried so far.
https://codepen.io/whoisda/pen/eYEaVGd
$(document).ready(function() {
$("#owl-example").owlCarousel({
navigation: true,
navigationText: ["", ""],
singleItem: true,
loop: true,
autoplay: true,
animateIn: 'animate__fadeIn',
animateOut: 'animate__zoomOut',
items:4,
margin:30,
stagePadding:100,
smartSpeed:400,
slideSpeed: 300
});
});
I'm using :
animateOut: 'animate__zoomOut',
This is the design/animation should look something like this:
https://imgur.com/a/DFpR0bZ
Based on the plugin document:
You can not use animate with more than one item is displayed
if U use
$(document).ready(function() {
$("#owl-example").owlCarousel({
navigation: true,
navigationText: ["", ""],
singleItem: true,
loop: true,
autoplay: true,
animateIn: 'animate__fadeIn',
animateOut: 'animate__zoomOut',
items:1,
margin:30,
stagePadding:100,
smartSpeed:400,
slideSpeed: 300
});
});
it well be fine But show just one item
Visit https://owlcarousel2.github.io/OwlCarousel2/demos/animate.html
Animate functions work only with one item and only in browsers that support perspective property.
I am trying to use one slider code for two sliders using same class name. I have created this codepen to illustrate the problem.
Problems:
Both sliders are not behaving same, means they have different sliding pattern. I have changed the color current active slide to show how both sliders are different.
One of the slider works fine ( till some slides) but other one totally off as you can see, in terms of container height, highlight pattern, etc.
Both of them have chopped content on top or bottom, even though there is no centerMode enabled. The behaviour I was expecting is to current slide to slide on the top and not show the preview of gone slide (top) and next (bottom)
Second slider changes its height randomly. I don't know why
I have tried one solution which didn't work either and it is there as commented code in the codepen.
$(".feature-container").each(function () {
console.log(this.id);
let elm_primary = $("#" + this.id)
.find(".feature-slider")
.get(0);
$(elm_primary).slick({
slidesToShow: 5,
slidesToScroll: 1,
focusOnSelect: true,
autoplay: true,
autoplaySpeed: 1000,
vertical: true,
arrows: false,
infinite: true,
responsive: [
{
breakpoint: 700,
settings: {
slidesToShow: 4,
slidesToScroll: 1,
focusOnSelect: true,
autoplay: true,
autoplaySpeed: 1000,
vertical: true,
dots: false,
arrows: true
}
}
]
});
});
I let owl to his default option (5000) but I have a problem when I start to drag or use the navigation, the owl carousel doesn't reset this time. If I drag 3 slides in 4 seconds, the 4th slide has only 1 second and jumps automatically to the next slide.
What's the solution?
owlSlider.owlCarousel({
items: numberOfSlides,
loop: loopCarousel,
//video: true,
nav: true,
navText: ['<span class="ico ico-pointer_left"></span>', '<span class="ico ico-pointer_right"></span>'],
dots: true,
autoplay: true,
lazyLoad: true,
//autoplayTimeout: 5000,
startPosition: currentSlide,
// autoplaySpeed: 300
autoplayHoverPause: true
});
Stopping autoplay and restarting after a slide change fixed this problem for me.
var owl;
$(document).ready(function(){
owl = $(".owl-carousel").owlCarousel({
nav: true,
autoplay: true,
autoplayTimeout: 2000
});
owl.on('changed.owl.carousel', function(e) {
owl.trigger('stop.owl.autoplay');
owl.trigger('play.owl.autoplay');
});
});
I want to do, that logos with Owl Carousel plugin will slide continuously (no with 1,2,3... seconds delay, but slide without stop) Is it possible with Owl Carousel?
Here is how I got owl carousel to constantly scroll.
I had to add in a trigger to start the loop as the autoplay was too long, and meant it didn't start straight away, then I have a second trigger that sets the speed back to match the main setting.
You need to make sure that autoplaySpeed and smartSpeed are set to the same timing, and that slideTransition is set to linear.
jQuery(document).ready(function() {
jQuery('.owl-carousel').owlCarousel({
loop: true,
items: 6,
autoplay: true,
slideTransition: 'linear',
autoplaySpeed: 6000,
smartSpeed: 6000,
center: true,
});
jQuery('.owl-carousel').trigger('play.owl.autoplay',[2000]);
function setSpeed(){
jQuery('.owl-carousel').trigger('play.owl.autoplay',[6000]);
}
setTimeout(setSpeed, 1000);
});
This should work, using autoplaySpeed and autoplayTimeout:
$('.owl-carousel').owlCarousel({
stagePadding: 0,
loop:true,
margin:10,
nav: false,
autoplay: true,
slideTransition: 'linear',
autoplayTimeout: 3000,
autoplaySpeed: 3000,
autoplayHoverPause: true,
responsive:{
0:{
items:2
},
600:{
items:3
},
1000:{
items:5
}
}
})
You can define your slideSpeed and autoPlay status with;
$('#my_carousel').owlCarousel({
autoPlay: true,
slideSpeed: 200
});
But firstly; you should see the all options in the Owl Carousel
Currently I am experiencing a snap back from the last image to the first when OwlCarousel reaches the last image. I would prefare it to continuously repeat in the same direction.
Is there a setting for this?
Currently the code is:
g.owlCarousel({
navigation: false,
slideSpeed: 500,
items: 1,
pagination: false,
loop: true,
mouseDrag: false,
touchDrag: false,
autoPlay: true,
singleItem: true
});