[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サイトの作り方についての記事をまとめた。

[st-card myclass="" id=3358 label="" pc_height="" name="" bgcolor="" color="" fontawesome="" readmore=“on”]

また、コンピューターについての全体像も把握しておくと、web制作の理解にも役立つ。

[st-card myclass="" id=4587 label="" pc_height="" name="" bgcolor="" color="" fontawesome="" readmore=“on”]