Swiper.jsを実装したのだがスワイプできなくなってしまった
スマホではスワイプ、PCではドラッグができるのだがカスタムしている際にできなくなってしまった
原因はスライダーで使用されるimgタグの親divをz-indexで上に重ねてしまったため反応しなくなっていた
なぜz-indexを使用したかは忘れたのだが、とりあえず解除したら解決
https://www.takumikaki.com/html/page84.html
それとswiper.jsを最初に組み込んだ時に動かなかった
原因はスクリプトを読み込むタグとスクリプトを</body>の直前にいれていなかった
<script src="./js/wave.js"></script>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<script>
const thumb = document.querySelectorAll('.gallery02 .thumb-media');
const switchThumb = (index) => {
document.querySelector('.gallery02 .thumb-media-active').classList.remove('thumb-media-active');
thumb[index].classList.add('thumb-media-active');
}
const mySwiper = new Swiper('.gallery02 .swiper', {
effect: 'fade',
fadeEffect: {
crossFade: true,
},
speed: 500,
autoplay: {
delay: 4000,
disableOnInteraction: false,
loop: true,
loopAdditionalSlides: 1,
},
// ページネーション
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
// nextEl: '.gallery02 .swiper-button-next',
// prevEl: '.gallery02 .swiper-button-prev',
paginationClickable: true,
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
on: {
afterInit: (swiper) => {
thumb[swiper.realIndex].classList.add('thumb-media-active');
for (let i = 0; i < thumb.length; i++) {
thumb[i].onclick = () => {
swiper.slideTo(i);
};
}
},
slideChange: (swiper) => {
switchThumb(swiper.realIndex);
},
}
});
</script>
