Splideを使用して、メイン画像をスライドで切り替える。
導入の方法はこちらにまとめた。
[Javascript] Splideを使って、スライドを作成する
Splideを使って、画像のスライドを作成してみる。
完成形はこちら。
HTMLの記述
HTMLの記述はこちら
<!DOCTYPE html>
<html>
<head>
<title>SlideTest</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="./splide.min.css">
<link rel="stylesheet" href="./slidetest.css">
</head>
<body>
<div class="image-wrapper">
<div id="image-slider" class="splide">
<div class="splide__track">
<ul class="splide__list">
<li class="home-slide-item splide__slide" style="width: 100%; height: 900px; background: url(./slidetest/img1.jpg;); ">
<img src="./slidetest/img1.jpg">
</li>
<li class="home-slide-item splide__slide" style="width: 100%; height: 900px; background: url(./slidetest/img2.jpg;); ">
<img src="./slidetest/img2.jpg">
</li>
<li class="home-slide-item splide__slide" style="width: 100%; height: 900px; background: url(./slidetest/img3.jpg;); ">
<img src="./slidetest/img3.jpg">
</li>
</ul>
</div>
</div>
</div>
<script src="./slidetest.js"></script>
<script src="./splide.min.js"></script>
<script>
new Splide( '.splide', {
type : 'fade',
height: '900px',
//- height: '100vh',
arrows : false,
cover : true,
autoplay : true,
} ).mount();
</script>
</body>
</html>
分解して詳しくみていく。
ファイルの読み込み
以下の二つのファイルを読み込む。
- splide.min.css
- splide.min.js
リスト部分
リストの部分に関しては、Splideサイトで、基本的な形（divの要素名など含め)のっけているので、そこを参照する。（https://splidejs.com/getting-started/）
<div class="splide">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">Slide 01</li>
<li class="splide__slide">Slide 02</li>
<li class="splide__slide">Slide 03</li>
</ul>
</div>
</div>今回は背景画として使いたいので、各liクラスに、style="background: url(./slidetest/img.jpg;); という形で、CSSを埋め込んだ。
<script>部分
ウェブサイトの、Cover images部分の基本形を参照。（https://splidejs.com/）
new Splide( '#splide', {
perPage : 3,
height : '10rem',
cover : true,
breakpoints: {
height: '6rem',
}
} ).mount();あとは、画像を切り替える際に、スライドにするかフェードインするか（type : 'fade'）、画像切り替えのボタンを両端矢印につけるか、下に○印でつけるか（arrows : false）など、さまざまなオプションをお好みでつける。
全体像を把握する
下記にHTMLとCSS、Javascriptを使ったwebサイトの作り方についての記事をまとめた。
-
-
HTMLとCSS、Javascriptを使ったwebサイトの作り方まとめ
このページでは、HTMLとCSS、Javascriptを使ったwebサイトの作り方についてまとめていく。 Webサイトの仕組み まずはwebサイトの仕組みなどをわかっておくと、今後の準備がかなり楽にな ...
続きを見る
また、コンピューターについての全体像も把握しておくと、web制作の理解にも役立つ。
-
-
Screen-Shot-2021-06-11-at-11.45.16
続きを見る
