slickでスライダーを作ってみた

slickを使ってスライダーを作ってみた。

slickの利用

slickはスライダーのプラグインで、公式サイトからダウンロードできます。
以下のファイルが必須

slick.css
slick-theme.css
slick.min.js
fontsフォルダ

今回はslickの練習としていろいろやってみた。

仕様

調べた中で、できそうなことはとりあえずやってみよう

HTML & CSS

HTML

<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"><title>SlideBanner</title><linkrel="stylesheet"href="slick.css"/><linkrel="stylesheet"href="slick-theme.css"><linkrel="stylesheet"href="test.css"><script src="jquery-3.5.1.min.js"></script></head><body><h2class="slide_title">slickのスライドショー</h2><ulclass="slide_show"><li><imgclass="slide_img"src="＃"></li><li><imgclass="slide_img"src="＃"></li><li><imgclass="slide_img"src="＃"></li><li><imgclass="slide_img"src="＃"></li><li><imgclass="slide_img"src="＃"></li></ul><ulclass="thumb"><li><imgclass="thumb_img"src="＃"></li><li><imgclass="thumb_img"src="＃"></li><li><imgclass="thumb_img"src="＃"></li><li><imgclass="thumb_img"src="＃"></li><li><imgclass="thumb_img"src="＃"></li></ul><pclass="slide_text">4秒ごとに自動でスライドします。</p><pclass="slide_text">左右の矢印を押下でスライドさせることができます。</p><script type="text/javascript"src="slick.min.js"></script><script type="text/javascript"src="test.js"charset="UTF-8"></script></body></html>

CSS

body{margin:0px;padding:075px;background-color:black;}h2,p{color:white;}.slide_show{width:100%;}ul{padding:0px;}li{list-style:none;}.slide_img{width:100%;height:45vw;object-fit:cover;}.thumb_img{height:20vw;}.slick-prev::before,.slick-next::before{color:#ffff66;}.slick-dotsli.slick-activebutton:before,.slick-dotslibutton:before{color:#ffff66;}@mediascreenand(max-width:400px){body{padding:030px;}h2{font-size:15px;}p{font-size:10px;}.thumbimg{width:100%;}}

スライダーの矢印の色とか、ドットの色とか変えてみた。
.slick-prev::before, .slick-next::before {color: #ffff66;}
.slick-dots li.slick-active button:before, .slick-dots li button:before {color: #ffff66;}

画像が大きいので、メディアクエリもやってみた(ブレークポイント１箇所だけど)
meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"
@media screen and (max-width: 400px)

JavaScript

$(".slide_show").slick({asNavFor:".thumb",arrows:false,dots:false,centerMode:true,centerPadding:'5%',infinite:true,});$(".thumb").slick({autoplay:true,autoplaySpeed:4000,asNavFor:".slide_show",focusOnSelect:true,infinite:true,slidesToShow:3,slidesToScroll:1,dots:true,})

やってみたこと

初めてのslickだったが、比較的簡単に設定できた。

スライダーの矢印、ドットの色を変える。(上述)
センターモードで表示
- centerModeとcenterPaddingを設定
サムネイル付き
- thumbクラスを作成し、asNavForでslide_showと紐付け
- サムネイルにarrowを付けるため、slide_showのarrowを消す
- focusOnSelectでサムネイルを操作できるようにする
- slidesToShowを設定してサムネイルを作成
自動再生
- autoplayとautoplaySpeedを設定