JavaScript

レスポンシブでカスタマイズ性に優れたカルーセルを実装できるjQueryプラグイン「slick」

slickというjQueryプラグインを使えば、レスポンシブでカスタマイズ性に優れたカルーセルを実装することができます。左右の前後移動する矢印や下部ナビゲーションも兼ね備えているので、とても実用的なカルーセルですね。実際のデモを触ってみましたが、すごく使いやすかったです。

[ads_center]

slickの使い方

slickの使い方はとてもシンプルで、これといって特に難しい設定もなさそうです。

$('.single-item').slick();

slick

slick

こんな感じで1つずつスライドさせていったり、複数の要素を指定した数だけスライドさせたりとオプション設定をすることで様々なカスタマイズが可能となります。

レスポンシブなカルーセルを実装したい時に役立つプラグインですね。

関連記事

  1. TwentyTwenty

    JavaScript

    2枚の画像を見比べれるjQueryプラグイン「TwentyTwenty」

    TwentyTwentyは2枚の画像を見比べれる便利なjQueryプラ…

  2. no-image

    JavaScript

    レスポンシブ対応の超軽量なjQueryイメージスライダー「tinyslide」

    tinyslideはレスポンシブに対応した超軽量なイメージスライダーを…

  3. Drift

    JavaScript

    画像にホバーして拡大できる軽量のスクリプト「Drift」

    Driftは画像にホバーした部分を拡大できるシンプルで軽量なスクリプト…

  4. Owl Carousel 2

    JavaScript

    美しいレスポンシブなカルーセルスライダーを実装できる「Owl Carousel 2」

    Owl Carousel 2は、美しいレスポンシブなカルーセルスライダ…

  5. Stackbox.js

    JavaScript

    プルプル震えるモーダルボックスを実装できるjQueryプラグイン「Stackbox.js」

    Stackbox.jsというjQueryプラグインを使えば、プルプル震…

  6. no-image

    JavaScript

    シンプルでベーシックなJavaScriptによるlightbox実装「halkaBox.js」

    halkaBox.jsは、シンプルでベーシックなJavaScriptに…

最近の記事

  1. 田沢湖
  2. ハクバ シリコンクロス
  3. トライポッドスリーブ
  4. レンズペン3 ミニプロとレンズペン ELITE マイクロプロ

Instagram始めました

Facebookページ

PAGE TOP