Develop Reference

Autoplay stops after 1 fade when using fade effect in swiper js

I have a slider that I want to set to autoplay and have a fade effect. Everything works fine when using the normal slide effect but after I added the fade it stops working after 1 fade. It's also not fading but just instantly changing to the next slide, only when I manually use my mouse to slide it shows a fade effect.
What could be the issue?
In my js file I import the 'EffectFade' like this:
import Swiper, {Autoplay, Navigation, Pagination, EffectFade} from 'swiper';
Swiper.use([Autoplay, Navigation, Pagination, EffectFade]);
Then my swiper code:
new Swiper('#agrarisch .swiper-container', {
slidesPerView: 1,
// spaceBetween: 30,
effect: 'fade',
autoplay: {
delay: 2500,
},
navigation: {
nextEl: '#agrarisch .swiper-button-next',
prevEl: '#agrarisch .swiper-button-prev',
}
});
Example video

The same problem arose for me.
In my case, I solved it by loading "swiper-bundle.min.css" instead of "swiper.min.css".

Slick Slider sometimes works, sometimes doesn't

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

slick.js carousel not initializing in tabs

slick.js carousel won't initialize in second tab. When I open the second tab the main video does not show until I click the dots.
I tried using $(videoSlider).slick('setPosition'); and also added .each function which does work but not if sliders are in the tabs. If I have numerous carousels on a page they function prooperly. It is only when put in tabs it does not work.
// initialize slick sliders
$(videoSlider).each(function() {
$(this).slick({
arrows: false,
dots: true,
infinite: true,
speed: 500, slidesToShow: 1,
slidesToScroll: 1
});
});
Carousel will work in tabs as it does when out of tabs

An issue that stands out is in your selector for videoSlider. This needs to be a string value and should most likely be '.videoSlider' to match a class used in your markup.
You may also run into an issue if you initialize a slideshow while it's hidden in a tab. In this case, Slick has trouble determining the slide width and assigns a width of '0px' to each slide. You can overcome this issue by refreshing your slideshow when you reveal your tab's contents. For instance, if your slideshow has id="slideshow1":
$("#slideshow1").slick("refresh");
More information about the hidden slideshow issue: https://github.com/kenwheeler/slick/issues/235

Owl carousel autoplay speed stuck at 5 seconds

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.

flexslider and flexcarousel on one page

When I try to use "basic flexlisder" (http://flexslider.woothemes.com/index.html) and "basic carousel" (http://flexslider.woothemes.com/basic-carousel.html) on one page, carousel does not display properly. I guessed it's fault of clashing class names (since both are in <div class="flexslider">). However, after analyzing source code on flexslider page, I found they put the carousel in <div class="flexslider carousel"> , unlike what is written in the example, but it still did not help. Carousel still behaves like slider.
I also tried copying styles for new class, which I called flexcarousel, but it didn't work (even after making changes in jquery call as well). Anyone has simple example of slider and carousel working on a simple page?
My javascript:
<script type="text/javascript">
//slideshow
$(window).load(function() {
$('.flexslider').flexslider({
animation : "slide",
start : function(slider) {
$('body').removeClass('loading');
}
});
});
//carousel
$(window).load(function() {
$('.flexcarousel').flexslider({
animation : "slide",
animationLoop : false,
itemWidth : 210,
itemMargin : 5,
minItems : 2,
maxItems : 4
});
});
</script>

The carousel class does not actually make it a carousel, you have to assign the items a width using itemWidth, within the options:
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 210, // Must have a size set for it to switch to carousel view.
});
});
Make sure to use different IDs to target each individual flexslider (if you have more than one):
<div id="main-slider" class="flexslider">
<div id="secondary-slider" class="flexslider">