Responsive Carousel in Vanilla JS (No Libraries)

Developer
Adam Grayson
Size
2,898 Kb
Views
30,360
  1. Responsive Carousel in Vanilla JS (No Libraries) Previews
  2. Responsive Carousel in Vanilla JS (No Libraries) HTML Codes
  3. Responsive Carousel in Vanilla JS (No Libraries) CSS Codes
  4. Responsive Carousel in Vanilla JS (No Libraries) JS Codes

How do I make an responsive carousel in vanilla js (no libraries)?

Uses CSS3 for animations. It's just better that way.. What is a responsive carousel in vanilla js (no libraries)? How do you make a responsive carousel in vanilla js (no libraries)? This script and codes were developed by Adam Grayson on 06 November 2022, Sunday.

Responsive Carousel in Vanilla JS (No Libraries) Previews
IQ Test

Responsive Carousel in Vanilla JS (No Libraries) - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Carousel in Vanilla JS (No Libraries)</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="carousel"> <div class="carousel-viewport"> <ul> <li> <div class="sized-container"> <h1>Carousel Page 1</h1> </div> </li> <li> <div class="sized-container"> <h1>Carousel Page 2</h1> </div> </li> <li> <div class="sized-container"> <h1>Carousel Page 3</h1> </div> </li> <li> <div class="sized-container"> <h1>Carousel Page 4</h1> </div> </li> <li> <div class="sized-container"> <h1>Carousel Page 5</h1> </div> </li> </ul> </div> <div class="carousel-pagination"> <ul></ul> </div> <div class="carousel-previous"></div> <div class="carousel-next"></div>
</div> <script src="js/index.js"></script>
</body>
</html>

Responsive Carousel in Vanilla JS (No Libraries) - Script Codes CSS Codes

* { box-sizing: border-box;
}
h1 { color: #FFFFFF; font-size: 48px; line-height: 54px; text-align: center; font-family: 'TrebuchetMS', trebuchet, sans-serif; top: 50%; left: 50%; position: absolute; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
.sized-container { width: 90%; height: 100%; margin: 0 auto; max-width: 960px; position: relative; border-left: 1px solid white; border-right: 1px solid white;
}
.carousel { width: 100%; position: relative;
}
.carousel .carousel-viewport { width: 100%; overflow: hidden;
}
.carousel .carousel-viewport ul { left: 0; width: 100%; overflow: hidden; position: relative;
}
.carousel .carousel-viewport ul.animate { -webkit-transition: 0.3s all; transition: 0.3s all;
}
.carousel .carousel-viewport ul li { float: left; width: 100%; height: 500px;
}
.carousel .carousel-viewport ul li:nth-child(1) { background-color: #2682D5;
}
.carousel .carousel-viewport ul li:nth-child(2) { background-color: #33CBE0;
}
.carousel .carousel-viewport ul li:nth-child(3) { background-color: #DC3964;
}
.carousel .carousel-viewport ul li:nth-child(4) { background-color: #EC7547;
}
.carousel .carousel-viewport ul li:nth-child(5) { background-color: #FFD728;
}
.carousel .carousel-pagination ul { bottom: 4px; width: 100%; text-align: center; position: absolute;
}
.carousel .carousel-pagination ul li { width: 10px; height: 10px; margin: 0 4px; border-radius: 50%; -webkit-transition: 0.3s all; transition: 0.3s all; display: inline-block; border: 1px solid #FFFFFF;
}
.carousel .carousel-pagination ul li.active { border: 5px solid #FFFFFF;
}
.carousel .carousel-pagination ul li:first-child { margin-left: 0;
}
.carousel .carousel-pagination ul li:last-child { margin-right: 0;
}
.carousel .carousel-previous,
.carousel .carousel-next { top: 50%; width: 40px; height: 40px; cursor: pointer; border-radius: 50%; position: absolute; -webkit-transform: translateY(-50%); transform: translateY(-50%);
}
.carousel .carousel-previous { left: 8px; background-image: url(http://adamgraysondsgn.com/images/leftArrow.svg);
}
.carousel .carousel-next { right: 8px; background-image: url(http://adamgraysondsgn.com/images/rightArrow.svg);
}

Responsive Carousel in Vanilla JS (No Libraries) - Script Codes JS Codes

var carousel = document.querySelector('.carousel'), carouselList = document.querySelector('.carousel-viewport ul') carouselItems = document.querySelectorAll('.carousel-viewport ul li'), carouselLength = carouselItems.length, paginationList = document.querySelector('.carousel-pagination ul'), carouselPrevious = document.querySelector('.carousel .carousel-previous'), carouselNext = document.querySelector('.carousel .carousel-next'), currentPage = 0, fps = 60/1000;
function sizeCarouselElements () { var windowWidth = window.innerWidth; carouselList.style.width = windowWidth * carouselLength + 'px'; for(var i = 0; i < carouselLength; i++) carouselItems[i].style.width = windowWidth + 'px';
}
function generateCarouselPagination () { for(var i = 0; i < carouselLength; i++) { var paginationItem = document.createElement('li'); paginationList.appendChild(paginationItem); } paginationList.firstChild.className = 'active';
}
function updateCarouselPagination () { var paginationChildren = paginationList.childNodes; for(var i = 0; i < paginationChildren.length; i++) paginationChildren[i].className = ''; paginationChildren[currentPage].className = 'active';
}
function handleCarouselPreviousClicked () { if (currentPage <= 0) return; currentPage--; animateViewToCurrentPage(); updateCarouselPagination();
}
function handleCarouselNextClicked () { if (currentPage >= carouselLength - 1) return; currentPage++; animateViewToCurrentPage(); updateCarouselPagination();
}
function setViewToCurrentPage () { carouselList.className = ''; carouselList.style.left = -(window.innerWidth * currentPage) + 'px';
}
function animateViewToCurrentPage () { carouselList.className = 'animate'; carouselList.style.left = -(window.innerWidth * currentPage) + 'px';
}
sizeCarouselElements();
generateCarouselPagination();
window.addEventListener('resize', sizeCarouselElements);
window.addEventListener('resize', setViewToCurrentPage);
carouselPrevious.addEventListener('click', handleCarouselPreviousClicked);
carouselNext.addEventListener('click', handleCarouselNextClicked);
Responsive Carousel in Vanilla JS (No Libraries) - Script Codes
Responsive Carousel in Vanilla JS (No Libraries) - Script Codes
Home Page Home
Developer Adam Grayson
Username agrayson
Uploaded November 06, 2022
Rating 3
Size 2,898 Kb
Views 30,360
Do you need developer help for Responsive Carousel in Vanilla JS (No Libraries)?

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!

Adam Grayson (agrayson) Script Codes
Name
Form Progress Bar
Custom Event Policing
Responsive square grid in pure CSS
Sliding Lines Animation
Custom Select Element
Circle Progression Plugin
Random Weapon Generator
Dynamic circle menus with SASS
SVG Animation - Circle Fill
Responsive Carousel
Create amazing blog posts 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!