最大50%OFF!サマーセール！
今年も熱い夏が来た！
お買い得なPRICEDOWN商品を取り揃えて、SUMMER SALEを開催しています！
https://seifu-design.com/nakatax/swiper/
定型分をコピペする
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"> </head> <body> </body> </html> |
スタイルシート
head内にペーストしてね。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<style> img{width:100%; height:auto;} .swiper-slide { opacity: .3; /* 左右のスライドを薄くする */ transform: scale(.8); /* 左右のスライドを小さくする */ transition: .7s; /* ゆっくり小さくさせる */ } .swiper-slide img { height: auto; width: 100%; } .swiper-slide-active { opacity: 1; /* 中央のスライドは薄くしない */ transform: scale(1); /* 中央のスライドは小さくしない */ z-index: 1; /* 中央のスライドを一番上にする */ } </style> |
body内にペーストしてね。
|
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 |
<div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="./images/summer.jpg" alt="" /> </div> <div class="swiper-slide"> <img src="./images/sample.jpg" alt="" /> </div> <div class="swiper-slide"> <img src="./images/sample.jpg" alt="" /> </div> <div class="swiper-slide"> <img src="./images/sample.jpg" alt="" /> </div> <div class="swiper-slide"> <img src="./images/sample.jpg" alt="" /> </div> <div class="swiper-slide"> <img src="./images/sample.jpg" alt="" /> </div> </div> <!-- ページネーション --> <div class="swiper-pagination"></div> <!-- 前後の矢印 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> <p><img src="images/sale.jpg"></p> |
スクリプトも、body内に記述してね
|
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 |
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script> <script> const swiper = new Swiper(".swiper", { loop: true, // ページネーション pagination: { el: ".swiper-pagination", clickable: true, // クリック有効化 }, // 前後の矢印 navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, // スライドの表示枚数 slidesPerView: 1, breakpoints: { // スライドの表示枚数：500px以上の場合 500: { slidesPerView: 3, } }, autoplay: { // 自動再生 delay: 3000, // 1秒後に次のスライド（初期値：3000） disableOnInteraction: false, // 矢印をクリックしても自動再生を止めない }, }); </script> |
