カルーセルスライダーslick
レスポンシブコーディングの際に簡単に使えるカルーセル
スライダーは今コーディングする際に必須のアイテムとなってます。
レスポンシブしないとSEO的にも上がりません。
基本の使い方
slick配布元からファイルをダウンロードし、コーディングしているフォルダへ組み込みます。
コーディングの際に使用するのは、ダウンロードしたファイルの中に入ってる以下のファイルです。
ダウンロード後、ヘッダー部分に下記のソースを入れ込みます。
表示させたい部分に下記のHTMLを記載いたします。
共通に使えるCSS
/*左右の矢印の色を変える*/
.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;
}
参考サイト
タグの使い方と実装ポイント"> ブラウザのアドレスバーをブランドカラーに!タグの使い方と実装ポイント
1月 12, 2025レスポンシブコーディングで気をつけること
1月 9, 2025jQueryページ移管時のアニメーションの最適化
12月 19, 2024