Reset owl carousel autoplayTimeout after user action - javascript

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

Related

slickNext not working in center mode slick slider

I am having a situation where on clicking on first slide of slider, i need the carousel to move to next slide.
Below is the code which i am using to create a slider
var $myanimSlider = $('.animslider').slick({
dots: true,
arrows: true,
slidesToShow: 3.6,
slidesToScroll: 1,
vertical: false,
autoplay: false,
autoplaySpeed: 2500,
infinite: false,
focusOnSelect: true,
touchMove: true,
speed: 500,
centerMode: true,
centerPadding: '0',
cssEase: 'linear',
prevArrow: '<div class="animslick_nav prev-arrow"><i></i><svg><use xlink:href="#circle"></svg></div>',
nextArrow: '<div class="animslick_nav next-arrow"><i></i><svg><use xlink:href="#circle"></svg></div>',
appendDots: $('.animDots'),
responsive: [
{ breakpoint: 767,
settings: {
arrows: true,
dots: true,
slidesToShow: 1
}
}
]
}).slickAnimation();
and i was trying to use the slickNext on click of first slide so that it may move to second slide.
$('#slick-slide00').click(function() {
$myanimSlider.slick("slickNext");
});
slick-slide00 is the id of first slide but the above code is not working.
Can someone help me understand what is the issue and there is no errors in the console also.

Owl Craousel + Animate.css - Animation dont work

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.

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 set the delay before changing slide?

I use Slick slider. I need to set the delay before changing slide, how can I realize this task?
Here is slider's JS-code:
$(".intro__slider").slick({
infinite: true,
dots: true,
dotsClass: "intro__dots",
arrows: false,
swipe: false,
draggable: false
});
var introTitle = $(".intro__title"),
introSlide = $(".intro__slide");
$(".intro__slider").on("beforeChange", function () {
introTitle.addClass("intro__title_hidden");
introSlide.addClass("intro__slide_overlayed");
});
$(".intro__slider").on("afterChange", function () {
introTitle.removeClass("intro__title_hidden");
introSlide.removeClass("intro__slide_overlayed");
});
Here is full code on codepen
try this:
// On before slide change
$('.your-element').on('beforeChange', function(event, slick, currentSlide, nextSlide){
setTimeout(function() {
//your code to be executed after 1 second
}, 1000);
});
You can use autoplaySpeed: 3000, in slick options
$(".intro__slider").slick({
autoplaySpeed: 3000,
infinite: true,
dots: true,
dotsClass: "intro__dots",
arrows: false,
swipe: false,
draggable: false
});
you can use speed to 3000
$(".intro__slider").slick({
infinite: true,
autoplay: true,
autoplaySpeed: 6000,
dots: true,
dotsClass: "intro__dots",
arrows: false,
speed:3000
});
will make the transition in 3 sec, but it won't make a delay, to use a delay I would recommend to use your own dots buttons and the methods slickGoTo , slickNext

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

Categories