Pure Javascript Carousel Script
In this post i am going to share simple script to create Carousel/slider card on navigation dots click. It’ll create dots as per no. of pages and you can choose any page to move slide and landed to that particular slider slides. Useful to display news related material. or quick product carousel to navigate multiple product card in single frame.
HTML
Product Design
UI/UX, Design
Custom Website
UI/UX, Design
Digital Marketing
UI/UX, Design
Digital Marketing
UI/UX, Design
Digital Marketing
UI/UX, Design
Digital Marketing
UI/UX, Design
Digital Marketing
UI/UX, Design
Digital Marketing
UI/UX, Design
Digital Marketing
UI/UX, Design
CSS
html,
body {
height: 100%;
}
body {
background: #001d38;
font-family: "Poppins", sans-serif;
overflow: hidden;
}
.center {
align-items: center;
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
}
.wrapper {
display: flex;
grid-gap: 1em;
overflow: hidden;
width: 55em;
}
.wrapper > .inner {
display: flex;
grid-gap: 1em;
transition: all 1s ease-in-out;
}
.card {
border-radius: 0.5em;
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
}
.card > img {
border-top-right-radius: inherit;
border-top-left-radius: inherit;
display: block;
width: 17.5em;
}
.card > .content {
background: #0a2640;
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
padding: 1em;
text-align: center;
}
.card > .content > h1, .card > .content > h3 {
margin: 0.35em 0;
}
.card > .content > h1 {
color: #fff;
font-size: 1.25rem;
line-height: 1;
}
.card > .content > h3 {
color: #ccc;
font-size: 0.9rem;
font-weight: 300;
}
.map {
margin-top: 1em;
}
.map > button {
all: unset;
background: #11406c;
cursor: pointer;
margin: 0 0.125em;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border-radius: 100%;
height: 1em;
width: 1em;
}
.map > button.active:after {
background: #001d38;
content: "";
left: 50%;
position: absolute;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
top: 50%;
border-radius: 100%;
height: 0.5em;
width: 0.5em;
}
JS
const buttonsWrapper = document.querySelector(".map");
const slides = document.querySelector(".inner");
buttonsWrapper.addEventListener("click", e => {
if (e.target.nodeName === "BUTTON") {
Array.from(buttonsWrapper.children).forEach(item =>
item.classList.remove("active")
);
if (e.target.classList.contains("first")) {
slides.style.transform = "translateX(-0%)";
e.target.classList.add("active");
} else if (e.target.classList.contains("second")) {
slides.style.transform = "translateX(-33.33333333333333%)";
e.target.classList.add("active");
} else if (e.target.classList.contains('third')){
slides.style.transform = 'translatex(-66.6666666667%)';
e.target.classList.add('active');
}
}
});
See live demo and download source code.
DEMO | DOWNLOAD
This awesome script developed by Jake_Woods. Visit their official repository for more information and follow for future updates.
