toggle
2018-12-07

slickスライダーを入れてみよう

スライドショーを入れたいという人は多いようですね。
個人的に、slick(スリック)スライダーが入れやすいと思います。

↓slickスライダー配布元
http://kenwheeler.github.io/slick/

「get it now(今すぐ入手)」をクリックする

「Download Now(今すぐダウンロード)」をクリックし、ダウンロードします。
保存した場所は覚えておきましょう!

ダウンロードしたファイルは圧縮されているので解凍し、中身を見ます。
↓このようになっていると思われます。
↓必要なものだけまとめたフォルダを作ります。

↓今回「slick」フォルダとしました。これをhtmlファイルに読み込んで使います。

↓読み込む時はこんな感じにしています


<link href="js/slick/slick.css" rel="stylesheet">
<link href="js/slick/slick-theme.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
<script src="js/slick/slick.js">
<script>
// スライダー1 ================================
//画像をスライドさせるだけ(手動)に
//細かい設定を入れるための準備
$(function() {
    $("#slider01").slick({
    
    //ここに細かい設定を入れる予定
});
});
</script>

↓スライダーのHTMLはこんな感じ

<div class="slider">
	<ul id="slider01"> 
		<li>画像1枚目
		<li>画像2枚目
		<li>画像3枚目
		<li>画像4枚目
		<li>画像5枚目
	</ul>
</div>

↓今回のCSSはこんな感じ

/* スライダー 全体枠 */
.slider{
/*	background-color: blue;/* 背景色 確認用 */
	max-width: 300px;/* 横幅最大 */
	width: 80%;/* 横幅 */
	height: auto;/* 高さなりゆき */
	margin: 0 auto 30px auto;/* マージン */
	line-height: 0px; /* divの下の隙間をなくすため */
}

/* スライダー 画像 */
.slider img{
    width: 100%;/* 横幅 */
    height: auto;/* 高さなりゆき */
    vertical-align: bottom; /* 下の隙間をなくすため */
}

  • 画像1枚目
  • 画像2枚目
  • 画像3枚目
  • 画像4枚目
  • 画像5枚目

関連記事