1

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>
Yuval Marzan
  • 11
  • 1

0 Answers0