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

カルーセルスライダー2
._carouselSlider2_ > ul._role_

サイズ、レイアウト、アニメーション効果はCSSで調整可能。
ボタンやインジケーターの設定はHTML属性で指定。
タッチデバイスでの自然なスワイプ操作を実現。
3枚以上の画像（またはコンテンツブロック）をインフィニティループ。

オプション

  • セレクタの構成
    1. 現在のスライド（中央）: li._current_
    2. 左のスライド li._l_
    3. 右のスライド li._r_
    4. スワイプ中 ul._touchmove_
  • 全体を囲うdiv要素に指定。各機能とも不要な場合は属性を削除
    1. ドットを表示: data-dots="1"
    2. ナビボタン表示: data-button="1"
    3. オートプレイ: data-auto_play="5000"（停止時間をミリ秒で指定）
  • CSSの基本調整箇所
    1. /* スライド1つの幅 */
      --item-width: 60vw;
    2. /* スライドの高さ */
      --item-height: calc(var(--item-width) * 5 / 8);
    3. /* スライダー表示領域の全体幅 */
      --slider-width: 100%;
    4. /* ナビボタンの横位置 */
      --nav_pos: 92%;

カスタマイズ例（固定サイズ・コンテンツスライダー）

  • 見る人も作る人も楽しいウェブサイトを

    2024.8.24

    身近の誰かが新しいことを始める時に、大企業ほどの予算がなくても、きちんと思いを乗せられるような、少し変わった面白い表現ができるような、身近を善くする、小粒なフレームワーク。

  • CSSだけでカスタマイズできるように

    2024.8.24

    再利用しやすさについての思想。見た目のデザイン・レイアウトはもちろん、インタラクションやアニメーション表現のカスタマイズはCSSのみで可能。

  • 煩雑さからの解放

    2024.8.24

    スマートフォン・タブレット対応。iPadではviewport設定を自動的に書き換え(JS)、PC向け画面と同一の表示に。縦位置(portrait)でのレイアウト崩れが起こらず、調整不要。

  • 開発中

カスタマイズ例（スタイリング）