How to solve the problem with Swiper flipping slides?

  • 0
    There are custom tabs for the gallery with a slider The problem is that the scroll button (on the slider) when switching to another tab (tab) works every other time or does not work at all. Tabs and photos in the slider are displayed through a loop Please help me solve this problem An example of this problem on the site

    let realizedTabs = document.querySelectorAll('.realized__tab');
    let realizedSwipers = document.querySelectorAll('.realized__swiper');
    realizedTabs[0].classList.add('active');
    realizedSwipers.forEach(itemInner => {
      itemInner.style.display = 'none';
    })
    realizedSwipers[0].style.display = 'block';
    realizedTabs.forEach((item, index) => {
      item.addEventListener('click', () => {
        realizedSwipers.forEach(itemInner => {
          itemInner.style.display = 'none';
        })
        realizedTabs.forEach(itemInner => {
          itemInner.classList.remove('active')
        })
        realizedSwipers[index].style.display = 'block';
        item.classList.add('active');
      })
    })
    
    
    let sliderClass = 'realized__swiper';
    let gamesSliderItems = Array.from(document.querySelectorAll('.' + sliderClass));
    gamesSliderItems.forEach((item, index) => {
      let classAdd = sliderClass + index;
      item.classList.add(classAdd);
      new Swiper('.' + classAdd, {
        effect: 'coverflow',
        loop: true,
        centeredSlides: true,
        slidesPerView: 1.1,
        autoplay: {
          delay: 2000,
        },
        speed: 300,
        coverflowEffect: {
          rotate: 0,
          stretch: 50,
          depth: 550,
          modifier: 2.5,
          slideShadows: false,
        },
        navigation: {
          nextEl: '.realized__nav .swiper-button-next',
          prevEl: '.realized__nav .swiper-button-prev',
        }
      });
    });


    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <div class="realized__tabs">
      <?php $posts = get_posts("category=23&orderby=date&numberposts=7"); ?>
      <?php if ($posts) : ?>
      <?php foreach ($posts
    
                                 as $post) :
                      setup_postdata($post); ?>
      <div class="realized__tab">
        <div class="realized__address">
          <?php echo the_field('realized_address'); ?>
        </div>
        <div class="realized__action">
          <?php echo the_field('realized_action'); ?>
        </div>
      </div>
      <?php endforeach; ?>
      <?php wp_reset_postdata(); // reset the query ?>
      <?php endif; ?>
    </div>
    
    
    <div class="realised__swiper-wrapper">
      <?php if ($posts) : ?>
      <?php foreach ($posts
    
              as $post) :
              setup_postdata($post); ?>
    
    
      <div class="realized__swiper swiper-container">
        <div class="realized__nav slidernav">
          <div class="swiper-button-prev slidernav__item"></div>
          <div class="swiper-button-next slidernav__item"></div>
        </div>
        <div class="swiper-wrapper">
          <div class="swiper-slide realized__item">
            <div class="realized__img" style="background-image: url('<?php echo the_field('realized_pic1'); ?>')"></div>
          </div>
          <div class="swiper-slide realized__item">
            <div class="realized__img" style="background-image: url('<?php echo the_field('realized_pic2'); ?>')"></div>
          </div>
          <div class="swiper-slide realized__item">
            <div class="realized__img" style="background-image: url('<?php echo the_field('realized_pic3'); ?>')"></div>
          </div>
          <div class="swiper-slide realized__item">
            <div class="realized__img" style="background-image: url('<?php echo the_field('realized_pic4'); ?>')"></div>
          </div>
        </div>
      </div>
    
    
    
      <?php endforeach; ?>
      <?php wp_reset_postdata(); // reset the query ?>
      <?php endif; ?>
    </div>
    JavaScript Anonymous, Jan 30, 2020

  • 0 Answers
Your Answer
To place the code, please use CodePen or similar tool. Thanks you!