デザインコンポーネント - スライダーのタイル展開

使用するオプション

• mf-slider-tile-*

スライダー画像をタイル形式に展開する

ソースコード

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を使用してください。