I have 2 codes of swiper sliders. And they do not work for me smoothly when the two are together on the same page, I tried to change the classes but it doesn't work also.. Anyone know how to fix this? What should be done?
First swiper slider:
<body>
<!-- Swiper -->
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://thenewmedia.co.il/wp-content/uploads/2022/01/עיצוב-ללא-שם-17-1.png" />>
</div>
<div class="swiper-slide">
<img src="https://thenewmedia.co.il/wp-content/uploads/2022/01/עיצוב-ללא-שם-18-1.png" />>
</div>
<div class="swiper-slide">
<img src="https://thenewmedia.co.il/wp-content/uploads/2022/01/עיצוב-ללא-שם-9-1.png" />>
</div>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {
effect: "coverflow",
grabCursor: true,
centeredSlides: true,
slidesPerView: "auto",
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows: true,
},
autoplay: {
delay: 1500,
},
});
</script>
Second Slider:
<body>
<!-- Swiper -->
<div class="swiper mySwiper1">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="swiper-slide">
<img class="projectImg" src="https://thenewmedia.co.il/wp-content/uploads/2022/06/דנאי.jpg" />
</div>
<div class="swiper-slide">
<img class="projectImg" src="https://thenewmedia.co.il/wp-content/uploads/2022/06/שף.jpg" />
</div>
<div class="swiper-slide">
<img class="projectImg" src="https://thenewmedia.co.il/wp-content/uploads/2022/06/רונית.jpg" />
</div>
</div>
</div>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper1", {
spaceBetween: 30,
effect: "fade",
autoplay: {
delay: 1500,
},
loop: true,
});
</script>