slider

スライドショーを表示する。

slider-longtext

タイトル・概要が長いコンテンツに対応する。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ

何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。

ボタン

<div style="min-width: 300px; max-width: 1200px;">

<div class="slider slider-01 slider-longtext" id="slider-001">
    <div class="slider-item">

        <div class="slider-cover" style="background-image: url(/themes/zeroichi_lp/images/_dummy/image_01.jpg);"></div>

        <div class="slider-box">
            <div class="slider-contents">
                <p class="slider-title">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ</p>
                <p class="slider-text">何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。</p>
                <p class="slider-link"><a href="#" class="btn btn-second">ボタン</a></p>
            </div>
        </div>

    </div>
</div>

</div>

slider-01

常にCSSかJSで高さを調整するタイプのスライドショーを表示する。
画像はbackground-imageとしてインラインスタイルで指定するため、意図しないトリミングが発生する可能性がある。

スライド一枚目

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

ボタン

スライド二枚目

スライド全体がリンクとなっています

スライド三枚目

<div style="min-width: 300px; max-width: 1200px;">

<div class="slider slider-01" id="slider-002">
    <div class="slider-item">

        <div class="slider-cover" style="background-image: url(/themes/zeroichi_lp/images/_dummy/image_01.jpg);"></div>

        <div class="slider-box">
            <div class="slider-contents">
                <p class="slider-title">スライド一枚目</p>
                <p class="slider-text">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</p>
                <p class="slider-link"><a href="#" class="btn btn-first">ボタン</a></p>
            </div>
        </div>

    </div>

    <div class="slider-item">
        <a href="#" class="slider-inner">

            <div class="slider-cover" style="background-image: url(/themes/zeroichi_lp/images/_dummy/image_02.jpg);"></div>

            <div class="slider-box">
                <div class="slider-contents">
                    <p class="slider-title">スライド二枚目</p>
                    <p class="slider-text">スライド全体がリンクとなっています</p>
                </div>
            </div>

        </a>
    </div>

    <div class="slider-item">

        <div class="slider-cover" style="background-image: url(/themes/zeroichi_lp/images/_dummy/image_03.jpg);"></div>

        <div class="slider-box">
            <div class="slider-contents">
                <p class="slider-title">スライド三枚目</p>
            </div>
        </div>

    </div>
</div>

</div>

<script>
    $('#slider-002').slick({
        infinite: true,
        autoplay: true,
        fade: true,
        speed: 1500,
        autoplaySpeed: 5000,
        pauseOnHover: false,
        arrows: false,
        dots: true
    });
</script>

slider-02

画像の縦横比に追随するタイプのスライドショーを表示する。
画像はimg要素として指定するため、デバイスによって高さが変動する。レスポンシブイメージを推薦。