トップ > jQuery > 画像スライドを実装する

画像スライドを実装する

jQuery

 

はじめに

以前スライダープラグインのSlikerの記事を書きましたが、

khirok.hatenadiary.jp

今回は、Progate上級編を参考にして、jQueryで画像スライドを実装してみます。

スライドの例

メルカリの商品出品ページにあるようなこんなスライドです。

Image from Gyazo

今回作るものとは違いますが、大体こんな感じといったイメージです。

完成品

ファイルとその中身

HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
<title>slide-progate</title>
</script>
<script src="script.js"></script>
</head>
<body>
<h1>Train</h1>
<div class="slide-wrapper">
<div class="slide active">
<img src="subway.jpg" width="400">
</div>
<div class="slide">
<img src="train-station.jpg" width="400">
</div>
<div class="slide">
<img src="railway.jpg" width="400">
</div>
<div class="slide">
<img src="boots.jpg" width="400">
</div>
<div class="btn-wrapper">
<div class="btn">1</div>
<div class="btn">2</div>
<div class="btn">3</div>
<div class="btn">4</div>
</div>
</div>
</body>
</html>

 

CSS

h1 {
position: absolute;
left: 18px;
top: -13px;
z-index: 1;
background-color: rgba(255,255,255,0.6);
}
.slide-wrapper {
display: flex;
position: relative;
}
.slide {
margin: 0 10px;
display: none;
}
.active {
display: block;
}
.btn-wrapper {
position: absolute;
bottom: -45px;
left: 40px;
display: flex;
}
.btn {
background-color: rgba(0,0,0,0.1);
padding: 10px 15px;
cursor: pointer;
margin: 0 20px;
}
.btn:hover {
background-color: rgba(0,0,0,0.5);
}

 

jQuery

$(function(){
$('.btn').click(function(){
$('.active').removeClass('active');
var clicknumber = $('.btn').index($(this));
$('.slide').eq(clicknumber).addClass('active');
})
})

ブラウザ

Image from Gyazo

作り方 

素材をブラウザに表示させる 

<body>
<h1>Train</h1>
<div class="slide-wrapper">
<div class="slide active">
<img src="subway.jpg" width="400">
</div>
<div class="slide">
<img src="train-station.jpg" width="400">
</div>
<div class="slide">
<img src="railway.jpg" width="400">
</div>
<div class="slide">
<img src="boots.jpg" width="400">
</div>
<div class="btn-wrapper">
<div class="btn">1</div>
<div class="btn">2</div>
<div class="btn">3</div>
<div class="btn">4</div>
</div>
</div>
</body>
タイトル
<h1>Train</h1>
スライドとボタンの番号
<div class="slide-wrapper">
<div class="slide">
<img src="subway.jpg" width="400">
</div>
<div class="slide">
<img src="train-station.jpg" width="400">
</div>
<div class="slide">
<img src="railway.jpg" width="400">
</div>
<div class="slide">
<img src="boots.jpg" width="400">
</div>
<div class="btn-wrapper">
<div class="btn">1</div>
<div class="btn">2</div>
<div class="btn">3</div>
<div class="btn">4</div>
</div>
</div>

 

一番外側のdiv要素は、

<div class="slide-wrapper">
 
 
</div>

これです。

 

その中に、

<div class="slide">
 
</div>

slideクラスを持つdiv要素が4つと

 

<div class="btn-wrapper">
 
 
</div>

btn-wrapperクラスを持つdiv要素が1つあります。

 

slideクラスを持つdiv要素の中には、画像が入っています。

<div class="slide">
<img src="subway.jpg" width="400">
</div>

 

 

btn-wrapperクラスを持つdiv要素の中には、btnクラスを持つdiv要素が4つ含まれています。

<div class="btn-wrapper">
<div class="btn">1</div>
<div class="btn">2</div>
<div class="btn">3</div>
<div class="btn">4</div>
</div>

 

以上の記述で、必要な素材がブラウザに表示されました。

f:id:khirok:20200212172818p:plain

タイトル

f:id:khirok:20200212172835p:plain

画像

f:id:khirok:20200212172854p:plain

