Пробовал удалять классы при открытии. Сколько чего не пересмотрел. Не силен в java, но нагоним постепенно. Происходит дубль изображений и из-за этого ломается анимация самого слайдера при закрытии. Играться с фокусами пробовал. Нужно решение именно удаления дубликатов изображений из модального окна.
В идеале чтоб autoplay на swiper тоже отключался при открытии модального окна. А то нашел только как сделать просто отключение при наведении и наоборот. Поэтому просто отключил один раз, чтоб при открытии модала оно не крутилось.
Буду очень признателен за помощь уже 3 сутки сижу.
<div class="swiper-container mySwiper bounceIn wow">
<div class="swiper-wrapper">
<a class="swiper-slide" data-fancybox="gallery" data-caption="My caption1" href="img/project/1.jpg"><img class="simple-gallery__img" src="img/project/1.jpg" alt="" /></a>
<a class="swiper-slide" data-fancybox="gallery" data-caption="My caption2" href="img/project/2.jpg"><img class="simple-gallery__img" src="img/project/2.jpg" alt="" /></a>
<a class="swiper-slide" data-fancybox="gallery" data-caption="My caption3" href="img/project/3.jpg"><img class="simple-gallery__img" src="img/project/3.jpg" alt="" /></a>
<a class="swiper-slide" data-fancybox="gallery" data-caption="My caption4" href="img/project/4.jpg"><img class="simple-gallery__img" src="img/project/4.jpg" alt="" /></a>
<a class="swiper-slide" data-fancybox="gallery" data-caption="My caption5" href="img/project/5.jpg"><img class="simple-gallery__img" src="img/project/5.jpg" alt="" /></a>
<a class="swiper-slide" data-fancybox="gallery" data-caption="My caption6" href="img/project/6.jpg"><img class="simple-gallery__img" src="img/project/6.jpg" alt="" /></a>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
$(document).ready(function() {
const swiperGallery = new Swiper(".mySwiper", {
effect: "coverflow",
grab: true,
speed: 1000,
centeredSlides: true,
slideToClickedSlide: true,
slidesPerView: 3,
autoplay: {
delay: 2000,
disableOnInteraction: true,
},
loop: true,
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 180,
modifier: 1,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
on: {
init() {
this.el.addEventListener('mouseenter', () => {
this.autoplay.stop();
});
}
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
$('[data-fancybox="gallery"]').fancybox({
loop: true,
autoFocus: false,
infobar: false,
buttons: [
"close"
],
hideScrollbar: true,
clickContent: false,
transitionEffect: "circular",
thumbs: {
autoStart: true,
autoFocus: false,
trapFocus: true,
backFocus: false,
hideScrollbar: true,
hideOnClose: true,
trapFocus: true,
parentEl: ".fancybox-container",
axis: "x",
},
wheel:false,
});
$().fancybox({
selector : '.swiper-wrapper .swiper-slide:not(.swiper-cloned)',
backFocus : false
});
});
