このブログを検索
2022年10月28日金曜日
2022年10月18日火曜日
2022年10月16日日曜日
2022年10月15日土曜日
2022年10月11日火曜日
2022年10月10日月曜日
スライダーSwiper.js スワイプできないと機能しないときに考えられる原因のひとつ
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>
登録:
投稿 (Atom)
注目の投稿
人気の投稿
-
まずは正規表現にかならずチェックを入れておくこと 改行は ¥n \n のどちらか スペースは単純にスペースを入力して置換には何も入力せず置換すれば削除される
