Swiper.js によるスライドショーのCubeアニメーション編になります。
effect: の箇所をcubeと書き換えるだけでOKです。
※前提条件としてSwiper.jsのCDNをcss・JSの両方読み込んでおいてください。
▼ HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!-- Swiper START --> <div class="swiper-container"> <!-- メイン表示部分 --> <div class="swiper-wrapper"> <!-- 各スライド --> <div class="swiper-slide"><img src="https://web-technology.work/wp/wp-content/uploads/2020/08/slide_1.jpg" alt="" width="100%" class="alignnone size-full wp-image-112" /></div> <div class="swiper-slide"><img src="https://web-technology.work/wp/wp-content/uploads/2020/08/slide_2.jpg" alt="" width="100%" class="alignnone size-full wp-image-113" /></div> <div class="swiper-slide"><img src="https://web-technology.work/wp/wp-content/uploads/2020/08/slide_3.jpg" alt="" width="100%" class="alignnone size-full wp-image-114" /></div> </div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> <!-- Swiper END --> |
▼ JS
|
1 2 3 4 5 6 7 8 9 10 |
<!-- JS発動スクリプト --> <script> var mySwiper = new Swiper ('.swiper-container', { effect: "cube", loop: true, pagination: '.swiper-pagination', nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', }) </script> |
実装デモ
