I want to add some animation to swiperjs to tell user this slider has swipe function and you can swipe to slide, animation working good but it conflict with swiperjs default swiping function, and you can not swipe slides, is there any solution to fix this?
var swiper = new Swiper(".mySwiper", {
slidesPerView: 3,
});.swiper-wrapper {
transition-duration: 0ms;
transform: translate3d(0px, 0px, 0px);
animation: example 5s infinite alternate;
}
@keyframes example {
0% {
transform: translate3d(0px, 0px, 0px);
}
50% {
transform: translate3d(0px, 0px, 0px);
}
75% {
transform: translate3d(-20px, 0px, 0px);
}
100% {
transform: translate3d(0px, 0px, 0px);
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
</div>
</div>the css and the translate3d(0px, 0px, 0px) and keyframes was causing it to not work. Remove this and it works fine:
const swiper = new Swiper('.swiper', {
// Optional parameters
direction: 'horizontal',
loop: true,
slidesPerView: 3,
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
});.swiper {
width: 600px;
height: 300px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>Wasn't sure what you were going for with the translate3d but this post might help :
Javascript Slider doesn't work correctly with transition end
but the swiperjs API has many effects you can use which might be easier: https://swiperjs.com/swiper-api#fade-effect
I hope this helps