Technology ホームページ作成

[Javascript] Splideを使って、background-imageでメイン画像を切り替える

2021-01-21

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)など、さまざまなオプションをお好みでつける。

-Technology, ホームページ作成