https://swiperjs.com/demos#infinite-loop-with-slides-per-group
こちらを使い
<script> $(function(){ $(".blk .close").on("click", function() { $(this).prev(".blk .txt").slideToggle(); $(this).toggleClass("active"); }); }); var slider2 = new Swiper ('.slider2', { loop: true, spaceBetween: 40, slidesPerView: 3, loopAdditionalSlides: 0, paginationClickable: true, nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', speed: 1600, breakpoints: { 1040: { slidesPerView: 2 }, 540: { slidesPerView: 1 } } });
<div class="swiper-container slider2"> <div class="row swiper-wrapper"> <div class="blk swiper-slide"> <div class="num">01</div> <p class="txt">スライド1枚目</p> <div class="close"></div> </div> <div class="blk swiper-slide"> <div class="num">02</div> <p class="txt">スライド2枚目</p> <div class="close"></div> </div> <div class="blk swiper-slide"> <div class="num">03</div> <p class="txt">スライド3枚目</p> <div class="close"></div> </div> <div class="blk swiper-slide"> <div class="num">04</div> <p class="txt">スライド4枚目</p> <div class="close"></div> </div> </div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div>
上記のように実装し、動作がするのですが、例えばスライド01のアコーディオンメニューを開いたまま、スライドさせると、勝手に閉じてしまったり、また表示されたりします。
ブラウザの開発者ツールでソースをみるとスライドの数が4つ以上になっているのでスライド01のソースがもうひとつあり、そちらはアコーディオンメニューが押されてない状態なので、閉じたままになっているようです。
アコーディオンメニューを開いたまま、スライドさせることは可能でしょうか。
あなたの回答
tips
プレビュー