スライダー動作【Vo.02】

スライダー動作

Swiper

jQueryスライダープラグインです。 headタグ内に下記2つのファイルを配置し、設定したいjsやcssでオプションや装飾の設定をします。 ・swiper-bundle.min.css ・swiper-bundle.min.js

01.Effect fade

HTMLはすべてほぼ同じです。(下記3つがあるかどうかの違い) pagination:スライド下の● navigation:両サイドの矢印 scrollbar:スライド下のスクロールバー 【パラメータ】 ・effect: ‘fade’, → スライドではなくふわっと次の画像を表示 ・crossFade: true → 下の要素が表示されないようにする ・loop: true, → 最後のスライドがきたら次に1枚目のスライドを表示 注意 ※loop: true にすると、最初と最後のスライドが複製され、 左端が最後のスライドの複製、右端が最初のスライドの複製に対応するようになり、スクロールバーの表示がずれる。 ・draggable: true, → スライドとリンク

HTML

<!-- Slider main container -->
<div class="swiper slider1">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide"><img src="img/01.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/02.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/03.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/04.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/05.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/06.jpg" alt=""></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

img {
  max-width: 100%;
}
          

js

var slider1 = new Swiper ('.slider1', {
  effect: 'fade',
  fadeEffect: {
    crossFade: true
  },
  loop: true,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  scrollbar: {
    el: '.swiper-scrollbar',
    draggable: true,
  },
});
            

02.Slides per view

【パラメータ】 ・loop: true, → 最後のスライドがきたら次に1枚目のスライドを表示 ・loopedSlides: 6, → 前後に6枚のスライドがある 注意 loopedSlidesの指定がないと6番目のスライドが1番目に表示される ・delay: 4000, → スライド間の間隔 ・disableOnInteraction: false, → 操作されても自動再生をストップしない ・slidesPerView: 3, → 一度に表示するスライドの数 ・slidesPerGroup: 2, → 同時にスライドさせるスライドの数 ・spaceBetween: 30, → スライドとの距離 ・clickable: true, → スライドとリンク

HTML

<div class="swiper slider2">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="img/01.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/02.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/03.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/04.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/05.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/06.jpg" alt=""></div>
  </div>
  <div class="swiper-pagination"></div>
</div>
            

css

img {
  max-width: 100%;
}
            

js

var slider2 = new Swiper(".slider2", {
  loop: true,
  loopedSlides: 6,
  autoplay: {
    delay: 4000,
    disableOnInteraction: false,
  },
  slidesPerView: 3,
  slidesPerGroup: 2,
  spaceBetween: 30,
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
});
            

03.Effect cube

【パラメータ】 ・effect: ‘cube’, → 前後に6枚のスライドがある ・loop: true, → 最後のスライドがきたら次に1枚目のスライドを表示 ・delay: 4000, → スライド間の間隔 ・disableOnInteraction: false, → 操作されても自動再生をストップしない ・clickable: true, → スライドとリンク

HTML

<div class="swiper slider3">
  <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="img/01.jpg" alt=""></div>
      <div class="swiper-slide"><img src="img/02.jpg" alt=""></div>
      <div class="swiper-slide"><img src="img/03.jpg" alt=""></div>
      <div class="swiper-slide"><img src="img/04.jpg" alt=""></div>
      <div class="swiper-slide"><img src="img/05.jpg" alt=""></div>
      <div class="swiper-slide"><img src="img/06.jpg" alt=""></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>
          

css

img {
  max-width: 100%;
}
          

js

