slicksliderで無限ループしてみた

今回はslick.jsを使用して無限ループを作成してみました。

早速デモから。

See the Pen
by sayuri (@giraffeweb)
on CodePen.0

head内に以下のJSを読み込むのを忘れずに！

<!--JS--> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<!--css-->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>

ソースはいたって簡単です。

<div id="key">
<ul id="list">
  <li class="no01">No.01</li>
  <li class="no02">No.02</li>
  <li class="no03">No.03</li>
  <li class="no04">No.04</li>
  <li class="no05">No.05</li>
  <li class="no06">No.06</li>
  <li class="no07">No.07</li>
  <li class="no08">No.08</li>
</ul>
</div>

*,*:before,*:after {
  list-style: none;
  margin: 0;
  padding: 0;
  -webkit-box-sizing:border-box;
  box-sizing:border-box
}

#key {
  position: relative;
  width: 100%;
  ul {
    li {
      display: block;
      text-align: center;
      width: 200px;
      height: 100vh;
      margin: 10px;
      line-height: 100vh;
      &.no01 { background-color: #E6FFE9;}
      &.no02 { background-color: #CEF9DC;}
      &.no03 { background-color: #F3FFD8;}
      &.no04 { background-color: #D7EEFF;}
      &.no05 { background-color: #BAD3FF;}
      &.no06 { background-color: #DCC2FF;}
      &.no07 { background-color: #FFBEDA;}
      &.no08 { background-color: #FFC7AF;}
    }
  }
}

window.addEventListener("load", function() {
  $('#key ul').slick({
    autoplay: true,
    autoplaySpeed: 0,
    speed: 8000,
    cssEase: 'linear',
    arrows:false,
    swipe: false,
    pauseOnFocus: false,
    pauseOnHover: false,
    centerMode: true,
    initialSlide: 4,
    variableWidth: true, 
  });
});

上記実装いただければデモのまんまになります。
個人的には最初に少しアニメーションが欲しかったので以下のようにカスタマイズしました。
変更するのはCSSだけです。

*,*:before,*:after {
  list-style: none;
  margin: 0;
  padding: 0;
  -webkit-box-sizing:border-box;
  box-sizing:border-box
}

#key {
  position: relative;
  width: 100%;
  ul {
    li {
      display: block;
      text-align: center;
      width: 200px;
      height: 100vh;
      margin: 10px;
      line-height: 100vh;
      position: relative;
      z-index: 10;
      &:before {
        animation: img-wrap 2s cubic-bezier(.4, 0, .2, 1) forwards;
        background: #fff;
        bottom: 0;
        content: '';
        left: 0;
        pointer-events: none;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 1;
      }
      &.no01 { background-color: #E6FFE9;}
      &.no02 { background-color: #CEF9DC;}
      &.no03 { background-color: #F3FFD8;}
      &.no04 { background-color: #D7EEFF;}
      &.no05 { background-color: #BAD3FF;}
      &.no06 { background-color: #DCC2FF;}
      &.no07 { background-color: #FFBEDA;}
      &.no08 { background-color: #FFC7AF;}
    }
  }
}

@keyframes img-wrap {
  100% {
    transform: translateX(100%);
  }
}

このような形でCSSアニメーションを追加しました。

デモは以下の通りです。

読み込みなおしていただけると最初だけアニメーションがつきます。

See the Pen
by sayuri (@giraffeweb)
on CodePen.0

Share: