Slideshow code

Slideshow code

by Boba Poshtar

HTML

<div class="slideshow slider">
	<img src="img/cat1.jpg" alt="cat 1">
	<img src="img/cat2.jpg" alt="cat 2">
	<img src="img/cat3.jpg" alt="cat 3">
	<img src="img/cat4.jpg" alt="cat 4">
</div>

<div class="no-navs slider">
	<img src="img/cat1.jpg" alt="cat 1">
	<img src="img/cat2.jpg" alt="cat 2">
	<img src="img/cat3.jpg" alt="cat 3">
	<img src="img/cat4.jpg" alt="cat 4">
</div>

<div class="no-pager slider">
	<img src="img/cat1.jpg" alt="cat 1">
	<img src="img/cat2.jpg" alt="cat 2">
	<img src="img/cat3.jpg" alt="cat 3">
	<img src="img/cat4.jpg" alt="cat 4">
</div>

<div class="no-all slider">
	<img src="img/cat1.jpg" alt="cat 1">
	<img src="img/cat2.jpg" alt="cat 2">
	<img src="img/cat3.jpg" alt="cat 3">
	<img src="img/cat4.jpg" alt="cat 4">
</div>


<section class="hey" style="padding: 60px 0 1px; background: no-repeat center center / cover;">
	<ul class="slideshow slider">
		<li>
			<h2>Slide 1</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquam autem debitis dolorem facere nemo odio sed voluptate?</p>
		</li>
		<li>
			<h2>Slide 2</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquam autem debitis dolorem facere nemo odio sed voluptate?</p>
		</li>
		<li>
			<h2>Slide 3</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquam autem debitis dolorem facere nemo odio sed voluptate?</p>
		</li>
		<li>
			<h2>Slide 4</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquam autem debitis dolorem facere nemo odio sed voluptate?</p>
		</li>
	</ul>
</section>

<script>
	(function($){
		$('.slideshow').slideshow({ duration: 2000 });
		$('.no-navs').slideshow({ navs: false });
		$('.no-pager').slideshow({ pager: false });
		$('.no-all').slideshow({ navs: false, pager: false, duration: 400 });
		
		let src = $('.slideshow').children().eq(0).attr('src');
		$('.hey').css('background-image', 'url(' + src + ')');
		let $slShow = $('.hey .slideshow');
		$slShow.on('slideChange',...

CSS

.slideshow-wrap {
	position: relative;
	margin-bottom: 200px;
}

.slider {
	position: relative;
	margin: 0 auto;
	padding: 0;
	width: 500px;
	list-style: none;
}
.slider li {
	padding: 20px 40px 40px;
	text-align: center;
	background: #fff;
	border: 1px solid silver;
}
.slider h2 {
	font-size: 40px;
}
.slider p {
	font-size: 24px;
	line-height: 1.4em;
}






.slideshow-wrap .prev,
.slideshow-wrap .next {
	position: absolute;
	top: 50%;
	margin-top: -24px;
	padding: 12px 20px;
	border: 2px solid silver;
	opacity: 0.6;
	cursor: pointer;
	background: #fff;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.slideshow-wrap .prev:hover,
.slideshow-wrap .next:hover {
	opacity: 1;
}
.slideshow-wrap .prev:active,
.slideshow-wrap .next:active {
	color: red;
	border-color: red;
}
.slideshow-wrap .prev {
	left: 30px;
}
.slideshow-wrap .next {
	right: 30px;
}





.slideshow-wrap .pager {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -60px;
	text-align: center;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.slideshow-wrap .pager span {
	display: inline-block;
	margin: 0 4px;
	padding-top: 6px;
	width: 32px;
	height: 32px;
	box-sizing: border-box;
	border: 1px solid silver;
	border-radius: 50%;
	background: #fff;
	opacity: 0.6;
	cursor: pointer;
}
.slideshow-wrap .pager span:hover {
	opacity: 1;
}
.slideshow-wrap .pager span.active,
.slideshow-wrap .pager span:active {
	color: red;
	border-color: red;
}

JavaScript

jQuery.fn.slideshow = function(options){

	let isCommand = typeof options === 'string';
	let command = isCommand ? options : null;

	let defaultOptions = {
    duration: 3000,
    navs: true,
    pager: true
  };
	options = $.extend(defaultOptions, isCommand ? null : options);

	if (isCommand) {
		this.each(function(){
			if (command === 'prev' || command === 'next') {
				toSlide($(this), command);
			}
		});
		return this;
	}
		
	this.each(function(){
		let $slider = $(this).wrap('<div class="slideshow-wrap"></div>');
		$slider.children().not(':first').hide();
		$slider.children(':first').addClass('active');
		
		if (options.pager){
			$slider.after('<p class="pager"></p>');
			let $pager = $slider.nextAll('.pager');
			$slider.children().each(function(i){
				$pager.append('<span>' + (i + 1) + '</span>');
			});
			$pager.children(':first').addClass('active');
			$pager.children().on('click', function(){
				toSlide($slider, $(this).index());
			});
			$slider.on('slideChange', function(){
				let n = $slider.children('.active').index();
				$pager.children().removeClass('active').eq(n).addClass('active');
			});
		}

		if (options.navs){
			$slider.after('<span class="prev">prev</span><span class="next">next</span>');
			$slider.nextAll('.prev, .next').on('click', function(){
				toSlide($slider, this.className);
			});
		}
				
		/* run slideshow */
		let timer_id = setTimeout(toSlide, options.duration, $slider, 'next');
		$slider.attr('data-timer', timer_id);
		
	});
	
	return this;
	
	function toSlide($slider, type){
		clearTimeout(parseInt($slider.attr('data-timer')));
		let $next = $slider.children('.active').removeClass('active').hide();
		if (typeof type === 'string') {
			$next = $next[type]();
			if ($next.length === 0) { $next = $slider.children(':' + (type === 'next' ? 'first' : 'last')); }
		} else {
			$next = $slider.children().eq(type);
		}
		$next.show().addClass('active');
		$slider.trigger('slideChange');
		let timer_id = setTimeout(toSlide,...