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

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

Related

Owl carousel autoplay and stopOnHover not working

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

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

Food menu slider with an infinite loop

could you please help me to understand how to make slider I see in "our menu" section of https://livedemo00.template-help.com/wt_61177_v1/#undefined6 site with an infinite loop and same functions.
The exact slider you are looking for is a Slick Auto play slider which is just the auto play version of the example you have. Example code.
$('.autoplay').slick({
slidesToShow: 5, //The amount of slides to be in view at any given time
slidesToScroll: 1, // The amount of slides to scroll on click or auto scoll
autoplay: true, // Sets the slider to automatically slide through the slides
autoplaySpeed: 2000, // The interval between sliding between slides
});
Example image of slider on slicks website:

How to add arrows on full screen slider

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

Crossfade not working very well in slides.js

I am using some javascript to randomly swap out the background image of a slideshow on page load. It works except that i want to use crossfading along with fade.
//slideshow script
<script>
$(document).ready(function(){
$('#slides').slides({
preload: true,
preloadImage: '/img/loading.gif',
play: 8000,
pause: 2500,
hoverPause: true,
crossfade:true,
effect:'fade',
});
});
When I set crossfade to "true", the transparent .pngs in the slide div stop fading nicely; the next one in line fades in ok, but the previous one persists and then disappears (doesn't fade out). If I delete crossfade, it works ok but the client wants then to fade in and out of each other.
Here's my jsfiddle
And here the location of my site home page where you can see the slider; (you need a user and password to see it, both are mig)

Categories

Resources