hugo とswiper でcarousel を作成する

はじめに

Hugo でcarousel を作る方法をまとめます。
今回は swiper というjs主体のライブラリを利用します。

実際のページはこちら

hugo swiper.js
hugo swiper.js

hugo とswiper でcarousel を作成する

今回は数枚の画像とリンクが自動スクロールする carouselを作ってみたいと思います。

swiper

swiper はMITライセンスで公開されていて carousel, slider が簡単に作成できます。
responsive 対応もできていそうです。

idangero.us

hugoから swiper を利用する

hugoからswiperを読み込みます。
今回はCDNから読み込むので partials/head.html で jsと cssを読み込んでいます。

  <!-- swiper js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
  
  <!-- swiper css -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">

次に partials/footer.html に swiperの設定を行います。
複数枚の画像が永遠自動ループする感じで設定しています。

<script>
  var swiper = new Swiper('.swiper-container', {
    spaceBetween: 0, // カルーセルの画像の間に入るスペースを削除
    loop: true, // autoplayを繰り返す(最後まで行ったら最初の画像に戻る)
    speed: 1000, // 画像の切り替わりスピード
    centeredSlides: true,
    autoplay: {
      delay: 3500,
      disableOnInteraction: false,
    },
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });
</script>

index.html から必要なSlideの数だけ <div class="swiper-slide slide1"></div> を書きます。
私は Clickで画像が遷移できるように PaginationArrows を追加しました。

<!-- event section -->
<section class="hero is-medium top-event-section">    
  <div class="swiper-container">
    <div class="swiper-wrapper">
    <div class="swiper-wrapper">
      <div class="swiper-slide slide1"></div>
      <div class="swiper-slide slide2"></div>
      <div class="swiper-slide slide3"></div>
    </div>
    </div>
    
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
</section>

css から画像を指定します。
今回もunsplashというかっこいい画像をランダムに出してくれるもので代替しています。

unsplash.com

.top-event-section {
  .swiper-container {
    width: 100%;
    height: 100%;
  }
  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #f7f7f7;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
  .slide1 {
    background-image: url("https://source.unsplash.com/random/1920x960?portrait");
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 100% auto;
    @media screen and (max-width: 1116px) {
      background-image: url("https://source.unsplash.com/random/1920x960?portrait");
      background-size: auto;
    }
  }
  .slide2 {...}
  .slide3 {...}
}

まとめ

hugo とswiper でcarousel を作成する方法をまとめました。