kayotamaoki

スライダー動作

Slick

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

slick上記3つのファイルをクリックしファイルをコピー!! slick-DEMOを見る

slick Vo.01

jsのslick()の括弧内に何も記述していないので一番シンプルな実装です。前へと次へのアイコンをcssで指定しています。 slick-next:beforeとslick-prev:beforeは初期色が白指定なのでcssの設定が必要です。検証ツールで確認し必要な指定をします。

HTML

              <ul class="slick01">
  <li><img src="img/01.jpg" alt=""></li>
  <li><img src="img/02.jpg" alt=""></li>
  <li><img src="img/03.jpg" alt=""></li>
  <li><img src="img/04.jpg" alt=""></li>
  <li><img src="img/05.jpg" alt=""></li>
  <li><img src="img/06.jpg" alt=""></li>
</ul>

css

              .slick01 .slick-next:before,
.slick01 .slick-prev:before {
  color: #333;
}
img {
  max-width: 100%;
}

              $('.slick01').slick();

slick Vo.02

cssのクラスslick-slideは検証ツールで確認できます。 slickのプラグインでふられたクラスです。 slick-slideの指定がない場合は3つの画像がぴったりくっついた表示になります。 jsで下記設定をしています。 autoplay: true,　　→　　自動再生 infinite: true,　　→　　スライドのループを有効 slidesToShow: 3,　　→　　3つ表示 slidesToScroll: 3　　→　　3つずつスライド

HTML

              <ul class="slick02">
                <li><img src="img/01.jpg" alt=""></li>
                <li><img src="img/02.jpg" alt=""></li>
                <li><img src="img/03.jpg" alt=""></li>
                <li><img src="img/04.jpg" alt=""></li>
                <li><img src="img/05.jpg" alt=""></li>
                <li><img src="img/06.jpg" alt=""></li>
              </ul>

css

              .slick02 .slick-slide {
  margin: 0 10px;
}
img {
  max-width: 100%;
}

              $('.slick02').slick({
  autoplay: true,
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 3
});

slick Vo.03

jsで下記設定をしています。 autoplay: true,　　→　　自動再生 autoplaySpeed:1000,　　→　　1秒ごとにスライド dots: true,　　→　　画像下のドットを表示する。※3番目のドットをクリックすれば3番目の画像を表示 centerMode: true,　　→　　真ん中に指定の画像が表示され、前後のスライドが見えるようにする。 centerPadding: ’60px’,　　→　　両サイドに60px文の画像が見える slidesToShow: 5,　　→　　5つ表示またresponsiveで下記設定をしています。画面幅480までスライドする画像　　→　　1 画面幅768までスライドする画像　　→　　3 その他スライドする画像　　→　　5 ※jsで画像の表示枚数など設定するのでcssは画像のみにしか設定をしていません。

HTML

              <ul class="slick03">
  <li><img src="img/01.jpg" alt=""></li>
  <li><img src="img/02.jpg" alt=""></li>
  <li><img src="img/03.jpg" alt=""></li>
  <li><img src="img/04.jpg" alt=""></li>
  <li><img src="img/05.jpg" alt=""></li>
  <li><img src="img/06.jpg" alt=""></li>
</ul>

css

              img {
  max-width: 100%;
}

              $('.slick03').slick({
  autoplay: true,
  autoplaySpeed:1000,
  dots: true,
  centerMode: true,
  centerPadding: '60px',
  slidesToShow: 5,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 3
      }
    },
    {
      breakpoint: 480,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 1
      }
    }
  ]
});

slick Vo.04

上の画像と下のサムネイル画像をリンクさせています。サムネイルをクリックするとクリックされた画像が上に表示されます。 jsで下記設定をしています。 ☆上の画像 autoplay: true,　　→　　自動再生 fade: true,　　→　　スライドではなくフェイドイン arrows: false,　　→　　両サイドの矢印の表示なし ☆サムネイル画像 asNavFor:’.slick04′,　　→　　slick04とリンクさせる focusOnSelect: true,　　→　　クリックでのスライド切り替えを有効にする slidesToShow:6,　　→　　6つ表示またresponsiveで下記設定をしています。 ☆画面幅768までのサムネイル画像 autoplay: true,　　→　　自動再生 slidesToScroll: 3,　　→　　3つずつスライド slidesToShow: 3　　→　　3つ表示 ※jsで画像の表示枚数など設定するのでcssは画像のみにしか設定をしていません。

