Запустить autoplay при клике swiper?

Question

У меня есть слайдеры, при клике на один из них появляется модальное окно со слайдером. Подскажите пожалуйста как сделать так, что-бы при открытии модального окна запускался autoplay у слайдера на который нажали? при закрытии autoplay останавливался. И так со всеми карточками. Сейчас у меня работает только первая карточка. Спасибо! https://codepen.io/ladyelizaveta/pen/zYJOQRV



document.querySelectorAll('.product-categories').forEach(n => {
    const sliderCateg = new Swiper(n.querySelector('.product-categories__slider'), {
        // Подключаем модули слайдера
        // для конкретного случая
        modules: [Navigation],
        observer: true,
        observeParents: true,
        slidesPerView: 3,
        slidesPerGroup: 3,
        spaceBetween: 16,
        autoHeight: false,
        speed: 800,
        grabCursor: true,
        //loop: true,
        //lazy: true,

        // Кнопки "влево/вправо"
        navigation: {
            prevEl: n.querySelector('.product-categories__arrow-prev'),
            nextEl: n.querySelector('.product-categories__arrow-next'),
        },
        // События
        on: {
        }
    });
});

document.querySelectorAll('.stories__cont').forEach(s => {
    const sliderStories = new Swiper(s.querySelector('.stories__cont-swiper'), {
        observer: true,
        observeParents: true,
        slidesPerView: 1,
        spaceBetween: 0,
        autoHeight: true,
        speed: 800,
        loop: true,
        autoplay: {
            delay: 3500,
            disableOnInteraction: false
        },
        pagination: {
            el: s.querySelector(".stories-swiper-pagination"),
            clickable: true
        },
        navigation: {
            prevEl: s.querySelector(".stories-swiper-button-prev"),
            nextEl: s.querySelector(".stories-swiper-button-next"),
        },
        on: {
            init() {
                function playStoriess(stor, answer) {
                    if (stor == s) {
                        s.autoplay.start()
                    } else if (answer == '1') {
                        sliderStories.autoplay.stop()
                    }
                };
                function clickStories() {
                    const allButtons = document.querySelectorAll('.stories-button')
                    const storiesAll = document.querySelector('.stories')
                    if (allButtons.length) {
                        allButtons.forEach(button => {
                            button.addEventListener('click', function () {
                                storiesAll.classList.add('_active')
                                let currentStories = button.getAttribute('data-stories');
                                let curStor = document.querySelector(`#${currentStories}`)
                                curStor.classList.add('_active')
                                playStoriess(currentStories)
                            });
                        });
                        const closeStoriesButton = document.querySelector('.stories__close')
                        if (closeStoriesButton) {
                            closeStoriesButton.addEventListener('click', function () {
                                storiesAll.classList.remove('_active')
                                let activeStorieThis = document.querySelector('.stories__cont-swiper._active')
                                activeStorieThis.classList.remove('_active')
                                playStoriess(0, 1)
                            });
                        }
                    }
                }
                clickStories()
            }
        },
    });
});
.no-scroll {
    height: -webkit-fill-available;
    overflow: hidden;
}

