News

スライドショーを設置する

  • 勉強ノート

See the Pen スライドショー by MkEk (@MkEk) on CodePen.

CDNを用意する

css用のCDNを２つ
js用のCDNを２つ

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

HTML

画像を複数用意する。リストでもいいと思うけど、今回はdivで囲むだけ

<div class="slider">   
    <div><img src="https://dl.dropbox.com/scl/fi/y5vurdalsuf1ub12g7cyj/img-a.jpg?rlkey=oxt1gm5r799qf59pj0yxhkryo&dl=0"></div>
    <div><img src="https://dl.dropbox.com/scl/fi/7mmuxxgqxav4jd12ooq5z/img-b.jpg?rlkey=09jim013yw1ezgiuz8qtvqhkd&dl=0"></div>   
    <div><img src="https://dl.dropbox.com/scl/fi/s0zix8m4fdxh1a2kbheqj/img-c.jpg?rlkey=jrh4tfyzoj0iwyw5h3x0y1r3c&dl=0)"></div>
</div>

CSS

今回は標準のスライドショーなので、ただ画像の大きさを調整するのみ

    .slider{
        width:50%;
        margin:0 auto;
    }
    .slider img{
        width:100%;
    }
    .slider .slick-slide{
        height:auto!important;
    }
    .slider .slick-arrow{
        z-index:2!important;
    }
    .slider .slick-next{
        right:0!important;
    }
    .slider .slick-prev{
        left:0!important;
    }

js

jsも今回はプレーンな状態

    $('.slider').slick({
        autoplay: true,         //自動再生
        dots: true,             //ドット
        infinite: true,         //ループ
        pauseOnHover: false,    //ホバーで止めない
    })