Loading...

Single Post

HOME > post > Column > カルーセル・スライダーをカスタム

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

| Column, Web
slick-sliderカルーセルイメージ

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

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

両サイドの画像を透過する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; /* センター画像を非透過 */
}

矢印を画像にする

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


.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;
    }
}

FontAwesomeの矢印を表示する

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


<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

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;
    }
}

まとめ

slick sliderは設置も容易で使いやすいのに高機能です。個人的にも好んで使っています。カスタマイズも簡単にできそうなので、エフェクトを変えたりしながら使ってみられてはいかがでしょうか。

関連記事

Contact Page