PC表示では3件、スマホ表示では1件のコンテンツを表示するよう実装します。

See the Pen jQuery : carousel01 – slick slider by Yurie (@kkrg) on CodePen.

準備するもの

jQuery本体の他に必要なプラグインをダウンロードしておきます。

• slick/slick.min.js
• slick/slick.css

公式サイトの「Download Now」ボタン、または「View On Github」ボタンからプラグイン本体をダウンロードします。今回は、「Download Now」ボタンからダウンロードしました。この時のフォルダ名は「slick-1.8.1 6」で、必要なファイルはすべて「slick」フォルダの中に入っていました。

実装方法

コンテンツ全体を囲むdivに、プラグイン発火用のクラスis-slickを追加しておきます。

<div class="is-slick">
    <div class="is-slick-inner">
        <h2>Title01</h2>
        <p>text.</p>
    </div>
    <div class="is-slick-inner">
        <h2>Title02</h2>
        <p>text.</p>
    </div>
    <div class="is-slick-inner">
        <h2>Title03</h2>
        <p>text.</p>
    </div>
    <div class="is-slick-inner">
        <h2>Title04</h2>
        <p>text.</p>
    </div>
    <div class="is-slick-inner">
        <h2>Title05</h2>
        <p>text.</p>
    </div>
</div>

次にjQueryを書いていきます。
このプラグインの良いところのひとつは、レスポンシブ対応がデフォルトになっている点です。PC時の設定だけではなく、スマホ時の設定も個別でできるので、余計な記述をかませなくても自由に設定を変更できます。ここでは、PC時にカルーセルを3つ、スマホ時には1つになるよう設定を行なっています。

<script>
$(function (){
    $('.is-slick').slick({
        infinite: true,
        dots: true,
        slidesToShow: 3, // 表示数
        slidesToScroll: 3, // スクロール時に動く要素の数
        centerPadding: '10px',
        responsive: [{ // スマホ時
            breakpoint: 479,
            settings: {
                infinite: true,
                dots: true,
                slidesToShow: 1,
                slidesToScroll: 1,
                adaptiveHeight: true
            }
        }]
    });
});
</script>

CSSでは特別なことをしていませんが、スマホ用に個別のCSSを付与しています。

.is-slick {
    margin-bottom: 50px;
    position: relative;
}

.slick-list {
    margin-left: -20px;
}

.slick-dots {
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
}

.slick-dots li {
    background: #fff;
    border: solid 1px #BDBDBD;
    border-radius: 50%;
    cursor: pointer;
    display: inline-block;
    margin: 0 5px;
    height: 12px;
    width: 12px;
    text-indent: -9999px;
    overflow: hidden;
    white-space: nowrap;
}

.slick-dots li.slick-active {
    background: #BDBDBD;
}

.is-slick-inner {
    background: #eee;
    border-radius: 5px;
    margin-left: 20px;
    padding: 30px;
}

.slick-arrow {
    background: transparent;
    border: none;
    border-top: solid 2px #212121;
    border-left: solid 2px #212121;
    height: 12px;
    padding: 0;
    width: 12px;
    transform: translateY(-50%) rotate(-45deg);
    text-indent: -9999px;
    overflow: hidden;
    white-space: nowrap;
    position: absolute;
    top: 50%;
    left: -25px;
}

.slick-next {
    border-left: none;
    border-right: solid 2px #212121;
    transform: translateY(-50%) rotate(45deg);
    left: auto;
    right: -25px;
}

@media screen and (max-width: 479px)  { /* sp */
    .slick-list {
        margin: 0 30px;
    }

    .is-slick-inner {
        margin: 0;
    }

    .slick-arrow {
        left: 5px;
    }

    .slick-next {
        left: auto;
        right: 5px;
    }
}

01のカルーセルをベースにして、アコーディオンの実装も合わせて行ないます。ここでのポイントは、開かれた（展開された）アコーディオンを非表示領域になった時に閉じるというところです。

See the Pen jQuery : carousel + accordion – slick slider by Yurie (@kkrg) on CodePen.

実装方法

基本的な部分は同じですが、アコーディオンのボタンis-accordion-headerとアコーディオンのコンテンツis-accordion-innerをそれぞれ追加しています。

<div class="is-slick">
    <div class="is-slick-inner">
        <h2 class="is-accordion-header">Title01</h2>
        <div class="is-accordion-inner">
            <p>text.</p>
        </div>
    </div>
    <div class="is-slick-inner">
        <h2 class="is-accordion-header">Title02</h2>
        <div class="is-accordion-inner">
            <p>text.</p>
        </div>
    </div>
    <div class="is-slick-inner">
        <h2 class="is-accordion-header">Title03</h2>
        <div class="is-accordion-inner">
            <p>text.</p>
        </div>
    </div>
    <div class="is-slick-inner">
        <h2 class="is-accordion-header">Title04</h2>
        <div class="is-accordion-inner">
            <p>text.</p>
        </div>
    </div>
    <div class="is-slick-inner">
        <h2 class="is-accordion-header">Title05</h2>
        <div class="is-accordion-inner">
            <p>text.</p>
        </div>
    </div>
</div>

さまざまなオプションが用意されていますが、今回はスライドが移動する前に発火するbeforeChangeを用いています。スライドが移動する前にアコーディオンを閉じることで、非表示領域でアコーディオンが展開されたままという状態を回避しました。

<script>
$(function (){
    // slider
    $('.is-slick').slick({
        infinite: true,
        dots: false,
        slidesToShow: 3,
        slidesToScroll: 3,
        centerPadding: '10px',
        responsive: [{
            breakpoint: 479,
            settings: {
                infinite: true,
                dots: false,
                slidesToShow: 1,
                slidesToScroll: 1
            }
        }]
    });

    // accordion
    $('.is-accordion-inner').hide(); // コンテンツをすべて閉じる
    $('.is-accordion-header').click(function () {
        $(this).next('.is-accordion-inner').slideToggle(); // コンテンツの表示非表示を制御
        $(this).toggleClass('active'); // active用クラスの追加と削除
    });

    // スライドが移動する前に発火
    $('.is-slick').on('beforeChange', function(event, slick, currentSlide, nextSlide){
        $('.is-accordion-inner').slideUp(); // アコーディオンを閉じる
        $('.is-accordion-header').removeClass('active'); // クラスactiveを削除
    });
});
</script>

CSSについては割愛します。