Slideshow

by onejdc

HTML

<div class="slideshow" id="demoSlideshow1" title='slideshow-container'>
	
	<div class="slidesContainer" title='slides-container'>
		<ul>
			<li>
				<div class="slide" title="first-slide">
					<img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?q=80&w=3270&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
				</div>
			</li>
			<li>
				<div class="slide">
					<img src="https://plus.unsplash.com/premium_photo-1672947568059-23e2f914eb6b?q=80&w=3190&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
					<span class='slideText'>This is some cool text about this slide</span>
				</div>
			</li>
			<li>
				<div class="slide">
					<img src="https://images.unsplash.com/photo-1532274402911-5a369e4c4bb5?q=80&w=3270&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
					<span class='slideText'>What a lovely mountain harbor. People fishing</span>
				</div>
			</li>
			<li>
				<div class="slide"></div>
			</li>
			<li>
				<div class="slide"></div>
			</li>
		</ul>
	</div>
	
	<div class="thumbs">
	</div>
	
	<div class="slideDots">
	</div>
	
	<a class="slideshowButton slideshowButtonPrevious" href="#" data-target="previous"><span>&lt;</span></a>
	<a class="slideshowButton slideshowButtonNext" href="#" data-target="next"><span>&gt;</span></a>

	
</div>

CSS

/* 
	.slideshow -- main container
	.slidesContainer -- wrapper for the slides
		ul > li > div.slide -- the wrapper for the slide
	.thumbs -- thumbnail preview
	.slideDots -- should show progrogress for the slides
	
	.slideshowButton +
		.slideshowButtonNext
		.slideshowButtonPrevious
	*/
	img { width: 500px; height: 100%;}
	#demoSlideshow1 {
		width: 1024px;
		height: 360px;
		overflow:auto;
		position: absolute;
		white-space:nowrap; /* The secret sauce! */
	}
	.slideshow {
		border: 4px solid black;
	}
	.slidesContainer * { margin:0; padding:0;}
	.slidesContainer > ul > li {display: inline; list-style-type: none; }
	.slidesContainer > ul > li > div { display:inline;}


.slideshowButton { display: block; height: 75px; width: 75px; background-color:rgba(0,0,0,.7); color:white; font-size: 24px; border-radius: 50px; text-align:center;
position:absolute;top: 40%; cursor: pointer; border: 2px solid rgba(0,0,0,.0)}
.slideshowButton > span { position:relative;top: 20px; }
.slideshowButton { text-decoration:none;border:none;}
.slideshowButtonNext { right: 0;}
.slideshowButton:hover { background-color: rgba(255,100,0,.4); border: 2px solid black;}

JavaScript

class jSlideShow {
	static slidesClass = '.slide'
	static activeSlideClass = '.activeSlide'
	
	constructor(element='.slideshow') {
		this.el = document.querySelector(element);
		this.activeSlide = '';
		this.activeSlideIndex = 0;
		this.init();
	}
	init() {
		this.slides = this.el.querySelectorAll(jSlideShow.slidesClass);
		this.slides[0].classList.add('activeSlide');
		/* this.slides[0].addClass('activeSlide') */;
		
		this.addPreviousNext();
	}
	addPreviousNext() {
		let pn = this.el.querySelectorAll('.slideshowButton');
		let _self = this;
		pn.forEach( (btn) => {
			btn.addEventListener('click',function(el) {
				el.preventDefault();
				_self.activeSlide = _self.el.querySelector(jSlideShow.activeSlideClass);
				
				let parent = _self.activeSlide.parentNode;
				_self.activeSlideIndex = Array.prototype.indexOf.call(parent.children, _self.activeSlide);
				alert(_self.activeSlideIndex);
				
				if (_self.activeSlideIndex == parent.children.length) {
					return;
				}
				
				_self.updateSlideIndex(parent);
				
				
			})
		});
	
	}
	
	updateSlideIndex(parent) {
		this.activeSlide.classList.remove(jSlideShow.activeSlideClass)
		this.activeSlideIndex++;
		this.activeSlide = this.el.child('ul').children.item(this.activeSlideIndex);
		/* this.activeSlide = parent.querySelector('li'); //.children.item(this.activeSlideIndex)
		
		console.log(parent) */
		this.activeSlide.classList.add(jSldieShow.activeSlideClass)
		console.log(this.activeSlide)
	}
	
}

window.onload = (event) => {
  t = new jSlideShow();
};