Cacher is the code snippet organizer for pro developers

	this.currentSlide	= 0;
	this.slideArea 	= document.getElementById('js-slid');
	this.slideImgs	= this.slideArea.querySelectorAll("figure.blc-slide__img");


	/*スライド操作
	--------------------------------------------------------------------*/
	/**
	 * スライド追加
	*/
	addSlideEvent(){
		document.getElementById('js-slide-next').addEventListener("click",()=>{
			this.nextSlide();
		});
		document.getElementById('js-slide-prev').addEventListener("click",()=>{
			this.prevSlide();
		});
	}

	/**
	 * スライドループ
	*/
	loopSlide(){
		clearTimeout(this.slideTimer);
		this.slideTimer = setTimeout(() => {
			this.nextSlide();
		}, 5500);
	}

	/**
	 * スライド次へ
	*/
	nextSlide(){
		var next = this.currentSlide + 1;
		if(next > this.slideImgs.length-1) next = 0;
		this.slideArea.querySelector("figure.blc-slide__img.is-current").classList.remove("is-current");
		this.slideImgs[next].classList.add("is-current");
		this.currentSlide = next;
		this.loopSlide();
	}

	/**
	 * スライド前へ
	*/
	prevSlide(){
		var next = this.currentSlide - 1;
		if(next < 0) next = this.slideImgs.length-1;
		this.slideArea.querySelector("figure.blc-slide__img.is-current").classList.remove("is-current");
		this.slideImgs[next].classList.add("is-current");
		this.currentSlide = next;
		this.loopSlide();
	}

.blc-slide#js-slide
	figure.blc-slide__img.is-current
		img(src="###.jpg", alt="")
	figure.blc-slide__img
		img(src="###.jpg", alt="")
	figure.blc-slide__img
		img(src="###.jpg", alt="")
	figure.blc-slide__img
		img(src="###.jpg", alt="")
	figure.blc-slide__img
		img(src="###.jpg", alt="")

	.btn.btn-next#js-slide-next
	.btn.btn-prev#js-slide-prev

//スライドショー
.blc-slide  { @include wh(1400,960); @include top-left(102,73,0); border-radius: 4px;
	&__img{ @include top-left(0,0,0); opacity: 0; transition: .3s linear opacity;
		img 	{ @include fluidElm; user-select: none; pointer-events: none;}
		&.is-current { opacity: 1;}
	}
}

//前後ボタン
.btn-prev,
.btn-next { width: 100px; height: 100px; top: 50%; z-index: 22; margin-top: -50px; background:rgb(246, 221, 0); pointer-events: none; 
	&:after { content:''; @include wh(36,42); @include top-left(50%,50%); margin:-22px 0 0 -14px; background:url("/swan/images/ico-play.png") no-repeat center center; background-size: cover; }
}
.btn-prev { left:27px;
	&:after { transform: rotateY(180deg) translate(10px,0); }
}
.btn-next { right:27px;}