JavaScript Slideshow With Controls and pagination

Developer
Yaphi
Size
2,944 Kb
Views
44,528
  1. JavaScript Slideshow With Controls and pagination Previews
  2. JavaScript Slideshow With Controls and pagination HTML Codes
  3. JavaScript Slideshow With Controls and pagination CSS Codes
  4. JavaScript Slideshow With Controls and pagination JS Codes

How do I make an javascript slideshow with controls and pagination?

Forked from Yaphi's Pen Basic JavaScript Slideshow without jQuery.. What is a javascript slideshow with controls and pagination? How do you make a javascript slideshow with controls and pagination? This script and codes were developed by Yaphi on 18 July 2022, Monday.

JavaScript Slideshow With Controls and pagination Previews
IQ Test

JavaScript Slideshow With Controls and pagination - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>JavaScript Slideshow With Controls and pagination</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <ul id="slides"> <li class="slide showing"></li> <li class="slide"></li> <li class="slide"></li> </ul> <div class="buttons"> <button class="controls" id="previous">&lt;</button> <button class="controls" id="pause">&#10074;&#10074;</button> <button class="controls" id="next">&gt;</button> </div> <div id="pagination"> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

JavaScript Slideshow With Controls and pagination - Script Codes CSS Codes

/*
essential styles:
these make the slideshow work
*/
#slides{	position: relative;	height: 300px;	padding: 0px;	margin: 0px;	list-style-type: none;
}
.slide{	position: absolute;	left: 0px;	top: 0px;	width: 100%;	height: 100%;	opacity: 0;	z-index: 1;	-webkit-transition: opacity 1s;	-moz-transition: opacity 1s;	-o-transition: opacity 1s;	transition: opacity 1s;
}
.showing{	opacity: 1;	z-index: 2;
}
.controls{	display: none;
}
/*
non-essential styles:
just for appearance; change whatever you want
*/
.slide{	font-size: 40px;	padding: 40px;	box-sizing: border-box;	background: #333;	color: #fff; background-size: cover;
}
/* http://unrestrictedstock.com/wp-content/uploads/snowy-winter-vignette-bokeh-night-snow-falling-free-stock-photo.jpg */
.slide:nth-of-type(1){	background-color: red; background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/snowy-winter-vignette-bokeh-night-snow-falling-free-stock-photo.jpg');
}
/* http://www.dawghousedesignstudio.com/wp-content/uploads/2010/01/25/free-stock-photos-1.jpg */
.slide:nth-of-type(2){	background-color: orange; background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/free-stock-photos-1.jpg');
}
/* http://www.stockfreeimages.com/static/homepage/waterfall-free-stock-photo-244915.jpg */
.slide:nth-of-type(3){	background-color: green; background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/waterfall-free-stock-photo-244915.jpg');
}
.controls{ background: #333; color: #fff; border: none; padding: 20px 0px; font-size: 20px; cursor: pointer; border: 2px solid #fff; margin: 10px 0px 0px 10px; width: 70px;
}
.controls:hover,
.controls:focus{ background: #eee; color: #333;
}
.container{ position: relative;
}
.buttons{ position: absolute; left: 0px; top: 0px; z-index: 10; font-size: 0px;
}

JavaScript Slideshow With Controls and pagination - Script Codes JS Codes

var controls = document.querySelectorAll('.controls');
for(var i=0; i<controls.length; i++){	controls[i].style.display = 'inline-block';
}
var slides = document.querySelectorAll('#slides .slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,2000);
function nextSlide(){	goToSlide(currentSlide+1);
}
function previousSlide(){	goToSlide(currentSlide-1);
}
function goToSlide(n){	slides[currentSlide].className = 'slide';	currentSlide = (n+slides.length)%slides.length;	slides[currentSlide].className = 'slide showing';
}
var playing = true;
var pauseButton = document.getElementById('pause');
function pauseSlideshow(){	pauseButton.innerHTML = '&#9658;'; // play character	playing = false;	clearInterval(slideInterval);
}
function playSlideshow(){	pauseButton.innerHTML = '&#10074;&#10074;'; // pause character	playing = true;	slideInterval = setInterval(nextSlide,2000);
}
pauseButton.onclick = function(){	if(playing){ pauseSlideshow(); }	else{ playSlideshow(); }
};
var next = document.getElementById('next');
var previous = document.getElementById('previous');
next.onclick = function(){	pauseSlideshow();	nextSlide();
};
previous.onclick = function(){	pauseSlideshow();	previousSlide();
};
(function(){ var p = document.getElementById('pagination'); var phtml = ''; for(var i=0; i<slides.length; i++){ phtml+='<button>'+(i+1)+'</button>'; } p.innerHTML = phtml; var pbuttons = p.querySelectorAll('button'); for(var i=0; i<pbuttons.length; i++){ pbuttons[i].onclick = (function(n){ return function(){ pauseSlideshow(); goToSlide(n); }; })(i); }
})();
JavaScript Slideshow With Controls and pagination - Script Codes
JavaScript Slideshow With Controls and pagination - Script Codes
Home Page Home
Developer Yaphi
Username yaphi1
Uploaded July 18, 2022
Rating 3
Size 2,944 Kb
Views 44,528
Do you need developer help for JavaScript Slideshow With Controls and pagination?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Yaphi (yaphi1) Script Codes
Name
RequestAnimationFrame Countdown
JavaScript Slideshow With Controls
Countdown Clock with Pause and Resume
Simple JavaScript Quiz
Handmade SVG Icons
Perspective Test
JavaScript Slideshow With Pause Button
Styled JavaScript Countdown Clock
Turn HTML into JS string
RequestAnimationFrame Countdown fork
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!