パーツ > カルーセルスライダー

カルーセルスライダー
._carouselSlider_ > ul._screen_

左右領域（前・後スライド部分）の幅は ._carouselSlider_ の左右パディングで設定します。

  • 7. ドットのインジケーターを表示するには div._carouselSlider_要素に data-slide_dots="1" 属性値を加えます。値を2にするとドットによるナビゲーションが有効化されます
  • 8. PCでご覧の方は試しにウインドウ幅を縮めてみてください。表示枠の縦横比にくらべ画像が横長となった場合、上下に背景色が露われます。逆に言うと画像が常に表示枠より縦長であれば、背景は露われません。また背景色は透明にすることも可能です
  • 1. 枚数の多い画像を、順番に見せるのに適したパーツです。スマートフォンのスワイプ操作（左右）に対応しています
  • 2. 画像は左右が表示枠に吸着するように拡大され全面表示となります。この例のように縦長画像の全体を表示したい場合はimg要素にclass="fit_height"を追記します
  • 3. 現在の画像にリンクを貼ることができます（クリックでリンク先へジャンプ）
  • 4. キャプションの位置やデザインはCSSでカスタマイズできます（セレクタは ._carouselSlider_ ._caption_）
  • 5. data-figcaption 属性値が無い場合、キャプションは非表示となります（次のスライドを参照）

全幅領域に配置、オートプレイ

  • オートプレイは div._carouselSlider_要素の data-auto_play="" 属性値に待機時間をミリ秒で記します
  • トランジションはCSSでカスタマイズできます。