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