owl-carousel does not scroll smoothly - javascript

The carousel can be viewed here under 'clients worked with'.
You'll notice the carousel starts reasonably smoothly then after a second or so starts to stagger. When it gets to what I can only assume is the end of it's play time, it then looks like it almost resets the position.
Here's the JS I'm using:
<script src="javascripts/custom/jquery-3.2.1.min.js"></script>
<script src="javascripts/custom/owl.carousel.js"></script>
<script>
var owl = $('.owl-carousel');
owl.owlCarousel({
items: 10,
loop: true,
margin: 10,
autoplay: true,
autoplayTimeout: 1000,
smartSpeed: 2500,
fluidSpeed: true,
autoplayHoverPause: true
});
$('.play').on('click', function() {
owl.trigger('play.owl.autoplay', [1000])
})
$('.stop').on('click', function() {
owl.trigger('stop.owl.autoplay')
})
</script>

Related

My Swiper.js doesn't stop on hover (only after adding speed parameter)

So I want to do this swiper.js carousel which slides linear from right to the left and after mouse hover it would stop. I used this function which works pretty fine:
$(".swiper-container3").hover(function() {
(this).swiper.autoplay.stop();
}, function() {
(this).swiper.autoplay.start();
});
If speed parameter is not defined in my swiper initialization function, then it stops after a hover (but only if the nearest slider will be on center of carousel).
How to force swiper.js to stop with the function above but not to wait for one of the sliders to be on center?
Rest of the code
const enableSwiper3 = function(){
mySwiper3 = new Swiper ('#swiper-container3', {
loop: true,
slidesPerView: "auto",
spaceBetween: 10,
centeredSlides: true,
a11y: true,
keyboardControl: true,
grabCursor: true,
freeMode: false,
pagination: {
el: '#swiper-pagination3',
},
paginationClickable: true,
breakpoints: {
400: {
slidesPerView: 'auto',
spaceBetween: 20,
loop: true
},
767: {
autoplay: {
delay: 5000,
disableOnInteraction: true,
pauseOnMouseEnter: true,
},
speed: 10000,
}
}
});
mySwiper3.autoplay.start();
}
I also want to lower its speed so whole slider goes linear very slow and just after hovering it it stops. Example on the site below: https://www.intercom.com/ (people are talking section).

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

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

SlidesJS Autoplay not working

I am trying to make autoplay work on a simple SlidesJS carousel:
http://www.cycle22x.com/
I checked out some other threads that answer similar problems but the solutions provided aren't working? Here is the script that is included in the file:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="/scripts/jquery.slides.min.js"></script>
<script>
$(function()
{
$('#slides').slidesjs(
{
play: 1000,
pause: 10,
hoverPause: true,
width: 960,
height: 540,
navigation:
{
effect: "fade"
},
pagination:
{
effect: "fade"
},
effect:
{
fade:
{
speed: 400
}
}
});
});
</script>
Any thoughts or ideas would be greatly appreciated.
you need to use auto: true to make it autoplay, like:
...
$('#slides').slidesjs({
width: 940,
height: 528,
play: {
active: true,
auto: true,
interval: 4000,
swap: true,
pauseOnHover: true,
restartDelay: 2500
}
});
See here:: Example Autoplay

jQuery multi sliders change slide in one time

I'm using slidesjs and I want make multi sliders
I have 2 sliders #show and #show2, and I want that 2 slidersw work in 1 time: slides will be change in one time.
Now now 1 slider slides change earlier than 2, what is wrong in my code ?
I want that slides will change in one time:
<script>
$(function(){
$("#show").slidesjs({
width: 900,
height: 300,
navigation: false,
pagination: {active: false},
play: {
auto: true,
pauseOnHover: true,
effect: "fade",
},
effect: {
slide: {
speed: 200
},
fade: {
speed: 300,
crossfade: true
}
}
});
$("#show2").slidesjs({
width: 900,
height: 300,
navigation: false,
pagination: {active: false},
play: {
auto: true,
pauseOnHover: true,
effect: "fade",
},
effect: {
slide: {
speed: 200
},
fade: {
speed: 300,
crossfade: true
}
}
});
});
</script>
I try .ready but slides also change in different time
Give them both a class, and target them at the same time.
<div class="sliders" id="show"></div>
<div class="sliders" id="show2"></div>
JS:
$(".sliders").slidesjs({ ... });

Categories