カルーセル・スライダーをカスタム

2017年2月23日 | Column, Web

レスポンシブに強く様々なレイアウトが揃っているslick sliderは多くの方がご存知だと思います。この度、slick sliderのカルーセル・スライダーで矢印を素材に変更し両サイドの少し見えている部分を透過するという案件が出ましたので、備忘録をかねて掲載致します。

まずは、デモをご確認く頂き、必要があればslick.jsを配布元からファイルをダウンロードしてください。ファイルの設置などGimmick logさんのページで詳しく紹介されていますので、ご参考ください。

demo

両サイドの画像を透過するCSS

両サイドの画像を透過する事でアクティブ画像に目が行くようになります。

[css]

.slick-slider .slick-track, .slick-slider .slick-list{
background: #fff;
}
.slick-initialized .slick-slide{
opacity: 0.6; /* 両サイドの画像を透過 */
}
.slick-initialized .slick-slide.slick-active{
opacity: 1; /* センター画像を非透過 */
}

[/css]

矢印を画像にする

矢印の位置などはご自由に変更ください。

[css]

.slick-prev::before {
content: url(../img/prev.png);
}
.slick-next::before {
content: url(../img/next.png);
}
.slick-prev{
left: 80px;
}
.slick-next{
right: 80px;
}
@media screen and (max-width:480px) {
.slick-prev{
left: 30px;

}
.slick-next{
right: 30px;
}
}

[/css]

FontAwesomeの矢印を表示する

まずは、FontAwesomeのCDNをhead内にコピペします。

[html]

[/html]

CSSは、下記になります。アニメーションで少し動くようにしています。

[css]

.slick-prev::before {
position: relative;
content: "\f060";
font-family: FontAwesome;
background: rgba(255,255,255,0.5);
padding: 10px;
opacity: 1;
}

.slick-next::before {
position: relative;
content: "\f061";
font-family: FontAwesome;
background: rgba(255,255,255,0.5);
padding: 10px;
opacity: 1;
}

.slick-prev{
left: 80px;
}
.slick-next{
right: 80px;
}

.slick-prev:hover:before{
animation: arrow_prev .5s ease-out forwards;
}
@keyframes arrow_prev {
0% {
right: 0px;
}
50% {
right: 5px;
}
100% {
right: 0;
}
}

.slick-next:hover:before{
animation: arrow_next .5s ease-out forwards;
}
@keyframes arrow_next {
0% {
left: 0px;
}
50% {
left: 5px;
}
100% {
left: 0;
}
}
@media screen and (max-width:480px) {
.slick-prev{
left: 30px;
}
.slick-next{
right: 30px;
}
}