I'm trying to shorten the speed of the autoplay on an owl carousel (I'm using owl carousel 1), but it's always stuck at 5 seconds. On the website (which is broken) it says you can add an integer after autoplay: but it doesn't matter what number I add, it always takes 5 seconds to play.
And I should mention that autoPlay (with capital P) does not work for me like it's shown on their website. Only if I use autoplay it actually auto plays.
These are the settings of my owl carousel:
$("#owl-mockup").owlCarousel({
loop: true,
autoplay: 3000,
responsiveClass:true,
responsive:{
0:{
items:1,
},
600:{
items:1,
},
1000:{
items:3,
}
}
});
Why is it not listening to the number added?
Try using:
autoplay: true,
autoplayTimeout: 3000
instead:
autoplay: 3000
In owl docs says that autoplay expect a boolean value. In any case, for change the timing i'm using autoplayTimeout and it work perfect.
I had this same problem, been hacking at Owl Carousel for 48 hours now and nearly there. Regading the speed, whilst I had the Owl JS embedded in the page, I still had the external JS sheet from the initial set up that I forgot about further down the page. No matter what I did, I was stuck at 5 seconds. Once I removed it,
autoplay: true,
autoplayTimeout: 3000
the above controls worked fine.
Related
I'm using slick slider for a slider on a WP page template I built for a client, and I'm running into a problem where the slider sometimes initializes okay, and sometimes it doesn't initialize at all. I can't find a solution to why is it happening.
When it doesn't initialize it just shows the slider content as full width images. Screenshots included.
This is how it looks when it's ok:
This is how it looks when it doesn't:
This is the slick slider code:
// Initialize slick slider
$('.sample-class').slick({
slidesToShow: 8,
slidesToScroll: 1,
dots: false,
arrows: true,
infinite: true,
autoplay : true,
autoplaySpeed: 3000
});
I am playing around with a boostrap theme that is using Owl carousel.
This is the theme I am using
https://demo.themewagon.com/preview/free-html5-bootstrap-4-travel-agency-website-template-ecoland
As you can see on the link the owl-carousel is used in two places
for hero slide on top of the page
for testimonials.
I would like to slow down the speed of slides and make them stop sliding on hover.
I added a script to bottom of page that looks like this:
<script>
$(".owl-carousel").owlCarousel({
//Autoplay
autoplay:true,
autoplayTimeout:10000,
stopOnHover : true
})
</script>
<script src="/js/owl.carousel.min.js"></script>
<div class="home-slider owl-carousel enablescroll">
This script is not working so far and I am not sure what to change.
Any advice appreciated.
Try using autoplaySpeed and autoplayHoverPause
$(".owl-carousel").owlCarousel({
//Autoplay
autoplay: true,
autoplaySpeed:10000,
autoplayHoverPause: true
})
I use owl-carousel with these options:
jQuery('.my-carousel').owlCarousel({
autoplay: true,
autoplayTimeout: 5000,
autoplaySpeed: 3000
});
The carousel will take 3 seconds to switch to the next image, then stay on this image for 2 seconds before starting the next 3-second animation.
What I'm looking for: On page load the first image is displayed for 5 seconds before the animation starts. I want the first interval to take only 2 seconds (or instantly start the animation).
To my knowledge, there is no way of differentiating the first slide from the others in terms of the timing functions. One way of doing this, though, is to disable autoplay and then re-enable it. The first movement will take the full autoplayTimeout value, whilst all subsequent timeouts will have the a autoplaySpeed deducted from them.
jQuery('.my-carousel').owlCarousel({
autoplay: true,
autoplayTimeout: 5000,
autoplaySpeed: 3000
}).trigger("stop.owl.autoplay")
.trigger("play.owl.autoplay");
I recently completed a website for a photography friend and he came back to me saying that the sliders on his project pages were hard to use and he would like arrows, whenever I have tried adding arrows into it I've found the Navigation pushes the arrows out of view, I was wondering if anyone knows of a way of fixing this.
Please see the link below to the page. Thank you in advance.
Daniels Website
The website you linked uses Swiper, which is a framework for sliders. According to the Getting Started, you need to add two arrows, which your friend seems to have commented out. Since your site has jQuery, you also need to initialize it within the document.ready event. Try putting the code within the event like this:
$(document).ready(function () {
//initialize swiper when document ready
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
paginationClickable: true,
spaceBetween: 0,
loop: true,
centeredSlides: true,
autoplay: 7000,
autoplayDisableOnInteraction: false,
slidesPerView: 1,
effect: 'fade'
})
});
This problem is plaguing me. I've used jCarouselLite for years and years, I even added a "fade" feature to the original library released by Ganeshji Marwaha for my own use. I recently switched to the new plug-in because it is still supported, it uses touch events, and it can be responsive. But I have had no luck in using it.
I am almost certainly doing something stupid, but I can not figure out what... Can anyone take a look with fresh eyes at this homepage implementation?
http://staging.tbc1927.com/www/
The implementation here is not responsive, but I would like swipe supported.
$().ready(function() {
$(".homecarousel").jCarouselLite({
visible: 1,
auto: 12000,
speed: 800,
responsive: false,
swipe: true,
circular: true,
btnNext: ".next",
btnPrev: ".previous"
});
});
The CSS is simple enough, and I am letting the plug in do the heavy lifting. The jQuery I am using is the same as they recommend (1.7.2), though I had been using a newer version as well with no luck (1.8).
When the carousel initially loads, the first slide is fine. Then it goes away, and the whole carousel is positioned WAY off the page. The longer the carousel runs, the more off the page it is positioned.
What am I missing?
The author of the plug in helped me out here. The plug in changed the "auto" option to a boolean value, and the "12000" value was throwing it off. To set the animation delay, the plug in now uses a parameter called "timeout". The correct implementation script should be:
$().ready(function() {
$(".homecarousel").jCarouselLite({
visible: 1,
auto: true,
timeout: 12000,
speed: 800,
responsive: false,
swipe: true,
circular: true,
btnNext: ".next",
btnPrev: ".previous"
});
});