We Keep Coding

Reset owl carousel autoplayTimeout after user action

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');
});
});

Showing half of the prev and next images in owl carousel

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
});

How to make carousel slide continuously with Owl Carousel

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

Owl carousel 2 - custom animation on touch

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

Remove Snap Back in OwlCarousel when using SinglePage setting

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
});