slick よく使う実装スライド 3選

拡大&フェード型

メインのFV画像でよく使用されている、画像が少しずつ拡大(ズーム)してフェードで画像が切り替わるスライドです。

デモ

See the Pen
jQuery Slick Slider – Fade & Zoom
by kura (@kuranopen)
on CodePen.

HTML

See the Pen
jQuery Slick Slider – Fade & Zoom
by kura (@kuranopen)
on CodePen.

主な特徴はなく、スライドを構築できるHTMLです。

CSS

.slide-animation{
    animation: fadezoom 8s 0s forwards;
}
@keyframes fadezoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}

CSSは、ズーム用のアニメーション@keyframes fadezoomとそのアニメーションを適用するクラス.slide-animationを用意します。

Javascript

var $slide = $(".slide")
  .slick({
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    speed: 2000,
    autoplaySpeed: 4000,
    autoplay: true
  })
  .on({
    beforeChange: function(event, slick, currentSlide, nextSlide) {
      $(".slick-slide", this).eq(currentSlide).addClass("preve-slide");
      $(".slick-slide", this).eq(nextSlide).addClass("slide-animation");
    },
    afterChange: function() {
      $(".preve-slide", this).removeClass("preve-slide slide-animation");
    }
  });
$slide.find(".slick-slide").eq(0).addClass("slide-animation");

Javascriptは、スライド切り替え動作前に実行するイベントと動作後に実行するイベントそれぞれにアニメーション関連の処理を加えます。

仕組みは、画像が切り替わる動作が始まった直後に次の画像のアニメーションを開始。
そして、切り替わる前の画像に後でアニメーションを停止するためのクラスを付与します。

次の画像に切り替わったら、前の画像のアニメーションを停止して、アニメーションを停止するためのクラスを削除します。

ただこれだけだと、ページを開いたときに1枚目の画像にアニメーションがないため、最後のコードでアニメーションを開始します。

サムネイル型 (縦)

See the Pen
jQuery slick – vertical slide
by kura (@kuranopen)
on CodePen.

HTML

<div class="slide-box">
  <ul class="slide">
    <li class="item">
      <a href="#"><img src="https://picsum.photos/id/301/1024/768" alt=""/></a>
    </li>
    <li class="item">
      <a href="#"><img src="https://picsum.photos/id/302/1024/768" alt=""/></a>
    </li>
    <li class="item">
      <a href="#"><img src="https://picsum.photos/id/309/1024/768" alt=""/></a>
    </li>
    <li class="item">
      <a href="#"><img src="https://picsum.photos/id/304/1024/768" alt=""/></a>
    </li>
    <li class="item">
      <a href="#"><img src="https://picsum.photos/id/305/1024/768" alt=""/></a>
    </li>
  </ul>
  <div class="slide-navigation">
    <div class="item">
      <figure class="image">
        <img src="https://picsum.photos/id/301/1024/768" />
      </figure>
    </div>
    <div class="item">
      <figure class="image">
        <img src="https://picsum.photos/id/302/1024/768" />
      </figure>
    </div>
    <div class="item">
      <figure class="image">
        <img src="https://picsum.photos/id/309/1024/768" />
      </figure>
    </div>
    <div class="item">
      <figure class="image">
        <img src="https://picsum.photos/id/304/1024/768" />
      </figure>
    </div>
    <div class="item">
      <figure class="image">
        <img src="https://picsum.photos/id/305/1024/768" />
      </figure>
    </div>
  </div>
</div>

CSS

body {
  margin: 0;
  padding: 0;
}

/* slide-box */

.slide-box {
  position: relative;
  display: flex;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

/* slide */

.slide {
  position: relative;
  width: 65%;
  margin: 0;
  padding: 0;
}
.slide .item {
  position: relative;
  height: 100%;
}
.slide .item a {
  display: block;
}
.slide .item::before {
  display: block;
  padding-top: 39%;
  content: "";
}
.slide .item .image {
  position: relative;
  overflow: hidden;
}
.slide .item img {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: 100%;
}
.slide > .slick-list,
.slide > .slick-list > .slick-track,
.slide > .slick-list > .slick-track > .slick-slide > div {
  position: relative;
  height: 100%;
}

@media screen and (max-width: 767px) {
  .slide {
    width: 100%;
  }
}

/* slide-navigation */

.slide-navigation {
  line-height: 0;
  position: relative;
  width: 35%;
  margin: 0;
  padding: 0;
}
.slide-navigation .item {
  position: relative;
  cursor: pointer;
}
.slide-navigation .item .image {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.slide-navigation .item .image::before {
  display: block;
  padding-top: 25%;
  content: "";
}
.slide-navigation .item .image::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  opacity: 0.5;
  background: #000;
}
.slide-navigation .slick-current .image::after {
  opacity: 0;
}
.slide-navigation .item .image {
  position: relative;
  overflow: hidden;
}
.slide-navigation .item .image img {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: 100%;
}

@media screen and (max-width: 767px) {
  .slide-navigation {
    width: 100%;
  }
  .slide-navigation .item .image::before {
    padding-top: 50%;
  }
}

/* slick */

.slick-vertical .slick-slide {
  border: 0 solid transparent;
}
.slick-arrow {
  z-index: 999;
}
.slick-prev {
  top: 25px;
  bottom: auto;
  left: 0;
  right: 0;
  margin: auto;
}
.slick-prev:before {
  content: "↑";
}
.slick-next {
  top: auto;
  bottom: 5px;
  left: 0;
  right: 0;
  margin: auto;
}
.slick-next:before {
  content: "↓";
}

@media screen and (max-width: 767px) {
  .slick-prev {
    top: 20px;
    bottom: 0;
    right: auto;
    left: 20px;
  }
  .slick-prev:before {
    content: "←";
  }
  .slick-next {
    top: 20px;
    bottom: 0;
    right: 20px;
    left: auto;
  }
  .slick-next:before {
    content: "→";
  }
}

Javascript

$(function() {
  var slide_main = $(".slide").slick({
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    asNavFor: ".slide-navigation"
  });
  var slide_sub = $(".slide-navigation").slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 4000,
    speed: 400,
    asNavFor: ".slide",
    focusOnSelect: true,
    vertical: true,
    verticalSwiping: true,
    responsive: [
      {
        breakpoint: 768,
        settings: {
          centerMode: true,
          vertical: false,
          verticalSwiping: false,
          slidesToShow: 3,
          adaptiveHeight: true
        }
      }
    ]
  });
  var open_window_Width = $(window).width();
  $(window).resize(function() {
    var width = $(window).width();
    if (open_window_Width != width) {
      slide_main.slick("setPosition");
      slide_sub.slick("setPosition");
    }
  });
});

サムネイル連動型 (横)

See the Pen
slick (horizontal)
by kura (@kuranopen)
on CodePen.

HTML

See the Pen
slick (horizontal)
by kura (@kuranopen)
on CodePen.

CSS

See the Pen
slick (horizontal)
by kura (@kuranopen)
on CodePen.

Javascript

See the Pen
slick (horizontal)
by kura (@kuranopen)
on CodePen.

  • このエントリーをはてなブックマークに追加

【続き】 未分類の便利な使い方