番号

スタイルを適応していく

画像を横並びにさせる
.slide-wrapper {
　display: flex;
}

f:id:khirok:20200212173634p:plain
side-wrapperの要素全てが横並びになりました。

<div class="slide-wrapper">
<div class="slide">
<img src="subway.jpg" width="400">
</div>
<div class="slide">
<img src="train-station.jpg" width="400">
</div>
<div class="slide">
<img src="railway.jpg" width="400">
</div>
<div class="slide">
<img src="boots.jpg" width="400">
</div>
<div class="btn-wrapper">
<div class="btn">1</div>
<div class="btn">2</div>
<div class="btn">3</div>
<div class="btn">4</div>
</div>
</div>

横並びになった要素は、slideクラスを持つdiv要素4つとbtn-wrapperクラスを持つdiv要素です。

ボタンの位置を決める

まずは、slide-wrapperを相対位置の基準とします。

.slide-wrapper {
　position: relative;
}

f:id:khirok:20200212174640p:plain

左上が、top: 0; left: 0;の位置となります。

ボタンを包んでいる、btn-wrapperの位置をこのように定めます。

.btn-wrapper {
　position: absolute;
　bottom: -45px;
　left: 40px;
　display: flex;
}

 

ここでは、ボタン一つ一つを横並びにしています。

display: flex;

 

ボタンの見た目をいい感じにする

色、内側の余白、マウスを当てた時のカーソル、番号同士の間隔を決めました。

.btn {
　background-color: rgba(0,0,0,0.1);
　padding: 10px 15px;
　cursor: pointer;
　margin: 0 20px;
}

 

カーソルを当てた時に、色が濃くなるようにもしています。

.btn:hover {
　background-color: rgba(0,0,0,0.5);
}

 

現在はこんな感じです！

f:id:khirok:20200212175515p:plain

 デフォルトの表示を設定する

まずは、全てのスライドを非表示にします。

.slide {
　display: none;
}

 

そして、最初のスライドのみに、activeというクラスを付けます。

<div class="slide active">
　<img src="subway.jpg" width="400">
</div>

 

このactiveというクラスが付いたdiv要素のみ表示させます。

.active {
　display: block;
}

 

以上の処理で、画面はこうなっています。

f:id:khirok:20200212180151p:plain

最初の画像だけ表示されています。

タイトルにスタイルを適応させる

h1 {
　position: absolute;
　left: 8px;
　top: -13px;
　z-index: 1;
　background-color: rgba(255,255,255,0.6);
}

 

こんな感じになりました。

f:id:khirok:20200212180541p:plain

ボタンを押したら画像が切り替わるようにする

ここからは、jQueryの出番です。

$(function(){
$('.btn').click(function(){
$('.active').removeClass('active');
var clicknumber = $('.btn').index($(this));
$('.slide').eq(clicknumber).addClass('active');
})
})

 

ボタンをクリックした時にイベントを発生させています。

$('.btn').click(function(){
 
})

 

クリックイベント内ではまず、

 activeクラスを持っている要素から、activeクラスを取り除いています。

$('.active').removeClass('active');

 

次に、

ボタンのインデックス番号をclicknumberという変数に代入しています。

var clicknumber = $('.btn').index($(this));

 

これに関しては、

console.log(clicknumber);

コンソールで確認すると

 

最初の番号が0、次が1というようになっています。

 

ここでeq(clicknumber)とする事で、

$('.slide').eq(clicknumber).addClass('active');

 clicknumberに入っている数字のslideクラスを取得できます。

 

slideクラスは、全部で4つありました。

<div class="slide active">
<img src="subway.jpg" width="400">
</div>
<div class="slide">
<img src="train-station.jpg" width="400">
</div>
<div class="slide">
<img src="railway.jpg" width="400">
</div>
<div class="slide">
<img src="boots.jpg" width="400">
</div>

 clicknumberに入る数字は、最初から0、1、2、3となります。

 

$('.slide').eq(clicknumber).addClass('active');

これは、入っている数字のslideクラスにactiveクラスを追加する という処理です。

 

以上で完成です！

Image from Gyazo