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
= "center">
= "wrapper">
= "inner">
= "card">
![]() = "https://colorlib.com/preview/theme/seogo/img/case_study/1.png">
="content">
>
>UI/UX, Design>
>
>
= "card">
![]() = "https://colorlib.com/preview/theme/seogo/img/case_study/2.png">
="content">
>
>UI/UX, Design>
>
>
= "card">
![]() = "https://colorlib.com/preview/theme/seogo/img/case_study/3.png">
="content">
>
>UI/UX, Design>
>
>
= "card">
![]() = "https://colorlib.com/preview/theme/seogo/img/case_study/1.png">
="content">
>
>UI/UX, Design>
>
>
= "card">
![]() = "https://colorlib.com/preview/theme/seogo/img/case_study/2.png">
="content">
>
>UI/UX, Design>
>
>
= "card">
![]() = "https://colorlib.com/preview/theme/seogo/img/case_study/3.png">
="content">
>
>UI/UX, Design>
>
>
= "card">
![]() = "https://colorlib.com/preview/theme/seogo/img/case_study/1.png">
="content">
>
>UI/UX, Design>
>
>
= "card">
![]() = "https://colorlib.com/preview/theme/seogo/img/case_study/2.png">
="content">
>
>UI/UX, Design>
>
>
= "card">
![]() = "https://colorlib.com/preview/theme/seogo/img/case_study/3.png">
="content">
>
>UI/UX, Design>
>
>
>
>
="map">
<button class="active first">>
<button class="second">>
<button class="third">>
>
|
![]("https://colorlib.com/preview/theme/seogo/img/case_study/1.png")
UI/UX, Design
![]("https://colorlib.com/preview/theme/seogo/img/case_study/2.png")
UI/UX, Design
![]("https://colorlib.com/preview/theme/seogo/img/case_study/3.png")
UI/UX, Design
UI/UX, Design
UI/UX, Design
UI/UX, Design
UI/UX, Design
UI/UX, Design
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;
}
|
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');
}
}
});
|
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.
This awesome script developed by Jake_Woods. Visit their official repository for more information and follow for future updates.
Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.
Related
