7.5から続きます

ヒーロースライダーを作成する

作成するもの

こちらでSwiperを利用する(今回はswiper.min.jsを利用)

https://swiperjs.com/get-started

導入方法

HTMLに記述を追加することと下をコピー&ペースト

<!-- Slider main container -->
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

CSSにこれも追加すること

.swiper {
  width: 600px;
  height: 300px;
}

SCSSの記述

@import "mixin";

  $cWhite: white;

@import 'hero-slider';

main.jsの記述

document.addEventListener('DOMContentLoaded', function () {
// newでインスタンス化
  const hero = new HeroSlider('.swiper-container');
  hero.start();
});

HTMLの記述

続きを読む →