ポータルサイトのスペース有効活用に最適なカルーセルプラグイン : ポータルサイトブログ

2020/12/23

記事コンテンツが命のポータルサイトですが、トップページに最新記事を掲載する場合、スペースの関係で表示数を限定するケースが多いと思います。
4～8件くらい（サムネイル付きの場合）で収まるようにデザインの段階で調整する事が多いのですが、もうちょっと欲張って表示したい場合はカルーセルが便利です。

カルーセルとは

「カルーセル」とはメリーゴーラウンドという意味で、WEBサイトおいてはコンテンツを左右にスライドさせながら表示するプログラムの事を指します。
トップページの最上部に設置されるケースがほとんどです。

定番のSlick

jQueryのプラグインで定番化しているSlick。オプションが充実しているのでカルーセルを利用する場合はまずこちらを真っ先に候補にあげます。弊社トップページの「実績」はこちらのプラグインを利用中です。
1記事づつスライドさせる場合には必ず使います。

ポータルサイトカルーセルプラグイン — https://kenwheeler.github.io/slick/

リッチに見せたい場合はEndlessRiver

こちらは名前通り川のように記事が流れていくプラグインです。強制的にスライドしていくのでユーザービリティとしては若干難があるものの、スムーズな動きが特徴的なのでサイトをリッチに見せたい場合はおすすめです。

ちなみにこちらは設置が極めて簡単でオプションも少ないのでハードルが低い点も評価できます。

■ヘッダー内の記述

<html>
    <head>
        <script type="text/javascript" src="/js/endless-river.min.js"></script>
        <link type="text/css" rel="stylesheet" href="/css/endless-river.min.css" />
    </head>
</html>
//Javascript・cssのフォルダおよびパスは任意で調整

■javascript(jQuery)の記述

$(document).ready(function(){
    $("#Carousel").endlessRiver();
});

//オプションをつける場合
$(document).ready(function(){
    $("#Carousel").endlessRiver({
        speed: 40,//スピードを調整※初期値100
        buttons: false,//ボタン（戻る・進む）の有無※初期値true
        pause: false//ストップおよび再生の有無※初期値true
    });
});

■htmlの記述

<ul id="Carousel">
    <li><img src="※※※※※"></li>
    <li><img src="※※※※※"></li>
    <li><img src="※※※※※"></li>
    <li><img src="※※※※※"></li>
    <li><img src="※※※※※"></li>
    <li><img src="※※※※※"></li>
</ul>

まとめ

サイトの要素・記事が多い場合、スペースの調整が難しくなってしまいます。
カルーセルを利用し、すっきりとまとまったポータルサイトを目指したいですね。