slickスライダーで矢印を任意の画像でカスタマイズしたい時があると思います。
当記事ではその方法をデモを交えながら解説します。
通常のslickスライダーはご理解されている前提で進めていきますので、
「slickスライダー初めて」という方はまずこちらからご参考に頂ければと思います。
slick.jsでシンプルなスライダーを実装する方法【たった4ステップです】
①デフォルトの矢印付きのslickスライダーを実装
わかりやすいようにデフォルトの矢印付きのslickスライダーを作成して、
そこから変更を加えていきます。
<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;
}
/*--------画像サイズ調整---------*/
img{ width:100%; }
/*-----------height調整----------*/
.slick-slide{ height:auto!important; }
/*-----------矢印表示----------*/
.slick-next{ right:0!important; }
.slick-prev{ left:0!important; }
.slick-arrow{ z-index:2!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.3.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-arrow:before{
content:""!important;
}③矢印を任意の画像にする
3,4行目は後で親要素で調整できるようにwidthとheightを100%に、
5~7行目は疑似要素はposition:absluteしないと(確か)出てこないのでつけて、
11,12行目と16,17行目で任意の画像を埋め込んでいます。
background-sizeはなぜか共通クラスに埋め込むと効かないので、
それぞれに入れています。
.slick-arrow:before{
content:""!important;
width: 100%!important;
height: 100%!important;
position: absolute;
top: 0;
left: 0;
}
.slick-next:before{
background: url(img/arrow_r.png)!important;
background-size: contain!important;
}
.slick-prev:before{
background: url(img/arrow_l.png)!important;
background-size: contain!important;
}
④矢印のサイズと位置を調整する
3,4行目でサイズを、8行目と12行目で位置を調整しています。
.slick-arrow{
z-index:2!important;
width:60px!important;
height:60px!important;
}
.slick-next{
right:-30px!important;
}
.slick-prev{
left:-30px!important;
}⑤矢印の半透明をなくす
デフォルトでは『opacity: 0.75』が入っているみたいなので上書きします。
.slick-arrow:before{
opacity:1!important;
}
なんかカッコ悪くなりましたが以上の手順で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;
}
/*--------画像サイズ調整---------*/
img{ width:100%; }
/*-----------height調整----------*/
.slick-slide{ height:auto!important;}
/*-----------矢印表示----------*/
.slick-next{ right:-30px!important;}
.slick-prev{ left:-30px!important; }
.slick-next:before{
background: url(img/arrow_r.png)!important;
background-size: contain!important;
}
.slick-prev:before{
background: url(img/arrow_l.png)!important;
background-size: contain!important;
}
.slick-arrow{
z-index:2!important;
width:60px!important;
height:60px!important;
}
.slick-arrow:before{
content:""!important;
width: 100%!important;
height: 100%!important;
position: absolute;
top: 0;
left: 0;
opacity:1!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.3.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>
コメント