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

記事のオススメ

【swiper】というスライダーをご存知でしょうか?jQueryに依存せず、レスポンシブ対応、パターンの多さから2019年現在人気のスライダーとなっています。【swiper.js】の矢印をFont Awesomeにてカスタムする方法を記載したので、あわせてお読みいただければ幸いです。

【SWIPER.JS】スライダーの矢印カスタム

【swiper.js】にサムネイルを表示させ、更に両サイドが少しづつ見えるカルーセルにカスタムする記事を掲載しました。閲覧いただけると幸いです。

【SWIPER】スライダーにサムネイルを表示

関連記事

Contact Page