管理画面の「各種設定」より設定する
種類：carousel/left/fade/smooth/なし
Swiperのエフェクト
タイプ：type-a/type-b/なし
ナビゲーションの矢印とボタンの見せ方
効果：Ken Burns/縦/横/なし
画像の動き
キャッチコピー：文字列を入力(タグ利用可能)
設定は、管理画面の各種設定より行いますが、ここでは、すべてのSwiperの種類をみせるために、ソースに直に書き込んでいます。
carousel (タイプ：type-a、効果：Ken Burns、キャッチコピーあり)
|
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 |
<section> <div class="grid-container"> <div class="slider-wrapper slider-carousel type-b ken-burns"> <div class="swiper carousel-swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="https://lookat.co.jp/wp-content/uploads/2024/02/IMG_1918-900x600.jpeg" alt="" width="900" height="600" class="aligncenter size-large wp-image-173691" /> </div> <div class="swiper-slide"> <img src="https://lookat.co.jp/wp-content/uploads/2024/02/screenshot-900x600.jpg" alt="" width="900" height="600" class="aligncenter size-large wp-image-173692" /> </div> <div class="swiper-slide"> <img src="https://lookat.co.jp/wp-content/uploads/2024/02/sora3-900x599.jpg" alt="" width="900" height="599" class="aligncenter size-large wp-image-173693" /> </div> <div class="swiper-slide"> <img src="https://lookat.co.jp/wp-content/uploads/2023/04/raou900.jpg" alt="" width="900" height="600" class="aligncenter size-full wp-image-1987" /> </div> </div> <!-- swiper-wrapper --> <div id="swiper-control" class="grid-container"> <div class="swiper-pagination"></div> <div id="swiper-arrows"> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div><!-- swiper-arrows --> </div><!-- swiper-control --> </div> <!-- swiper-container --> </div> <!-- slider-wrapper --> <!-- grid-container --></div> </section> |
視点を
クリエイト
クリエイト
fade (タイプ：type-b、効果：横、キャッチコピーあり)
|
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 |
<section> <div class="grid-container"> <div class="slider-wrapper slider-fade type-b ken-burns"> <div class="swiper fade-swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="https://lookat.co.jp/wp-content/uploads/2024/02/IMG_1918-900x600.jpeg" alt="" width="900" height="600" class="aligncenter size-large wp-image-173691" /> </div> <div class="swiper-slide"> <img src="https://lookat.co.jp/wp-content/uploads/2024/02/screenshot-900x600.jpg" alt="" width="900" height="600" class="aligncenter size-large wp-image-173692" /> </div> <div class="swiper-slide"> <img src="https://lookat.co.jp/wp-content/uploads/2024/02/sora3-900x599.jpg" alt="" width="900" height="599" class="aligncenter size-large wp-image-173693" /> </div> <div class="swiper-slide"> <img src="https://lookat.co.jp/wp-content/uploads/2023/04/raou900.jpg" alt="" width="900" height="600" class="aligncenter size-full wp-image-1987" /> </div> </div> <!-- swiper-wrapper --> <div id="swiper-control" class="grid-container"> <div class="swiper-pagination"></div> <div id="swiper-arrows"> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div><!-- swiper-arrows --> </div><!-- swiper-control --> </div> <!-- swiper-container --> </div> <!-- slider-wrapper --> <!-- grid-container --></div> </section> |
視点を
クリエイト
クリエイト
left (タイプ：type-b、効果：縦、キャッチコピーあり)
|
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 |
<section> <div class="grid-container"> <div class="slider-wrapper slider-left type-b ken-burns"> <div class="swiper left-swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="https://lookat.co.jp/wp-content/uploads/2024/02/IMG_1918-900x600.jpeg" alt="" width="900" height="600" class="aligncenter size-large wp-image-173691" /> </div> <div class="swiper-slide"> <img src="https://lookat.co.jp/wp-content/uploads/2024/02/screenshot-900x600.jpg" alt="" width="900" height="600" class="aligncenter size-large wp-image-173692" /> </div> <div class="swiper-slide"> <img src="https://lookat.co.jp/wp-content/uploads/2024/02/sora3-900x599.jpg" alt="" width="900" height="599" class="aligncenter size-large wp-image-173693" /> </div> <div class="swiper-slide"> <img src="https://lookat.co.jp/wp-content/uploads/2023/04/raou900.jpg" alt="" width="900" height="600" class="aligncenter size-full wp-image-1987" /> </div> </div> <!-- swiper-wrapper --> <div id="swiper-control" class="grid-container"> <div class="swiper-pagination"></div> <div id="swiper-arrows"> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div><!-- swiper-arrows --> </div><!-- swiper-control --> </div> <!-- swiper-container --> </div> <!-- slider-wrapper --> <!-- grid-container --></div> </section> |
視点を
クリエイト
クリエイト
smooth (タイプ：なし、効果：なし、キャッチコピーなし)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<section> <div class="grid-container"> <div class="slider-wrapper slider-smooth type-b ken-burns"> <div class="swiper smooth-swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="https://lookat.co.jp/wp-content/uploads/2024/02/IMG_1918-900x600.jpeg" alt="" width="900" height="600" class="aligncenter size-large wp-image-173691" /> </div> <div class="swiper-slide"> <img src="https://lookat.co.jp/wp-content/uploads/2024/02/screenshot-900x600.jpg" alt="" width="900" height="600" class="aligncenter size-large wp-image-173692" /> </div> <div class="swiper-slide"> <img src="https://lookat.co.jp/wp-content/uploads/2024/02/sora3-900x599.jpg" alt="" width="900" height="599" class="aligncenter size-large wp-image-173693" /> </div> <div class="swiper-slide"> <img src="https://lookat.co.jp/wp-content/uploads/2023/04/raou900.jpg" alt="" width="900" height="600" class="aligncenter size-full wp-image-1987" /> </div> </div> <!-- swiper-wrapper --> </div> <!-- swiper-container --> </div> <!-- slider-wrapper --> <!-- grid-container --></div> </section> |