Hey everyone, welcome to the JavaScript Slider tutorial. In this tutorial, we will learn how to create a JavaScript Slider for Reviews. To build this slider, we’ll need HTML, CSS, and JavaScript. This is an intermediate-level JavaScript project.
In the era of dynamic web content, sliders play a crucial role in showcasing various elements such as testimonials, product features, or images. In this tutorial, we’ll dissect a simple yet effective reviews slider created using HTML, CSS, and JavaScript.
Let’s dive into the code to understand how it works and how each part contributes to the functionality of the slider.
Project Folder Structure:
Before we start coding, let’s create the project folder structure.
- Create a project folder named “Reviews Slider”.
- Inside the folder, add three files:
index.html,style.css, andscript.js. - Include an “img” folder for images within the project structure.
Step 1: Create the HTML Structure
Start by setting up the basic HTML structure.
<!-- Code by Get Code Snippets - https://getcodesnippets.com/ -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Slider</title>
<!-- Google Fonts for font family -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Roboto:wght@300;400;700&display=swap"
rel="stylesheet">
<!-- Bootstrap for container-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css">
<!-- Font Awesome 6 for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />
<!-- Project CSS file -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="page__wrap">
<div class="container">
<div class="review__slider">
<div class="review__item">
<div class="person__img-cont">
<img src="/img/person1.webp" alt="" class="person__img">
</div>
<h4 class="person__name">Henry</h4>
<h5 class="person__designation">Brand Developer</h5>
<p class="person__review">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque, aliquid
nostrum perferendis optio asperiores, blanditiis, laudantium quod eligendi sequi voluptatem
dignissimos ducimus aspernatur dolor incidunt autem? Voluptatibus et enim dolorum, rerum
adipisci dolorem quae ullam?</p>
</div>
<div class="slider__btns">
<button class="prev__btn"><i class="fas fa-chevron-circle-left"></i></button>
<button class="next__btn"><i class="fas fa-chevron-circle-right"></i></button>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Step 2: Style the Timer with CSS
Next, add some basic styling to make the slider visually appealing. You can customize the styles to fit your design needs.
/* Code by Get Code Snippets - https://getcodesnippets.com/ */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Roboto", sans-serif;
}
body {
overflow-x: hidden;
}
.page__wrap {
position: relative;
background-image: url(/img/slide-1.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
height: 100vh;
display: flex;
align-items: center;
}
.page__wrap:before {
position: absolute;
content: "";
background: rgba(0 0 0 / 50%);
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.review__slider {
position: relative;
}
.review__slider .review__item {
position: relative;
background: rgba(255 255 255 / 30%);
backdrop-filter: blur(10px);
padding: 32px;
border-radius: 10px;
border: 2px solid rgba(255 255 255 / 30%);
text-align: center;
box-shadow: 5px 5px 10px rgba(0 0 0 / 50%);
}
.review__item .person__img-cont {
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
margin: 0 auto 32px;
}
.review__item .person__img-cont > img {
width: 100%;
height: 100%;
object-fit: cover;
}
.review__item .person__name {
font-family: "kalam", sans-serif;
color: #eab757;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 5px;
margin: 0;
}
.review__item .person__designation {
color: #fff;
font-size: 18px;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 2px;
margin: 0 0 16px;
}
.review__item .person__review {
color: #fff;
max-width: 90%;
margin: 0 auto;
font-weight: 300;
line-height: 1.8;
}
.slider__btns {
position: absolute;
top: 50%;
transform: translate(0, -30px);
left: 0;
right: 0;
}
.slider__btns > button {
position: absolute;
background: transparent;
border: 0;
padding: 0;
}
.slider__btns > button > i {
color: #fff;
font-size: 60px;
transition: all 0.3s ease-in-out;
}
.slider__btns .prev__btn {
left: -30px;
}
.slider__btns .next__btn {
right: -30px;
}
.slider__btns > button > i:hover {
color: rgba(255 255 255 / 30%);
}
JavaScript Functionality:
Next, let’s understand the JavaScript code responsible for the slider’s functionality:
// Code by Get Code Snippets - https://getcodesnippets.com/
// Array of person reviews data
let reviews = [
{
id: 1,
title: "Henry",
job: "Brand Developer",
img: "/img/person1.webp",
text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
},
{
id: 2,
title: "Dean Jonas",
job: "Python Developer",
img: "/img/person2.webp",
text: "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).",
},
{
id: 3,
title: "Jack Loise",
job: "App Developer",
img: "/img/person3.webp",
text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
},
{
id: 4,
title: "Alvaro Morata",
job: "Web Developer",
img: "/img/person4.webp",
text: "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).",
},
{
id: 5,
title: "Mark Taylor",
job: "Assistant Manager",
img: "/img/person5.webp",
text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
},
];
// Variables to access DOM elements
const personImg = document.querySelector(".person__img");
const personName = document.querySelector(".person__name");
const personDesignation = document.querySelector(".person__designation");
const personReview = document.querySelector(".person__review");
const prevBtn = document.querySelector(".prev__btn");
const nextBtn = document.querySelector(".next__btn");
let currentItem = 0;
// Function to display the current review
function showPerson() {
const item = reviews[currentItem];
personImg.src = item.img;
personName.textContent = item.title;
personDesignation.textContent = item.job;
personReview.textContent = item.text;
}
// Event listeners for navigation buttons
nextBtn.addEventListener("click", function () {
currentItem++;
if (currentItem > reviews.length - 1) {
currentItem = 0;
}
showPerson();
});
prevBtn.addEventListener("click", function () {
currentItem--;
if (currentItem < 0) {
currentItem = reviews.length - 1;
}
showPerson();
});
Conclusion
By following these steps, you’ve created a fully functional JavaScript Slider. This Login form can be customized further to fit any website’s design and purpose. Understanding each component’s role helps in building and customizing sliders for various web projects
Feel free to modify the code to suit your specific requirements and enhance the user experience on your website!
Happy coding!