カルーセルスライダーおすすめ7選。サイト内にスライドショーを手軽に実装

長く一つのサイトを運営していると、過去記事が最新記事に埋もれてしまい、読まれる機会も徐々に少なくなっていきます。とはいえ、仮にも一生懸命書いた記事は、読者にきちんと読んでもらいたいですよね。

そこで今回は、過去に埋もれてしまった記事をきちんと読んでもらえるようにする「カルーセルスライダー」をご紹介します。

大規模なサイト運営をされている方は、ぜひ今回の記事を読んで導入を検討してみてください。

特集コンテンツ制作に役立つ「 カルーセルスライダー 」

▲Demo:https://www.jqueryscript.net/demo/Responsive-Thumbnail-Carousel-camRoll-Slider/

「カルーセルスライダー」とは、横にスクロールするスライドギャラリーの一種で、WEBデザインにおけるスライダーの代表格のひとつです。

アコーディオンスライダーとは異なり、一枚絵の画像をスライドするものとなっており、一つひとつのコンテンツを目立たせたいときに使われます。読んでほしいコンテンツや特集コンテンツをまとめたりなど、読者の注目を集めたいときに便利です。

カルーセルスライダーの実装方法

カルーセルスライダーの実装は、おもに3つの方法があります。

• HTML/CSS/jQueryを使って自前でカルーセルスライダーを作る
• カルーセルスライダーが標準搭載されているサイトテンプレートを使う
• jQueryプラグインのようにパッケージ化されているものを使う

本記事では、jQueryプラグインのようにパッケージ化されているものを使って実装する方法をご紹介します。

導入手順は簡単。アコーディオンスライダーと同様に以下の2ステップを踏むだけ。

1. jQueryプラグインのファイルをダウンロード
2. HTMLファイルにjQuery本体とjQueryプラグインを読み込む

なお、jQueryプラグインの実装方法については以下の記事を参照してください。

サイトの顔となるスライダーを簡単実装！jQueryプラグイン7選

では、実際にどのようなカルーセルスライダーがあるのでしょうか。ここではjQueryで実装できるカルーセルスライダーを7個ご紹介します。

1. bxSlider

カルーセルスライダーの代名詞でもある『bxSlider』。カルーセルスライダーの中でもスタンダードなモデルであり、かつ初心者でも簡単に扱えるjQueryスライダーとしても知られています。カルーセルスライダーを使ったことがない方でも簡単に使えるので、初心者の方にはおすすめです。

bxSlider

2. slick

『bxSlider』と並んで使いやすいといわれている『slick』です。bxSliderとは異なり、カスタマイズ次第で複数絵を利用したスライダーの実装を可能にします。またレスポンシブデザインにも強いため、初心者の方にはもちろんスライダーをある程度使いこなせる中級者～上級者の方にもうってつけです。

slick

3. Responsive slider With Thumbnail Carousel – camRoll slider

表示させるスライドをサムネイル画像から選べるのが『Responsive slider With Thumbnail Carousel – camRoll slider』。従来のスライダーのページコントロール（スライドを選ぶボタン）では、簡素なボタンを使って実際にコンテンツを見る必要がありました。しかし『Responsive slider With Thumbnail Carousel – camRoll slider』では、スライドを見ながら表示を切り替えられるので、表示させたい部分だけを自由に見られます。

Responsive slider With Thumbnail Carousel – camRoll slider

4. Versatile Touch-enabled slider Plugin With jQuery – EasySlides

「カルーセル（回転木馬）」という言葉がもつ意味をそのまま体現したのが『Versatile Touch-enabled slider Plugin With jQuery – EasySlides』。一枚絵の画像が横スライドする通常のカルーセルスライダーとは異なり、立体的な回転も可能とするカルーセルスライダーとなっています。

Versatile Touch-enabled slider Plugin With jQuery – EasySlides

5. jQuery Waterwheel Carousel Plugin

『Versatile Touch-enabled slider Plugin With jQuery – EasySlides』同様、立体的な回転ができる『jQuery Waterwheel Carousel Plugin』。しかし『Versatile Touch-enabled slider Plugin With jQuery – EasySlides』とは異なり、シンプルなモデルのみを扱うことができるため、立体的なカルーセルスライダーをはじめて実装する方にはおすすめです。

jQuery Waterwheel Carousel Plugin

6. owl.carousel

一枚絵のカルーセルスライダーと並んで、徐々に人気が出てきているのが『owl.carousel』です。レスポンシブデザインとなっており、かつ軽量なスライダーとして知られています。

owl.carousel

7. FlexSlider2

シンプルながらもIEのバージョン対応範囲が広いのが『FlexSlider2』です。『bxSlider』や『slick』と並んで一度は触っておきたい初心者向けカルーセルスライダーです。

FlexSlider2

おわりに

今回は、カルーセルスライダーを7個ご紹介しました。インパクトを売りにあらゆるコンテンツを一気に見せるアコーディオンスライダーとは異なり、一つひとつのコンテンツをじっくり見せるカルーセルスライダーは、個人の小規模サイトから企業向け大規模サイトまで幅広いサイトで活用されています。

埋もれてしまっているコンテンツを掘り起こしたいときや、初めてサイトに訪れる読者にこそ読んでほしいコンテンツを目立たせたい時にはぜひ実装してみましょう。

こちらもおすすめ！▼