Tengo 2 códigos de controles deslizantes swiper. Y no funcionan para mí sin problemas cuando los dos están juntos en la misma página, traté de cambiar las clases pero tampoco funciona. ¿Alguien sabe cómo solucionar esto? ¿Lo que debe hacerse?
Primer deslizador deslizante:
<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>Segundo control deslizante:
<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>