.stories {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -10000;
    background-color: #1f1b16;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}
.stories._active {
    opacity: 1;
    pointer-events: all;
    visibility: visible;
    z-index: 100000;
}
.stories__back {
    background: 50% / cover no-repeat url("../img/sback.jpg");
    filter: blur(200px);
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
}
.stories__cont {
    width: 100%;
    height: 100%;
    position: relative;
}
.stories__cont-swiper {
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}
.stories__cont-swiper._active {
    width: 100%;
    height: 100%;
    opacity: 1;
    pointer-events: all;
    visibility: visible;
}
.stories__cont-swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.stories__cont-swiper-slide-img {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.stories__cont-swiper-slide-img img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    object-position: center center;
}
.stories-swiper-pagination {
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    padding: 5px;
    display: flex;
    justify-content: space-between;
}
.stories-swiper-pagination .swiper-pagination-bullet {
    width: auto;
    height: 2px;
    margin: 0px 1px;
    flex: 1;
    position: relative;
}
.stories-swiper-pagination .swiper-pagination-bullet::before {
    background-color: hsla(0deg, 0%, 100%, 0.4);
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
}
.stories-swiper-pagination .swiper-pagination-bullet::after {
    background-color: #fff;
    position: absolute;
    content: "";
    width: 0%;
    height: 100%;
}
.stories-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after {
    width: 100%;
    transition: 4s;
}
.stories-swiper-pagination .swiper-pagination-bullet._active.swiper-pagination-bullet-active::after {
    width: 100%;
}
.stories-swiper-button-next {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 20%;
    transition: 4s;
}
.stories-swiper-button-prev {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 20%;
}


.stories__close {
    width: 24px;
    height: 24px;
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 1000001;
  background:#fff;
  
}


.swiper {
    overflow: hidden;
}
.swiper-wrapper {
    width: 100%;
    height: 100%;
    box-sizing: content-box;
    display: flex;
    position: relative;
}
.swiper-vertical {
    .swiper-wrapper {
        flex-direction: column;
    }
}
.swiper-autoheight {
    .swiper-wrapper {
        align-items: flex-start;
    }
}
.swiper-initialized {
    .swiper-slide {
        flex-shrink: 0;
        // transition-property: transform;
    }
}
.swiper-android {
    .swiper-slide,
    .swiper-wrapper {
        transform: translate3d(0px, 0, 0);
    }
}
.swiper-button-lock {
    display: none !important;
}

.swiper-button-disabled{
    display: none;
}
<div class="page__categories categories">
  <div class="categories__container">
    <div class="categories__body product-categories ofm">
      <div class="product-categories__content">
        <div class="product-categories__slider swiper">
          <div class="product-categories__wrapper swiper-wrapper">
            <div class="product-categories__slide swiper-slide stories-button" data-stories="ss1">
              <div class="product-categories__image">
                <img src="https://img2.akspic.ru/previews/9/8/5/1/7/171589/171589-yabloko-atmosfera-gora-prirodnyj_landshaft-purpur-500x.jpg" alt="">
              </div>
            </div>
            <div class="product-categories__slide swiper-slide stories-button" data-stories="ss2">
              <div class="product-categories__image">
                <img src="https://img2.akspic.ru/previews/9/8/5/1/7/171589/171589-yabloko-atmosfera-gora-prirodnyj_landshaft-purpur-500x.jpg" alt="">
              </div>
            </div>
            <div class="product-categories__slide swiper-slide stories-button" data-stories="ss3">
              <div class="product-categories__image">
                <img src="https://img2.akspic.ru/previews/9/8/5/1/7/171589/171589-yabloko-atmosfera-gora-prirodnyj_landshaft-purpur-500x.jpg" alt="">
              </div>
            </div>
            <div class="product-categories__slide swiper-slide stories-button" data-stories="ss4">
              <div class="product-categories__image">
                <img src="https://img2.akspic.ru/previews/9/8/5/1/7/171589/171589-yabloko-atmosfera-gora-prirodnyj_landshaft-purpur-500x.jpg" alt="">
              </div>
            </div>
            <div class="product-categories__slide swiper-slide stories-button" data-stories="ss5">
              <div class="product-categories__image">
                <img src="https://img2.akspic.ru/previews/9/8/5/1/7/171589/171589-yabloko-atmosfera-gora-prirodnyj_landshaft-purpur-500x.jpg" alt="">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="stories">
  <div class="stories__close"></div>
  <div class="stories__cont">
    <div class="swiper stories__cont-swiper" id="ss1">
      <div class="swiper-wrapper">
        <div class="swiper-slide stories__cont-swiper-slide">
          <div class="stories__cont-swiper-slide-img">
            <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
          </div>

        </div>
        <div class="swiper-slide stories__cont-swiper-slide">
          <div class="stories__cont-swiper-slide-img">
            <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
          </div>

        </div>
        <div class="swiper-slide stories__cont-swiper-slide">
          <div class="stories__cont-swiper-slide-img">
            <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
          </div>

        </div>
        <div class="swiper-slide stories__cont-swiper-slide">
          <div class="stories__cont-swiper-slide-img">
            <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
          </div>

        </div>
        <div class="swiper-slide stories__cont-swiper-slide">
          <div class="stories__cont-swiper-slide-img">
            <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
          </div>
        </div>
        <div class="swiper-slide stories__cont-swiper-slide">
          <div class="stories__cont-swiper-slide-img">
            <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
          </div>

        </div>
        <div class="swiper-slide stories__cont-swiper-slide">
          <div class="stories__cont-swiper-slide-img">
            <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
          </div>

        </div>
        <div class="swiper-slide stories__cont-swiper-slide">
          <div class="stories__cont-swiper-slide-img">
            <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
          </div>
        </div>
        <div class="swiper-slide stories__cont-swiper-slide">
          <div class="stories__cont-swiper-slide-img">
            <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
          </div>
        </div>
        <div class="swiper-slide stories__cont-swiper-slide">
          <div class="stories__cont-swiper-slide-img">
            <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
          </div>
        </div>
        <div class="swiper-slide stories__cont-swiper-slide">
          <div class="stories__cont-swiper-slide-img">
            <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
          </div>
        </div>
      </div>
      <div class="stories-swiper-pagination"></div>
      <div class="stories-swiper-button-next"></div>
      <div class="stories-swiper-button-prev"></div>
    </div>
    <div class="swiper stories__cont-swiper" id="ss2">
      <div class="swiper-wrapper">
        <div class="swiper-slide stories__cont-swiper-slide">
          <div class="stories__cont-swiper-slide-img">
            <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
          </div>

        </div>
        <div class="swiper-slide stories__cont-swiper-slide">
          <div class="stories__cont-swiper-slide-img">
            <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
          </div>

        </div>
        <div class="swiper-slide stories__cont-swiper-slide">
          <div class="stories__cont-swiper-slide-img">
            <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
          </div>

        </div>
        <div class="swiper-slide stories__cont-swiper-slide">
          <div class="stories__cont-swiper-slide-img">
            <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
          </div>

        </div>
        <div class="swiper-slide stories__cont-swiper-slide">
          <div class="stories__cont-swiper-slide-img">
            <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
          </div>
        </div>
        <div class="swiper-slide stories__cont-swiper-slide">
          <div class="stories__cont-swiper-slide-img">
            <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
          </div>

        </div>
        <div class="swiper-slide stories__cont-swiper-slide">
          <div class="stories__cont-swiper-slide-img">
            <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
          </div>

        </div>
        <div class="swiper-slide stories__cont-swiper-slide">
          <div class="stories__cont-swiper-slide-img">
            <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
          </div>
        </div>
        <div class="swiper-slide stories__cont-swiper-slide">
          <div class="stories__cont-swiper-slide-img">
            <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
          </div>
        </div>
        <div class="swiper-slide stories__cont-swiper-slide">
          <div class="stories__cont-swiper-slide-img">
            <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
          </div>
        </div>
        <div class="swiper-slide stories__cont-swiper-slide">
          <div class="stories__cont-swiper-slide-img">
            <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
          </div>
        </div>
      </div>
      <div class="stories-swiper-pagination"></div>
      <div class="stories-swiper-button-next"></div>
      <div class="stories-swiper-button-prev"></div>
    </div>
    <div class="swiper stories__cont-swiper" id="ss3">
      <div class="swiper-wrapper">
        <div class="swiper-slide stories__cont-swiper-slide">
          <div class="stories__cont-swiper-slide-img">
            <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
          </div>

        </div>
        <div class="swiper-slide stories__cont-swiper-slide">
          <div class="stories__cont-swiper-slide-img">
            <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
          </div>

        </div>
        <div class="swiper-slide stories__cont-swiper-slide">
          <div class="stories__cont-swiper-slide-img">
            <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
          </div>

        </div>
        <div class="swiper-slide stories__cont-swiper-slide">
          <div class="stories__cont-swiper-slide-img">
            <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
          </div>

        </div>
        <div class="swiper-slide stories__cont-swiper-slide">
          <div class="stories__cont-swiper-slide-img">
            <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
          </div>
        </div>
        <div class="swiper-slide stories__cont-swiper-slide">
          <div class="stories__cont-swiper-slide-img">
            <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
          </div>

        </div>
        <div class="swiper-slide stories__cont-swiper-slide">
          <div class="stories__cont-swiper-slide-img">
            <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
          </div>

        </div>
        <div class="swiper-slide stories__cont-swiper-slide">
          <div class="stories__cont-swiper-slide-img">
            <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
          </div>
        </div>
        <div class="swiper-slide stories__cont-swiper-slide">
          <div class="stories__cont-swiper-slide-img">
            <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
          </div>
        </div>
        <div class="swiper-slide stories__cont-swiper-slide">
          <div class="stories__cont-swiper-slide-img">
            <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
          </div>
        </div>
        <div class="swiper-slide stories__cont-swiper-slide">
          <div class="stories__cont-swiper-slide-img">
            <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
          </div>
        </div>
      </div>
      <div class="stories-swiper-pagination"></div>
      <div class="stories-swiper-button-next"></div>
      <div class="stories-swiper-button-prev"></div>
    </div>
     <div class="swiper stories__cont-swiper" id="ss4">
      <div class="swiper-wrapper">
        <div class="swiper-slide stories__cont-swiper-slide">
          <div class="stories__cont-swiper-slide-img">
            <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
          </div>

        </div>
        <div class="swiper-slide stories__cont-swiper-slide">
          <div class="stories__cont-swiper-slide-img">
            <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
          </div>

        </div>
        <div class="swiper-slide stories__cont-swiper-slide">
          <div class="stories__cont-swiper-slide-img">
            <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
          </div>

        </div>
        <div class="swiper-slide stories__cont-swiper-slide">
          <div class="stories__cont-swiper-slide-img">
            <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
          </div>

        </div>
        <div class="swiper-slide stories__cont-swiper-slide">
          <div class="stories__cont-swiper-slide-img">
            <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
          </div>
        </div>
        <div class="swiper-slide stories__cont-swiper-slide">
          <div class="stories__cont-swiper-slide-img">
            <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
          </div>

        </div>
        <div class="swiper-slide stories__cont-swiper-slide">
          <div class="stories__cont-swiper-slide-img">
            <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
          </div>

        </div>
        <div class="swiper-slide stories__cont-swiper-slide">
          <div class="stories__cont-swiper-slide-img">
            <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
          </div>
        </div>
        <div class="swiper-slide stories__cont-swiper-slide">
          <div class="stories__cont-swiper-slide-img">
            <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
          </div>
        </div>
        <div class="swiper-slide stories__cont-swiper-slide">
          <div class="stories__cont-swiper-slide-img">
            <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
          </div>
        </div>
        <div class="swiper-slide stories__cont-swiper-slide">
          <div class="stories__cont-swiper-slide-img">
            <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
          </div>
        </div>
      </div>
      <div class="stories-swiper-pagination"></div>
      <div class="stories-swiper-button-next"></div>
      <div class="stories-swiper-button-prev"></div>
    </div>
     <div class="swiper stories__cont-swiper" id="ss5">
      <div class="swiper-wrapper">
        <div class="swiper-slide stories__cont-swiper-slide">
          <div class="stories__cont-swiper-slide-img">
            <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
          </div>

        </div>
        <div class="swiper-slide stories__cont-swiper-slide">
          <div class="stories__cont-swiper-slide-img">
            <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
          </div>

        </div>
        <div class="swiper-slide stories__cont-swiper-slide">
          <div class="stories__cont-swiper-slide-img">
            <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
          </div>

        </div>
        <div class="swiper-slide stories__cont-swiper-slide">
          <div class="stories__cont-swiper-slide-img">
            <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
          </div>

        </div>
        <div class="swiper-slide stories__cont-swiper-slide">
          <div class="stories__cont-swiper-slide-img">
            <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
          </div>
        </div>
        <div class="swiper-slide stories__cont-swiper-slide">
          <div class="stories__cont-swiper-slide-img">
            <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
          </div>

        </div>
        <div class="swiper-slide stories__cont-swiper-slide">
          <div class="stories__cont-swiper-slide-img">
            <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
          </div>

        </div>
        <div class="swiper-slide stories__cont-swiper-slide">
          <div class="stories__cont-swiper-slide-img">
            <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
          </div>
        </div>
        <div class="swiper-slide stories__cont-swiper-slide">
          <div class="stories__cont-swiper-slide-img">
            <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
          </div>
        </div>
        <div class="swiper-slide stories__cont-swiper-slide">
          <div class="stories__cont-swiper-slide-img">
            <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
          </div>
        </div>
        <div class="swiper-slide stories__cont-swiper-slide">
          <div class="stories__cont-swiper-slide-img">
            <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg">
          </div>
        </div>
      </div>
      <div class="stories-swiper-pagination"></div>
      <div class="stories-swiper-button-next"></div>
      <div class="stories-swiper-button-prev"></div>
    </div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.min.js"></script>

БЛОГ НА HUSL

Запустить autoplay при клике swiper?

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