Swiper
0
Вклад в тег
let itemGallery = document.getElementById('product-tab-gallery');
let itemGalleryImages = itemGallery.getElementsByTagName('img');
let realIndexSlider;
let itemGalleryDynamic = [];
for (let i = 0; i < itemGalleryImages.length; i++) {
const img = itemGalleryImages[i];
itemGalleryDynamic[i] = {
src: img.getAttribute('src'),
thumb: img.getAttribute('src'),
};
}let itemGalleryLight = lightGallery(itemGallery, {
dynamic: true,
autoplayFirstVideo: false,
pager: false,
galleryId: "nature",
plugins: [lgZoom, lgThumbnail, lgAutoplay, lgVideo, lgFullscreen, lgHash],
mobileSettings: {
controls: true,
showCloseIcon: true,
download: true,
rotate: false
},
dynamicEl: itemGalleryDynamic,
});let imgSlider = new Swiper('#product-tab-gallery', {
speed: 800,
spaceBetween: 30,
watchOverflow: true,
autoHeight: true,
loop: true,
});itemGallery.addEventListener('click', function (e) {
realIndexSlider = itemGallery.getElementsByClassName('swiper-slide-active');
realIndexSlider = Number(realIndexSlider[0].getAttribute('data-swiper-slide-index'));
console.log(realIndexSlider);
itemGalleryLight.openGallery(realIndexSlider);
});<div id="product-tab-gallery" class="swiper-container">
<div class="static-thumbnails swiper-wrapper">
<a data-src="img/images/choose/01.jpg" class="imageitem swiper-slide">
<img src="img/images/choose/01.jpg" />
</a>
<a data-src="img/images/choose/02.jpg" class="imageitem swiper-slide">
<img src="img/images/choose/02.jpg" />
</a>
</div>
</div>let itemGallery = document.getElementById('product-tab-gallery');
let itemGalleryImages = itemGallery.getElementsByTagName('img');
let realIndexSlider;
let itemGalleryDynamic = [];
for (let i = 0; i < itemGalleryImages.length; i++) {
const img = itemGalleryImages[i];
itemGalleryDynamic[i] = {
src: img.getAttribute('src'),
thumb: img.getAttribute('src'),
};
}
let itemGalleryLight = lightGallery(itemGallery, {
dynamic: true,
autoplayFirstVideo: false,
pager: false,
galleryId: "nature",
plugins: [lgZoom, lgThumbnail, lgAutoplay, lgVideo, lgFullscreen, lgHash],
mobileSettings: {
controls: true,
showCloseIcon: true,
download: true,
rotate: false
},
dynamicEl: itemGalleryDynamic,
});
let imgSlider = new Swiper('#product-tab-gallery', {
speed: 800,
spaceBetween: 30,
watchOverflow: true,
autoHeight: true,
loop: true,
});
itemGallery.addEventListener('click', function (e) {
realIndexSlider = itemGallery.getElementsByClassName('swiper-slide-active');
realIndexSlider = Number(realIndexSlider[0].getAttribute('data-swiper-slide-index'));
itemGalleryLight.openGallery(realIndexSlider);
});