jQuery

【jQuery】シンプルでクリーンなレスポンシブjQueryスライダ/カルーセルA simple and clean slider

July 5, 2018

A simple and clean sliderはシンプルでクリーンなレスポンシブのjQueryスライダーです。

Usage

slide-windowメインコンテナにスライドアイテムを含むことができます。

<div class="slide-window">
  <div class="slide-wrapper" style="width: 300%;">
    <!-- slide items -->
  </div>
</div>

slide-wrapperは第二のメインコンテナ。

<div class="slide-window">
  <div class="slide-wrapper" style="width: 200%;">
    <div class="slide">
      <!-- slide item 1 -->
    </div>
    <div class="slide">
      <!-- slide item 2 -->
    </div>
  </div>
</div>

slideに含めることができるスライドアイテム。slide-imageとslide-caption

<div class="slide">
  <a href="#" target="_blank">
    <div class="slide-image" style="background-image: url(img/slide1.jpg)">
    </div>
    <div class="slide-caption">
      <h2>AUTONOMY</h2>
      <p>Always keep the sun in your heart.</p>
    </div>
  </a>
</div>

MIT

Download