こんにちは、プログラマーの山本です。

今回はオリジナルのスライドショーを制作しました。

・左右に画像送りボタン
・下部に画像位置を示す黒丸
・◯秒おきに自動で画像をスライドさせる

といった機能を搭載したスライドショーになります。

コードを全て公開するので、一部を調整することで、
好きなスライドショーを設置する事ができるでしょう。

・WordPress似プラグインを入れたくない人、
・すでにあるプラグインに好みのものがない人、
・HTMLとCSSで制作されたサイトにスライドショーを導入したい人

などは今回のシステムを導入してみてください。

今回のシステムのデモはこちらです。
※ スライドショーのデモに使用している画像はテスト用で仮置きしたものです。

HTMLでオリジナルスライドショーの土台を作る

<div id="slideGalley">
	<div id="slide_prev"><img decoding="async" src="左向き矢印の画像URL"></div>
	<ul id="slide">
		<li class="1"><a href="URL"><img decoding="async" src="画像URL"></a></li>
		<li class="2"><a href="URL"><img decoding="async" src="画像URL"></a></li>
		<li class="3"><a href="URL"><img decoding="async" src="画像URL"></a></li>
	</ul>
	<div id="slide_next"><img decoding="async" src="右向き矢印の画像URL"></div>
</div>
<ul id="slide_nav"></ul>

2行目と8行目：左右に設置する、画像送り用のボタンになります。
　　　　　　　左右の矢印のような画像のURLを入力してください。

4~6行目：スライドショーで表示する画像のURLと、画像をクリックしたときに飛ぶ先のURLを指定してください。

CSSでオリジナルサイドバーのデザインを整える

<style>
#slideGalley {
  width: 100%!important;
  overflow: hidden;
  position: relative;
  margin-bottom: -40px;
  animation: zoomIn 1s ease-in-out 0s 1 forwards;
  transform: scale(1.1, 1.1);
}
#slide {
  width: calc(300% + 3px);
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#slide li {
  width: calc(100% / 3);
  float: left;
}
@keyframes zoomIn {
  100% {
    transform: scale(1,1);
  }
}
#slide_nav{
  text-align: center;
  width: fit-content;
  position: relative;
  margin: auto;
  user-select:none;
  -webkit-user-select:none;
  -ms-user-select: none;
  -moz-user-select:none;
  -khtml-user-select:none;
  -webkit-user-drag:none;
  -khtml-user-drag:none;
}
#slide_nav li{
  display: inline-block;
  margin: 0 5px;
  color: #777;
  cursor: pointer;
}
#slide_nav li.active{
  color: #333;
}
#slide_prev, #slide_next{
  display: block;
  position: absolute;
  top: calc(50% - 25px);
  height: 50px;
  width: 50px;
  border-radius: 50%;
  text-align: center;
  font-size: 3em;
  color: #fff;
  cursor: pointer;
  opacity:0.5;
}
#slide_prev:hover, #slide_next:hover{
  opacity:0.9;
}
#slide_prev{
  left: 5px;
}
#slide_next{
  right: 5px;
}
</style>

11行目と17行目：今回は３枚の画像を表示させるので、横幅をこのように設定しています。

使用する画像の枚数に応じて、この値は変更してください。

JavaScriptでオリジナルサイドバーの動作を書く

<script>
window.addEventListener('DOMContentLoaded', function(){
	const timerSec = 7;
	const width_first = $("#slide li").width();
	$("#slide").css("margin-left", -1*width_first).prepend($("#slide li:last-child"));
	var timerId = setTimeout(function(){
		slideGalley_nav(1);
	}, timerSec*1000 );
	function slideGalley(dir){
		const slide_dir = dir * -1 - 1;
		$("#slide").animate({
			"margin-left" :  slide_dir * $("#slide li").width()
		},function(){
			for(var i =0; i<Math.abs(dir); i++){
				if(dir > 0){
					$("#slide").css("margin-left", -1 * $("#slide li").width()).append($("#slide li:first-child"));
				} else {
					$("#slide").css("margin-left", -1 * $("#slide li").width()).prepend($("#slide li:last-child"));
				}
			}
		});
		timerId = setTimeout(function(){
			slideGalley_nav(1);
		}, timerSec*1000 );
	};
	function slideGalley_nav(type){
		var li = document.getElementById("slide_nav").children;
		var len = li.length;
		var flag = false;
		if(type > 0){
			for(var i=0; i<=len; i++){
				if(i == len){ li[0].click(); }
				else if(flag){ li[i].click(); break; }
				if(li[i] == null) continue;
				if(li[i].className == "active"){ flag = true; }
			}
		}
		else{
			for(var i=len-1; i>=-1; i--){
				if(i == -1){ li[len-1].click(); }
				else if(flag){ li[i].click(); break; }
				if(li[i] == null) continue;
				if(li[i].className == "active"){ flag = true; }
			}
		}
	}
	document.getElementById("slide_next").addEventListener("click", function(){
		clearTimeout(timerId);
		slideGalley_nav(1);
	});
	document.getElementById("slide_prev").addEventListener("click", function(){
		clearTimeout(timerId);
		slideGalley_nav(-1);
	});
	var nav = document.getElementById("slide_nav");
	var slides = document.getElementById("slide").children;
	for(let i=0; i<slides.length; i++){
		var li = document.createElement("li");
		li.id = i == 0 ? "nav_" + slides.length : "nav_" + i;
		if(i==0) li.classList.add("active");
		li.innerText = "●";
		li.addEventListener("click", function(){
			var lis = document.getElementById("slide_nav").children;
			for(var k=0; k<lis.length; k++){
				lis[k].classList.remove("active");
			}
			this.classList.add("active");
			var no = this.id.replace('nav_','');
			no = no == slides.length ? 0 : no;
			var now = document.getElementById("slide").children[0].className;
			now = now == slides.length ? 0 : now;
			var diff = no - now;
			if(diff != 0){
				clearTimeout(timerId);
				slideGalley(diff);
			}
		});
		nav.appendChild(li);
	}
});
</script>

このままWordPressの固定ページなどに貼り付けても動くようにコードを調整しました。

（&& などの一部記号が文字化けするため、それを回避した書き方にしております。）

3行目：ページを自動送りする間隔の秒数を指定してください。ここでは７秒にしています。

また、上記のコードは、スライドショーに使われている画像の枚数を取得するようにしているので、
画像の枚数に関わらず正常に動作します。

画像の枚数が増えてもコードを修正する必要はありません。

まとめ

今回は、1からオリジナルのサイドバーを作成しました。

コードを全て自作しているので、
自分の好きなようにカスタマイズすることが出来ます。

サイト上にスライドショーを設置したいという方は、
上記のコードを自由に編集してお使いください。

制作の依頼はこちら

もし、ご自分で実装するのが難しい場合や、
カスタマイズが思うように出来ない場合は、

また、今回のシステム以外にも、

Welcartにおけるシステムの追加やカスタマイズ、
Wordpressのテーマやプラグインのカスタマイズなど、
ウェブに関するご依頼ならほとんど対応可能です。

簡単なシステムなら１件¥3,000（税別）から承っております。

相場よりも費用を抑えて対応させていただくことが可能ですので、
以下のフォームから相談内容を記入して気軽にご連絡ください。