使用するオプション
スライダー画像をタイル形式に展開する
スマートフォン上の表示
パソコン上の表示
ソースコード
HTML
<hr class="mf-hr mf-col-1 mf-width-expand" style="display: none">
<section id="section1" class="mf-slider-tile-3">
<h1>GALLERY</h1>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="../_assets/images/design-components/1.jpg"></div>
<div class="swiper-slide"><img src="../_assets/images/design-components/2.jpg"></div>
<div class="swiper-slide"><img src="../_assets/images/design-components/3.jpg"></div>
<div class="swiper-slide"><img src="../_assets/images/design-components/4.jpg"></div>
<div class="swiper-slide"><img src="../_assets/images/design-components/5.jpg"></div>
<div class="swiper-slide"><img src="../_assets/images/design-components/6.jpg"></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-scrollbar"></div>
</div>
</section>
<!-- Carousel Library -->
<link rel="stylesheet" href="../_lib/swiper-4.5.0/css/swiper.min.css">
<script src="../_lib/swiper-4.5.0/js/swiper.min.js"></script>
CSS
.swiper-container {
width: 100%;
}
.swiper-slide img {
width: 100%;
}
JavaScript
var mySwiper = new Swiper('.swiper-container', {
autoplay: true,
loop: true,
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
scrollbar: {
el: '.swiper-scrollbar',
},
})
バリエーション
mf-slider-tile-6
mf-slider-tile-5
mf-slider-tile-4
mf-slider-tile-3
mf-slider-tile-2
mf-slider-tile-1
備考
- スライダーライブラリは、Slick、もしくはSwiperを使用してください。