I struggle with Swiper.js. I want to have looping swiper with autoplay, ken burns effect (zoom in from center) and fade onto the next one. I have everything coded, but I every slide transforms on X-axis and moves to the right ending outside of webpage display area.
I already have working homepage slider with Elementor plugin, which seems to utilize outdated Swiper.js version with specific classes that make it unclear on how to add paralax, pagination, navigation etc. Moreover it doesn't work properly with mobile devices.
I tried to replicate the same effects with newer version of Swiper.js and coded everything like dynamic bullets, navigation, zoom transition etc., but for some reason only the first slide displays correctly and then every other slide moves on X-Axis about 1365px to the right.
Here is a codepen of how it looks like:
https://codepen.io/JUDr-Martin-Kov-cs/pen/poBWXzW
HTML
<!-- Custom styles for fullscreen slider -->
<style>
body, html {
position: relative;
height: 100%;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
background-size: cover;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
color: #fcfcfc;
font-size: 24px;
animation: zoom;
animation-duration: 20s;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
transform: translate3d(0, 0, 0);
}
@keyframes zoom {
from {
transform: scale(1);
}
to {
transform: scale(1.3);
}
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image: url('');"></div>
<div class="swiper-slide" style="background-image: url('');"></div>
<div class="swiper-slide" style="background-image: url('');"></div>
<div class="swiper-slide" style="background-image: url('');"></div>
<div class="swiper-slide" style="background-image: url('');"></div>
<div class="swiper-slide" style="background-image: url('');"></div>
<div class="swiper-slide" style="background-image: url('');"></div>
<div class="swiper-slide" style="background-image: url('');"></div>
<div class="swiper-slide" style="background-image: url('');"></div>
<div class="swiper-slide" style="background-image: url('');"></div>
<div class="swiper-slide" style="background-image: url('');"></div>
<div class="swiper-slide" style="background-image: url('');"></div>
<div class="swiper-slide" style="background-image: url('');"></div>
<div class="swiper-slide" style="background-image: url('');"></div>
</div>
<!-- Add pagination -->
<div class="swiper-pagination"></div>
<!-- Add navigation arrows -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</body>
</html>
JS
document.addEventListener('DOMContentLoaded', function () {
var mySwiper = new Swiper('.swiper-container', {
// Optional parameters
direction: 'horizontal', // or 'vertical'
loop: true, // Enable loop mode
// If we need pagination
pagination: {
el: '.swiper-pagination', // Specify the pagination container
clickable: true, // Allow clickable pagination bullets
dynamicBullets: true,
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next', // Specify the next button selector
prevEl: '.swiper-button-prev', // Specify the previous button selector
},
// Autoplay
autoplay: {
delay: 5000, // Delay between transitions in milliseconds
disableOnInteraction: false, // Disable autoplay when user interacts with swiper
},
// Fade effect
speed: 2000,
effect: 'fade', // Specify the transition effect
fadeEffect: {
crossFade: true
}
});
});
I have no idea what causes the issue. I tried to replicade it on my codepen and it is doing exactly the same thing as on my webpage.
I tried to set these parameters, but they didn't help:
.swiper-slide {
background-size: cover;
background-position: center;
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
Any ideas how to solve this?
Thank you