Vanilla js carousel

Developer
Drew Adams
Size
4,064 Kb
Views
16,192
  1. Vanilla js carousel Previews
  2. Vanilla js carousel HTML Codes
  3. Vanilla js carousel CSS Codes
  4. Vanilla js carousel JS Codes

How do I make an vanilla js carousel?

What is a vanilla js carousel? How do you make a vanilla js carousel? This script and codes were developed by Drew Adams on 04 October 2022, Tuesday.

Vanilla js carousel Previews
IQ Test

Vanilla js carousel - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>vanilla js carousel</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="carousel"> <div class="slides"> <div class="hero hero1"></div> </div> <div class="slides"> <div class="hero hero2"></div> </div> <div class="slides"> <div class="hero hero3"></div> </div> <a id="heroPrev" class="prev hero-nav">&#10094</a> <a id="heroNext" class="next hero-nav">&#10095</a>
</div>
<!-- end #carousel -->
<div id="heroBtnContainer" class="button-container"> <div id="heroNav0" class="hero-radio-button"></div> <div id="heroNav1" class="hero-radio-button"></div> <div id="heroNav2" class="hero-radio-button"></div>
</div> <script src="js/index.js"></script>
</body>
</html>

Vanilla js carousel - Script Codes CSS Codes

/* https://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain)
*/
/* line 6, ../scss/partials/_reset.scss */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {	margin: 0;	padding: 0;	border: 0;	font-size: 100%;	font: inherit;	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
/* line 27, ../scss/partials/_reset.scss */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {	display: block;
}
/* line 31, ../scss/partials/_reset.scss */
body {	line-height: 1; }
/* line 34, ../scss/partials/_reset.scss */
ol, ul {	list-style: none; }
/* line 37, ../scss/partials/_reset.scss */
blockquote, q {	quotes: none; }
/* line 40, ../scss/partials/_reset.scss */
blockquote:before, blockquote:after, q:before, q:after {	content: '';	content: none;
}
/* line 45, ../scss/partials/_reset.scss */
table {	border-collapse: collapse;	border-spacing: 0;
}
/* line 2, ../scss/partials/_global.scss */
html {	box-sizing: border-box;
}
/* line 5, ../scss/partials/_global.scss */
*, *:before, *:after {	box-sizing: inherit;
}
/* line 9, ../scss/partials/_global.scss */
body {	background-color: #e6e8e1;	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
/* line 14, ../scss/partials/_global.scss */
h1 {	font-size: 30px;	line-height: 0.65;
}
/* line 19, ../scss/partials/_global.scss */
h5 {	font-size: 14px;	line-height: 1.857;
}
/* line 24, ../scss/partials/_global.scss */
p {	color: rgba(58, 68, 72, 0.8);	font-size: 13px;	line-height: 1.385;	text-align: justify;
}
/* line 32, ../scss/partials/_global.scss */
.centered {	margin: 0 auto;
}
/* line 37, ../scss/partials/_global.scss */
.shadowed {	box-shadow: 0 0 8px 1px #b3b6b6;
}
#carousel .animate {	animation: animate 1s;
}
@-webkit-keyframes slide-over {	from {	opacity: 0;	}	to {	opacity: 100%;	}
}
/* line 1, ../scss/partials/_carousel.scss */
#carousel {	height: 450px;	width: 900px;	margin: 20px auto 0;	overflow: hidden;	position: relative;
}
@media (max-width: 768px) {	/* line 1, ../scss/partials/_carousel.scss */	#carousel {	height: 300px;	width: 600px;	}
}
@media (max-width: 480px) {	/* line 1, ../scss/partials/_carousel.scss */	#carousel {	height: 225px;	width: 450px;	}
}
/* line 16, ../scss/partials/_carousel.scss */
#carousel .slides {	-webkit-animation: slide-over 1s;	border: 5px solid white;	display: none;	height: 100%;	width: 100%;	position: absolute;	top: 0;	left: 0;
}
/* line 25, ../scss/partials/_carousel.scss */
#carousel .slides .hero {	height: 100%;	width: 100%;
}
/* line 29, ../scss/partials/_carousel.scss */
#carousel .slides .hero1 {	background: url("http://drewtadams.com/images/hero1.png") white;	background-size: 100% auto;
}
/* line 33, ../scss/partials/_carousel.scss */
#carousel .slides .hero2 {	background: url("http://drewtadams.com/images/hero2.png") white;	background-size: 100% auto;
}
/* line 37, ../scss/partials/_carousel.scss */
#carousel .slides .hero3 {	background: url("http://drewtadams.com/images/hero3.jpg") white;	background-size: 100% auto;
}
/* line 43, ../scss/partials/_carousel.scss */
#carousel .hero-nav {	color: white;	cursor: pointer;	font-size: 30px;	padding: 10px;	position: absolute;	top: 50%;	text-shadow: #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px;	transform: translate(0, -50%);	transition: ease-out 0.6s;	-webkit-touch-callout: none;	-webkit-user-select: none;	-moz-user-select: none;	-ms-user-select: none;	user-select: none;
}
/* line 53, ../scss/partials/_carousel.scss */
#carousel .hero-nav:hover {	background: rgba(0, 0, 0, 0.8);	transition: ease-in 0.6s;
}
/* line 58, ../scss/partials/_carousel.scss */
#carousel .prev {	left: 5px;
}
/* line 61, ../scss/partials/_carousel.scss */
#carousel .next {	right: 5px;
}
/* line 66, ../scss/partials/_carousel.scss */
.button-container {	margin: 19px auto;	text-align: center;
}
@media (max-width: 480px) {	/* line 66, ../scss/partials/_carousel.scss */	.button-container {	min-width: 450px;	}
}
/* line 73, ../scss/partials/_carousel.scss */
.button-container .hero-radio-button {	background: white;	border-top: 1px inset;	border-radius: 7.5px;	cursor: pointer;	display: inline-block;	margin-right: 5px;	height: 15px;	width: 15px;	-webkit-touch-callout: none;	-webkit-user-select: none;	-moz-user-select: none;	-ms-user-select: none;	user-select: none;
}
/* line 84, ../scss/partials/_carousel.scss */
.button-container .hero-radio-button:last-child {	margin: 0;
}
/* line 89, ../scss/partials/_carousel.scss */
.button-container .selected {	background: black;
}
/* line 1, ../scss/partials/_buttons.scss */
.radio-button {	cursor: pointer;	display: inline-block;	height: 15px;	width: 15px;
}
/* line 7, ../scss/partials/_buttons.scss */
.radio-button .selected {	background: url(../images/buttons/selected-radio.png);	height: 100%;	width: 100%;
}
/* line 13, ../scss/partials/_buttons.scss */
.radio-button .unselected {	background: url(../images/buttons/unselected-radio.png);	height: 100%;	width: 100%;
}
/* line 20, ../scss/partials/_buttons.scss */
.button {	-webkit-border-radius: 7px;	-moz-border-radius: 7px;	-ms-border-radius: 7px;	border-radius: 7px;	background: #007ad6;	height: 41px;	width: 100%;	padding: 2px;	position: relative;
}
/* line 28, ../scss/partials/_buttons.scss */
.button .glare {	-webkit-border-radius: 7px;	-moz-border-radius: 7px;	-ms-border-radius: 7px;	border-radius: 7px;	background: #40a7f4;	height: 20px;	width: 100%;
}
/* line 35, ../scss/partials/_buttons.scss */
.button .icon {	border-left: 2px solid #83beea;	height: 35px;	width: 27px;	position: absolute;	top: 3px;	right: 14px;
}
/* line 43, ../scss/partials/_buttons.scss */
.button .icon img {	margin: 4px 0 0 3px;
}
/* line 48, ../scss/partials/_buttons.scss */
.button .text {	color: white;	float: right;	font-size: 15px;	text-shadow: 0 0 2px black;	text-transform: uppercase;	position: absolute;	margin: 0 auto;	top: 15px;	left: 12px;
}
/* line 59, ../scss/partials/_buttons.scss */
.button .without-icon {	left: 21.5%;
}

