0

У меня есть слайдеры, при клике на один из них появляется модальное окно со слайдером. Подскажите пожалуйста как сделать так, что-бы при открытии модального окна запускался 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>

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Посмотрите другие вопросы с метками или задайте свой вопрос.