HTML

              <ul class="slick04">
  <li><img src="img/01.jpg" alt=""></li>
  <li><img src="img/02.jpg" alt=""></li>
  <li><img src="img/03.jpg" alt=""></li>
  <li><img src="img/04.jpg" alt=""></li>
  <li><img src="img/05.jpg" alt=""></li>
  <li><img src="img/06.jpg" alt=""></li>
</ul>
<ul class="thumb04">
  <li><img src="img/01.jpg" alt=""></li>
  <li><img src="img/02.jpg" alt=""></li>
  <li><img src="img/03.jpg" alt=""></li>
  <li><img src="img/04.jpg" alt=""></li>
  <li><img src="img/05.jpg" alt=""></li>
  <li><img src="img/06.jpg" alt=""></li>
</ul>

css

              .slick04 {
  margin-bottom: 10px;
}
img {
  max-width: 100%;
}

              $('.slick04').slick({
  autoplay: true,
  fade: true,
  arrows: false,
});
$('.thumb04').slick({
  asNavFor:'.slick04',
  focusOnSelect: true,
  slidesToShow:6,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        autoplay: true,
        slidesToScroll: 3,
        slidesToShow: 3
      }
    }
  ]
});

slick Vo.05応用：画像遅延　+　文字のフェードイン

slick Vo.05 01.jpg
slick Vo.05 02.jpg
slick Vo.05 03.jpg
slick Vo.05 04.jpg
slick Vo.05 05.jpg
slick Vo.05 06.jpg

画像のファイルサイズが大きい場合、最初に崩れた表示になってしまうので、少し遅れて正常に表示されるようにします。画像の「src」属性の変わりに「data-lazy」属性に画像のパスを設定します。「src」属性は01〜06.jpgまで全て読み込みますが、「data-lazy」属性は遅延読み込みをし、スライドするタイミングで01.jpgのみ読み込みます。 slickは各画像を.slick-slideクラスで囲み、表示のタイミングで.slick-activeがつき、 slick-slideクラスにslick-activeクラスがついたらopacity: 1;にするという指定がデフォルトでされています。また、slick-slideクラスにtransition: opacity 500ms ease 0s;がついているので、 transition: opacity 1s ease-in 1s!important;に変更し、opacityの切り替えと画像の遅れて読み込みを分かりやすくしました。テキストをvo05wrapクラスでラップし、opacity: 0;とtransform: translateY(100%);で非表示に。 vo05wrapクラスにonクラスがついたらopacity: 1;とtransform: translateY(0);で下から表示されるようにしました。 jsの9行目：beforeChangeでスライドが移動する前にonクラスを削除し、 jsの12行目：afterChangeでスライドが移動したらonクラスを付与します。 ※jsの1行目：initの最初の初期段階でもonクラスを付与するようにします。

HTML

              ul class="slick05">
  <li>
    <img data-lazy="img/01.jpg" alt="">
    <div class="vo05wrap">
      <p>slick Vo.05<br>01.jpg</p>
    </div>
  </li>
  <li>
    <img data-lazy="img/02.jpg" alt="">
    <div class="vo05wrap">
      <p>slick Vo.05<br>02.jpg</p>
    </div>
  </li>
  <li>
    <img data-lazy="img/03.jpg" alt="">
    <div class="vo05wrap">
      <p>slick Vo.05<br>03.jpg</p>
    </div>
  </li>
  <li>
    <img data-lazy="img/04.jpg" alt="">
    <div class="vo05wrap">
      <p>slick Vo.05<br>04.jpg</p>
    </div>
  </li>
  <li>
    <img data-lazy="img/05.jpg" alt="">
    <div class="vo05wrap">
      <p>slick Vo.05<br>05.jpg</p>
    </div>
  </li>
  <li>
    <img data-lazy="img/06.jpg" alt="">
    <div class="vo05wrap">
      <p>slick Vo.05<br>06.jpg</p>
    </div>
  </li>
</ul>

css

              .slick05 li {
  position: relative;
}
.slick05 .slick-slide {
  transition: opacity 1s ease-in 1s !important;
}
.slick05 .vo05wrap {
  opacity: 0;
  transform: translateY(-100%);
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-weight: bold;
  font-size: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slick05 .vo05wrap.on {
  opacity: 1;
  transform: translateY(0);
  transition: .6s ease-in 1s;
}
img {
  max-width: 100%;
}

              $('.slick05').on('init',function(){
  $('.vo05wrap').addClass('on');
});
$('.slick05').slick({
  autoplay: true,
  fade: true,
  arrows: false
});
$('.slick05').on('beforeChange',function(){
  $('.vo05wrap').removeClass('on');
});
$('.slick05').on('afterChange',function(){
    $('.vo05wrap').addClass('on');
});

TOPページへ戻る

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

スライダー動作