HTML / CSS でslickerを使う方法
slickerとは
スライダープラグインと呼ばれている、このようなスライダーを実現できる機能です。
導入手順
最初に紹介したようなシンプルなスライダーを作成する方法を紹介します。
スライドさせたい画像を用意する
slickを導入させたいフォルダに、例えばimgフォルダを新規作成して、その中に画像ファイルを何枚か追加します。
スライドの骨格を作る
htmlファイルのbodyタグ内にスライドの骨格を表現するためのコードを書きます。
<!-- スライドの骨格 -->
<div class="single">
<div><img src="img/flowers.png" alt=""></div>
<div><img src="img/grass.jpg" alt=""></div>
<div><img src="img/iceland.jpg" alt=""></div>
</div>
公式サイトからフォルダをダウンロードする
get it now → Download Nowの流れで、ファイルがダウンロード出来ます。
必要なファイルをSlickを導入したいフォルダに配置する
-------------------------------------------
「slick.css」
「slick-theme.css」
「 slick.min.js」
--------------------------------------------
この3つのファイルに加えて、「slick.js」を新規作成します。
.jsの前はslickでなくてもいいです。
スライドを動かすためのコードを書く
slick.js
$(document).ready(function(){
$('.single').slick({
autoplay: true,
autoplaySpeed: 5000,
dots: true,
});
});
autoplay: true, autoplaySpeed: 5000
自動再生をオン、そしてスピードを5000にする設定です。
dots: true,
ドットを表示させる設定です。
ファイルとjQueryを読み込む
「slick.css」、「slick-theme.css」、jQuery、「slick.min.js」、「slick.js」を読み込むための記述をhtmlファイルのheadタグ内に記述します。
<head>
<meta charset="UTF8">
<!-- 「slick.css」,「slick-theme.css」の読み込み -->
<link href="css/slick-theme.css" rel="stylesheet" type="text/css">
<link href="css/slick.css" rel="stylesheet" type="text/css">
<!-- jQueryの読み込み -->
</script>
<!-- 「slick.min.js」の読み込み -->
<script type="text/javascript" src="js/slick.min.js"></script>
<!-- 「slick.js」の読み込み -->
<script type="text/javascript" src="js/slick.js"></script>
</head>
注意点は、「slick.min.js」と「slick.js」の読み込みはjQueryを読み込んだ後に記述するということです。
ここまでの作業で、スライダーが完成しました！
配置や画像の大きさを変えたい場合は、以下の2つが参考になります。
レイアウトを整える
編集するcssファイルとクラス名を書いていきます。
全体の幅、外枠を調整したい場合
slick.css
/* 全体の幅、外枠 */
.single { max-width: 600px; margin: 100px auto 50px;}
画像の大きさを変えたい場合
slick.css
/* 画像の縦、横の長さ */
.single img{ width: 100%; height: 500px;}
矢印のCSSを調整したい場合
slick-theme.css
/* 左矢印の位置 */
.slick-prev
{
left: -45px;
}
/* 左矢印の種類、色、大きさ */
.slick-prev:before
{
content: '←';
color: black;
font-size: 30px;
font-weight: bold;
}
/* 右矢印の位置 */
.slick-next
{
right: -45px;
}
/* 右矢印の種類、色、大きさ */
.slick-next:before
{
content: '→';
color: black;
font-size: 30px;
font-weight: bold;
}
ドットのCSSを調整したい場合
slick-theme.css
/* 今クリックしているドットの透明度、色 */
.slick-dots li.slick-active button:before
{
opacity: .75;
color: black;
}
/* 全てのドットの大きさ、位置など */
.slick-dots li button:before
{
font-family: 'slick';
font-size: 56px;
line-height: 20px;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
content: '•';
text-align: center;
opacity: .25;
color: black;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
参考にしたサイト
