Помогите решить проблему с перелистыванием слайдов Swiper

Question

Есть кастомные табсы для галереи с слайдером Проблема в том что кнопка пролистывания (на слайдере) при переключении на другой таб (вкладку) срабатывает через раз или не срабатывает вообще. Табсы и фото в слайдере выводятся через цикл Помогите пожалуйста решить данную проблему Пример данной проблемы на сайте

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>

БЛОГ НА HUSL

Помогите решить проблему с перелистыванием слайдов Swiper

Ответы (0 шт):