UIkitのモーダル内でSwiperを実行する。
要件
- .btn1 .btn2 .btn3 …クリック → モーダルが開く
- モーダル → UIkit の uk-modal
- Swiper → next/prev ボタン + サムネイル連動
- クリックしたボタンに対応したスライドを初期表示
- モーダルを閉じた時、Swiper をリセット
コード
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<!-- UIkit & Swiper CDN --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.23.11/dist/css/uikit.min.css"> <script src="https://cdn.jsdelivr.net/npm/uikit@3.23.11/dist/js/uikit.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/uikit@3.23.11/dist/js/uikit-icons.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script> <!-- トリガーボタン --> <button class="btn1" data-slide="0">画像1</button> <button class="btn2" data-slide="1">画像2</button> <button class="btn3" data-slide="2">画像3</button> <!-- モーダル --> <div id="modal" uk-modal=""> <div class="uk-modal-dialog uk-width-auto"> <button class="uk-modal-close-default close" type="button" uk-close=""></button> <!-- メインスライダー --> <div class="swiper main-swiper"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="https://placehold.co/600x400?text=1"></div> <div class="swiper-slide"><img src="https://placehold.co/600x400?text=2"></div> <div class="swiper-slide"><img src="https://placehold.co/600x400?text=3"></div> </div> <!-- Navigation --> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> <!-- サムネイルスライダー --> <div class="swiper thumb-swiper"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="https://placehold.co/100x60?text=1"></div> <div class="swiper-slide"><img src="https://placehold.co/100x60?text=2"></div> <div class="swiper-slide"><img src="https://placehold.co/100x60?text=3"></div> </div> </div> </div> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.swiper { width: 600px; max-width: 90vw; margin: 10px auto; } .swiper-slide img { width: 100%; display: block; } .thumb-swiper { height: 80px; box-sizing: border-box; padding: 10px 0; } .thumb-swiper .swiper-slide { width: auto; opacity: 0.4; cursor: pointer; } .thumb-swiper .swiper-slide-thumb-active { opacity: 1; border: 2px solid #0077ff; } |
JS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
let mainSwiper, thumbSwiper; function initSwipers(initialIndex) { // サムネイル thumbSwiper = new Swiper(".thumb-swiper", { spaceBetween: 10, slidesPerView: 3, watchSlidesProgress: true, }); // メインスライダー mainSwiper = new Swiper(".main-swiper", { spaceBetween: 10, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, thumbs: { swiper: thumbSwiper, }, initialSlide: initialIndex, }); } function destroySwipers() { if (mainSwiper) { mainSwiper.destroy(true, true); mainSwiper = null; } if (thumbSwiper) { thumbSwiper.destroy(true, true); thumbSwiper = null; } } // ボタンクリック → モーダル表示 ＆ Swiper初期化 document.querySelectorAll(".btn1, .btn2, .btn3").forEach((btn) => { btn.addEventListener("click", function () { const index = parseInt(this.dataset.slide, 10); UIkit.modal("#modal").show(); // 少し待ってからSwiperを初期化（DOMが表示されてから） setTimeout(() => { initSwipers(index); }, 100); }); }); // モーダルクローズ時にSwiper破棄 UIkit.util.on("#modal", "hidden", function () { destroySwipers(); }); |
coepen
See the Pen モーダルinスライダー by nerdspec (@nerdspec) on CodePen.
