社内の案件でスライダーが入ってるものが多くなってきたので、
ここらでまとめておこうと思い実装の仕方を記します。
たった4ステップです。
Contents
1.必要なライブラリをCDNから読み込む
ファイルをダウンロードして読み込む方法もありますが、ここでは読み込むだけで使える便利なCDNを使用します。
使うライブラリは4つで以下のように記述します。（jQueryも必要なので読み込んでいます）
<!--------------------スライダー見た目-------------------------------------------------->
<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">
<!------------------------------------------------------------------------------------->
<!--------------------jQuery----------------------------------------------------------->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<!------------------------------------------------------------------------------------->
<!--------------------スライダー動かすやつ----------------------------------------------->
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<!-------------------------------------------------------------------------------------> 2.HTML：スライダーに必要なパーツを用意する
親クラス名はなんでも大丈夫です。（ここではsliderとしています）
<div class="slider">
<div><img src="./img/slider_img01.jpg"></div>
<div><img src="./img/slider_img02.jpg"></div>
<div><img src="./img/slider_img03.jpg"></div>
</div>画像が3つ縦に並んでいます
3.Javascript：スライダーを作成する
以下のように記述して先ほど書いたHTMLをスライダーにします
$('.slider').slick({
autoplay: true, //自動再生
autoplaySpeed: 2000, //自動再生のスピード
speed: 800, //スライドするスピード
dots: true, //スライド下のドット
arrows: true, //左右の矢印
infinite: true, //永久にループさせる
});スライダーになりました。あとはCSSで見た目を調整するだけです。
4.CSS：見た目を調整する
横幅を調整したり、矢印を表示したりしています。
/*------ スライダーの横幅 ------*/
.slider{
width:70%;
margin:0 auto;
}
/*------ スライダー画像 ------*/
.slider img{
width:100%;
}
/*-------- 高さ調整 ----------*/
.slider .slick-slide{
height:auto!important;
}
/*---------- 矢印 ----------*/
.slider .slick-next{
right:0!important;
}
.slider .slick-prev{
left:0!important;
}
.slider .slick-arrow{
width: initial!important;
height: initial!important;
z-index:2!important;
}
.slider .slick-arrow:before{
font-size: 30px!important;
}
いい感じになりました！
矢印の位置やサイズを調整したい場合は下記の値を変更すればOKです。
位置を調整したい場合：.slick-nextと.slick-prevのrightとleft
サイズを変えたい場合：.slick-arrow:beforeのfont-size
おまけ：デフォルトの矢印を少しカスタマイズしてみる
デフォルトの矢印のサイズと色と位置を変更してみます。
.slider .slick-next{
right:20px!important;
}
.slider .slick-prev{
left:20px!important;
}
.slider .slick-arrow:before{
font-size: 60px!important;
color:red!important;
}
slick.jsのスライダーについてさらに詳しく知りたい場合は下記の記事が参考になると思います。
slick.jsのスライダーでドットをカスタマイズする方法
slick.jsのスライダーの矢印をカスタマイズする方法
また、下記ではslick.jsで実装できる様々なスライダーを紹介しているので興味があればご参考ください！
slick.jsでよく作るスライダーを10種類紹介
ソースコード全文
最後にすべてのコードを載せておきます。
<div class="slider">
<div><img src="./img/slider_img01.jpg"></div>
<div><img src="./img/slider_img02.jpg"></div>
<div><img src="./img/slider_img03.jpg"></div>
</div>
<style>
/*------ スライダー横幅 ------*/
.slider{
width:70%;
margin:0 auto;
}
/*------ スライダー画像 ------*/
.slider img{
width:100%;
}
/*-------- 高さ調整 ----------*/
.slider .slick-slide{
height:auto!important;
}
/*----------- 矢印 -----------*/
.slider .slick-next{
right:0!important;
}
.slider .slick-prev{
left:0!important;
}
.slider .slick-arrow{
width: initial!important;
height: initial!important;
z-index:2!important;
}
.slider .slick-arrow:before{
font-size: 30px!important;
}
</style>
<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 src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script>
$('.slider').slick({
autoplay: true, //自動再生
autoplaySpeed: 2000, //自動再生のスピード
speed: 800, //スライドするスピード
dots: true, //スライド下のドット
arrows: true, //左右の矢印
infinite: true, //永久にループさせる
});
</script>
以上、slick.jsを使用したシンプルなスライダーの実装方法でした。
コメント