Q&A
質問文のコードだけで問題が再現しますか? id=mypic の要素が見当たりませんが。
矢印ボタンを押したあと、ブラウザの開発者ツールのコンソールに何かエラーは出ていますか?
矢印ボタン付きの画像のスライドショーを作成していますが、スライドショーの画像の左右にある矢印ボタンをクリックすると、前後の画像を表示させることが出来るのですが、矢印ボタンを１度でもクリックすると、何もしてない時に自動で画像が切り替わるスライドショーの効果がなくなってしまうのですが、なぜでしょうか？
スライドショーはswiperを使っています。矢印ボタンをクリックした時のスライドショーの動作は問題ありません。しかし、矢印ボタンを一度でもクリックすると、javasprict①の部分が発動しなくなってしまいます。
回答よろしくお願いいたします。
html
1<body> 2 <!-- Slider main container --> 3<div class="swiper"> 4 <!-- Additional required wrapper --> 5 <div class="swiper-wrapper"> 6 <!-- Slides --> 7 <div class="swiper-slide" id="maypic> 8 <img src="http://placehold.jp/640x360.png?text=slide1" alt=""> 9 </div> 10 <div class="swiper-slide"> 11 <img src="http://placehold.jp/640x360.png?text=slide2" alt=""> 12 </div> 13 </div> 14 <!-- If we need pagination --> 15 <div class="swiper-pagination"></div> 16 17 <!-- If we need navigation buttons --> 18 <div class="swiper-button-prev"></div> 19 <div class="swiper-button-next"></div> 20 </div> 21 <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script> 22 <script> 23 const swiper = new Swiper('.swiper', { 24 loop: true, //ループ表示 25 pagination: { 26 el: '.swiper-pagination', //ページネーションを表示する要素 27 }, 28 navigation: { 29 nextEl: '.swiper-button-next', //次へボタンを表示する要素 30 prevEl: '.swiper-button-prev', //前へボタンを表示する要素 31 }, 32 autoplay: { 33 speed: 650 //自動再生のスピード 34 }, 35 breakpoints: { 36 // when window width is >= 320px 37 1600: { 38 slidesPerView: 3, 39 spaceBetween: 20 40 }, 41 } 42 }); 43 </script> 44 45 46 47<script> 48 // 何もしていない時に自動でスライドショーさせる① 49const pics_src = ["http://placehold.jp/640x360.png?text=slide1","http://placehold.jp/640x360.png?text=slide2"]; 50let num = -1; 51 52 53function slideshow_timer(){ 54 if (num === 2){ 55 num = 0; 56 } 57 else { 58 num ++; 59 } 60 document.getElementById("mypic").src = pics_src[num]; 61} 62 63setInterval(slideshow_timer, 1000); 64 65</script> 66</body>
すみません。<div class="swiper-slide"nの部分にid="maypicを追加しました。上記のコードで再現できます。エラーなどは出ていません。
<div> に src というプロパティはないので、今のコードでは再現できないはずです。
回答1件
0
ベストアンサー
当方で問題を再現できていませんが、まあおそらく Swiper が要素を作り直していて id=mypic が無くなってしまうのでしょう。
id を付けるのはあきらめて、DOM の構造から対象を見つけてはいかがでしょうか。
例:
js
1 document.querySelector('.swiper-slide img').src = pics_src[num];
投稿2023/04/18 07:20
総合スコア21929
ありがとうございます。そうなのですね。調べてみたのですが、swiper.jsだとautoplay効かないようですね。
autoplayの部分に以下を記述したら、
autoplay: {
disableOnInteraction: false
},
きちんとと起動しました。
あなたの回答
tips
プレビュー