Vanilla js carousel - Script Codes JS Codes

// global variables
// hero carousel
var currentIndex = 0;
var previousSlideIndex = 0;
var slides = document.getElementsByClassName('slides');
var heroPrev = document.getElementById('heroPrev');
var heroNext = document.getElementById('heroNext');
var heroNav0 = document.getElementById('heroNav0');
var heroNav1 = document.getElementById('heroNav1');
var heroNav2 = document.getElementById('heroNav2');
var heroNavBtns = document.getElementsByClassName('hero-radio-button');
// load event listeners when the DOM is loaded
document.addEventListener('DOMContentLoaded', startup());
//
function startup() {	initEventListeners();	liveSlide(currentIndex = 0);
}// end startup()
//
function initEventListeners() {	heroPrev.addEventListener('click', function() { nextSlide(-1); });	heroNext.addEventListener('click', function() { nextSlide(1); });	heroNav0.addEventListener('click', function() { liveSlide(0); });	heroNav1.addEventListener('click', function() { liveSlide(1); });	heroNav2.addEventListener('click', function() { liveSlide(2); });
}// end initEventListeners()
// determine next slide (left or right)
function nextSlide(x) {	previousSlideIndex = currentIndex;	currentIndex += x;	if(currentIndex < 0)	currentIndex = slides.length - 1;	else if(currentIndex > slides.length -1)	currentIndex = 0;	//currentIndex %= slides.length;	determineSlide();
}// end nextSlide(...)
// determine live slide
function liveSlide(x) {	previousSlideIndex = currentIndex;	currentIndex = x;	determineSlide();
}// end liveSlide()
// determine which slide to show and which nav button to be selected
function determineSlide() {	// hide previously displayed slide and deselect nav button	slides[previousSlideIndex].style.display = 'none';	heroNavBtns[previousSlideIndex].className = 'hero-radio-button';//heroNavBtns[previousSlideIndex].className.replace(' selected', '')	// display selected slide and select nav button	slides[currentIndex].style.display = 'block';	heroNavBtns[currentIndex].className += ' selected';
}// end determineSlide()
Vanilla js carousel - Script Codes
Vanilla js carousel - Script Codes
Home Page Home
Developer Drew Adams
Username drewtadams
Uploaded October 04, 2022
Rating 3
Size 4,064 Kb
Views 16,192
Do you need developer help for Vanilla js carousel?

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!

Drew Adams (drewtadams) Script Codes
Name
Multiple Choice Quiz
Amchart column graph
Text banner
Jquery to-do list
Beescientific
A lot of Alerts - Exercise
Parallax scrolling
Currency formatter
Zombie Follow - In Progress
Jquery 2d character movement
Create amazing art & images 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!