レスポンシブコーディングの際に簡単に使えるカルーセル
スライダーは今コーディングする際に必須のアイテムとなってます。
レスポンシブしないとSEO的にも上がりません。
基本の使い方
slick配布元からファイルをダウンロードし、コーディングしているフォルダへ組み込みます。
コーディングの際に使用するのは、ダウンロードしたファイルの中に入ってる以下のファイルです。
ダウンロード後、ヘッダー部分に下記のソースを入れ込みます。
|
1 2 3 4 |
<link rel="stylesheet" type="text/css" href="任意のフォルダ名/slick.css" media="screen" /> <link rel="stylesheet" type="text/css" href="任意のフォルダ名/slick-theme.css" media="screen" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="任意のフォルダ名/slick.min.js"></script> |
表示させたい部分に下記のHTMLを記載いたします。
|
1 2 3 4 5 6 |
<ul class="slider"> <li><a href="#"><img src="../images/hoge.jpg"></a></li> <li><a href="#"><img src="../images/hoge.jpg"></a></li> <li><a href="#"><img src="../images/hoge.jpg"></a></li> <li><a href="#"><img src="../images/hoge.jpg"></a></li> </ul> |
共通に使えるCSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
/*左右の矢印の色を変える*/ .slick-prev:before, .slick-next:before { color: #000; } /*左右の矢印の位置を変える*/ .slick-next { right: 20px; z-index: 99; } .slick-prev { left: 15px; z-index: 100; } /*スライド数のドットの色を変える*/ .slick-dots li.slick-active button:before, .slick-dots li button:before { color: #fff; } /*スライド画像の横幅可変*/ img { max-width: 100%; height: auto; } |
参考サイト
