appsdevpk/slideshow.html

## slideshow.html
<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<script src="https://unpkg.com/stimulus/dist/stimulus.umd.js"></script>
	<style>
		.slideitem{
			opacity: 0;
			width:0px;
			position:absolute;
			left:0px;
			top:0px;
			width:100%;
			height:100%;
			font-size:30px;
			text-align:center;
			line-height:40px;
			transition: 1s all;
		}
		.slideitem.active{
			opacity: 1;
		}
		#slideshowcontainer{
			height:50px;
			position:relative
		}
		#slideshowcontainer:after{
			content:" ";
			display:block;
			clear:both;
		}
	</style>
</head>
<body>
	<div data-controller="slideshow" data-slideshow-index-value="1" data-slideshow-autoplay-value="yes" data-slideshow-slide-interval-value="3000">
		<button data-action="slideshow#previous"> ← </button>
		<button data-action="slideshow#next"> → </button>
		<div id="slideshowcontainer" data-action="mouseenter->slideshow#stopSlideShow mouseleave->slideshow#resumeSlideShow">
			<div class="slideitem" data-slideshow-target="slide">🐵</div>
			<div class="slideitem" data-slideshow-target="slide">🙈</div>
			<div class="slideitem" data-slideshow-target="slide">🙉</div>
			<div class="slideitem" data-slideshow-target="slide">🙊</div>
		</div>
	</div>
	<script>
		(() => {
			const application = Stimulus.Application.start();
			application.register("slideshow", class extends Stimulus.Controller {
				static values = { index:Number, slideInterval:Number, autoplay:String };
				static get targets() {
					return [ "slide" ];
				}
				connect(){
					if(this.autoplayValue==='yes'){
						this.startSlideShow();
					}
				}
				indexValueChanged(){
					this.showCurrentSlide();
				}
				next() {
					this.nextSlide();
				}
				nextSlide(){
					if(this.indexValue < (this.slideTargets.length - 1)){
						this.indexValue++;
					}else{
						this.indexValue = 0;
					}
				}
				resumeSlideShow(){
					if(this.autoplayValue==='yes'){
						this.startSlideShow();
					}
				}
				startSlideShow(){
					this.slideShowTimer = setInterval(() => {
						this.nextSlide();
					},this.slideIntervalValue);
				}
				stopSlideShow(){
					if(this.slideShowTimer){
						clearInterval(this.slideShowTimer);
					}
				}
				disconnect(){
					this.stopSlideShow();
				}
				previous() {
					if(this.indexValue > 0){
						this.indexValue--;
					}else{
						this.indexValue = this.slideTargets.length - 1;
					}
				}
				showCurrentSlide() {
					this.slideTargets.forEach((element, index) => {
						//element.hidden = index != this.indexValue;
						var isHidden = index != this.indexValue;
						if(isHidden){
							element.classList.remove('active');
						}else{
							element.classList.add('active');
						}
					})
				}
			});
		})();
	</script>
</body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<script src="https://unpkg.com/stimulus/dist/stimulus.umd.js"></script>
	<style>
	.slideitem{
	opacity: 0;
	width:0px;
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	font-size:30px;
	text-align:center;
	line-height:40px;
	transition: 1s all;
	}
	.slideitem.active{
	opacity: 1;
	}
	#slideshowcontainer{
	height:50px;
	position:relative
	}
	#slideshowcontainer:after{
	content:" ";
	display:block;
	clear:both;
	}
	</style>
	</head>
	<body>
	<div data-controller="slideshow" data-slideshow-index-value="1" data-slideshow-autoplay-value="yes" data-slideshow-slide-interval-value="3000">
	<button data-action="slideshow#previous"> ← </button>
	<button data-action="slideshow#next"> → </button>
	<div id="slideshowcontainer" data-action="mouseenter->slideshow#stopSlideShow mouseleave->slideshow#resumeSlideShow">
	<div class="slideitem" data-slideshow-target="slide">🐵</div>
	<div class="slideitem" data-slideshow-target="slide">🙈</div>
	<div class="slideitem" data-slideshow-target="slide">🙉</div>
	<div class="slideitem" data-slideshow-target="slide">🙊</div>
	</div>
	</div>
	<script>
	(() => {
	const application = Stimulus.Application.start();
	application.register("slideshow", class extends Stimulus.Controller {
	static values = { index:Number, slideInterval:Number, autoplay:String };
	static get targets() {
	return [ "slide" ];
	}
	connect(){
	if(this.autoplayValue==='yes'){
	this.startSlideShow();
	}
	}
	indexValueChanged(){
	this.showCurrentSlide();
	}
	next() {
	this.nextSlide();
	}
	nextSlide(){
	if(this.indexValue < (this.slideTargets.length - 1)){
	this.indexValue++;
	}else{
	this.indexValue = 0;
	}
	}
	resumeSlideShow(){
	if(this.autoplayValue==='yes'){
	this.startSlideShow();
	}
	}
	startSlideShow(){
	this.slideShowTimer = setInterval(() => {
	this.nextSlide();
	},this.slideIntervalValue);
	}
	stopSlideShow(){
	if(this.slideShowTimer){
	clearInterval(this.slideShowTimer);
	}
	}
	disconnect(){
	this.stopSlideShow();
	}
	previous() {
	if(this.indexValue > 0){
	this.indexValue--;
	}else{
	this.indexValue = this.slideTargets.length - 1;
	}
	}
	showCurrentSlide() {
	this.slideTargets.forEach((element, index) => {
	//element.hidden = index != this.indexValue;
	var isHidden = index != this.indexValue;
	if(isHidden){
	element.classList.remove('active');
	}else{
	element.classList.add('active');
	}
	})
	}
	});
	})();
	</script>
	</body>
	</html>