kayotamaoki

スライダー動作

Swiper

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

swiper-bundle.min.jsをコピー!! swiper-bundle.min.cssをコピー!! swiper-cdnなど使い方 swiper-DEMOを見る

…

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%;
}

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%;
}

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%;
}

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;
}

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;
}

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;
}

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;
}

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ページへ戻る

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

スライダー動作