var slider3 = new Swiper ('.slider3', {
  effect: 'cube',
  loop: true,
  autoplay: {
    delay: 4000,
    disableOnInteraction: false,
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});
          

04.Effect coverflow

【パラメータ】 ・effect: ‘coverflow’, → 前後のスライドを斜めに表示 ・loop: true, → 最後のスライドがきたら次に1枚目のスライドを表示 ・delay: 4000, → スライド間の間隔 ・disableOnInteraction: false, → 操作されても自動再生をストップしない ・grabCursor: true, → マウスオンしたときにカーソルが「掴む」マークになる ・centeredSlides: true, → アクティブなスライドを中央に配置する ・slidesPerView: “auto”, → スライドコンテナに何枚表示させたいか。 注意 ※autoはコンテナの幅によってフィットする。ループと共用でくずれることがある ・rotate: 50, → 前後のスライドを回転させる角度 ・stretch: 50, → スライド間のスペース 数値が大きくなると表示されるスライドが増える ・depth: 100, → 奥行 スライドは斜めに移動し、数値が大きくなると奥行が深くなる ・modifier: 1, → 効果の乗数 ・slideShadows: true, → スライドシャドウを有効にする ・clickable: true, → スライドとリンク

HTML

<div> class="swiper slider4">
  <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="img/01.jpg" alt=""></div>
      <div class="swiper-slide"><img src="img/02.jpg" alt=""></div>
      <div class="swiper-slide"><img src="img/03.jpg" alt=""></div>
      <div class="swiper-slide"><img src="img/04.jpg" alt=""></div>
      <div class="swiper-slide"><img src="img/05.jpg" alt=""></div>
      <div class="swiper-slide"><img src="img/06.jpg" alt=""></div>
  </div>
  <div> class="swiper-pagination"></div>
</div>
          

css

.slider4 .swiper-slide {
  width: 300px;
  height: 300px;
}
.slider4 .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
          

js

var slider4 = new Swiper(".slider4", {
  effect: "coverflow",
  loop: true,
  autoplay: {
    delay: 4000,
    disableOnInteraction: false,
  },
  grabCursor: true,
  centeredSlides: true,
  slidesPerView: "auto",
  coverflowEffect: {
    rotate: 50,
    stretch: 50,
    depth: 100,
    modifier: 1,
    slideShadows: true,
  },
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
});
          

05.Slides Grid

【パラメータ】 ・delay: 4000, → スライド間の間隔 ・disableOnInteraction: false, → 操作されても自動再生をストップしない ・loop: true, → 最後のスライドがきたら次に1枚目のスライドを表示 ・slidesPerView: 2, → 一度に表示するスライドの数 ・rows: 2, → スライドの列 注意 ※rowsを指定し、かつloop: true,の指定があると右にスライドしなくなる(左はスライドする)実装するならloopと同時に使わない ・loopedSlides: 6, → 前後に6枚のスライドがある 注意 ※loopedSlidesの指定がないと6番目のスライドが1番目に表示される ・spaceBetween: 30, → スライドとの距離

HTML

<div class="swiper slider5">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="img/01.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/02.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/03.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/04.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/05.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/06.jpg" alt=""></div>
  </div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>
          

css

.slider5 {
  width: 100%;
  height: 60vh;
}
.slider5 .swiper-slide {
  height: calc((100% - 30px) / 2);
}
.slider5 .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
          

js

var slider5 = new Swiper(".slider5", {
  autoplay: {
    delay: 4000,
    disableOnInteraction: false,
  },
  loop: true,
  loopedSlides: 6,
  slidesPerView: 2,
  grid: {
    rows: 2,
  },
  spaceBetween: 30,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});
          

06.Thumbs gallery loop

【パラメータ】 ・delay: 4000, → スライド間の間隔 ・loop: true, → 最後のスライドがきたら次に1枚目のスライドを表示 ・spaceBetween: 30, → スライドとの距離 ・loopedSlides: 6, → 前後に6枚のスライドがある ・slidesPerView: 6, → 一度に表示するスライドの数 ・freeMode: true, → スワイプ時の動きが強さでスクロールされる ・watchSlidesProgress: true, → 各スライドのトランジション時の進捗状況 ・centeredSlides: true, → アクティブなスライドを中央に配置する ・swiper: thumbs6 → スライドとサムネイルを連携する 注意 ※左にスライドは連携したけど、右にスライドが連携しなかった…

HTML

<div class="swiper slider6">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="img/01.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/02.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/03.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/04.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/05.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/06.jpg" alt=""></div>
  </div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>
<div thumbsSlider="" class="swiper thumbs6">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="img/01.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/02.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/03.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/04.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/05.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/06.jpg" alt=""></div>
  </div>
</div>
          

css

img {
  max-width: 100%;
}
.slider6 .swiper-button-next:after,
.slider6 .swiper-button-prev:after {
  color: #fff;
}
.thumbs6 {
  padding: 10px 0;
}
.thumbs6 .swiper-slide {
  opacity: 0.4;
}
.thumbs6 .swiper-slide-active {
  opacity: 1;
}
          

js

var thumbs6 = new Swiper('.thumbs6', {
  autoplay: {
    delay: 4000,
  },
  loop: true,
  spaceBetween: 10,
  loopedSlides: 6,
  slidesPerView: 6,
  freeMode: true,
  watchSlidesProgress: true,
});
var slider6 = new Swiper ('.slider6', {
  autoplay: {
    delay: 4000,
  },
  loop: true,
  spaceBetween: 10,
  loopedSlides: 6,
  centeredSlides : true,
  slidesPerView: 2,
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  thumbs: {
    swiper: thumbs6
  }
});
          

07.Effect cards

【パラメータ】 ・effect: “cards”, → カードの形でスライドする ・grabCursor: true, → マウスオンしたときにカーソルが「掴む」マークになる ・loop: true, → 最後のスライドがきたら次に1枚目のスライドを表示 ・delay: 4000, → スライド間の間隔 ・disableOnInteraction: false, → 操作されても自動再生をストップしない

HTML

<div class="swiper slider7">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="img/01.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/02.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/03.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/04.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/05.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/06.jpg" alt=""></div>
  </div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>
          

css

.slider7 {
  width: 240px;
  height: 320px;
}
.slider7 .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
}
.slider7 .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
          

js

var slider7 = new Swiper(".slider6", {
  effect: "cards",
  grabCursor: true,
  loop: true,
  autoplay: {
    delay: 4000,
    disableOnInteraction: false,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});
          
TOPページへ戻る