project preview
Folder Structure:
- First we will need to create our main folder for our project
- Inside we will create another for our slider images
- Then we will create our index.html, style.css, and script.js files
- At last we will link css and js files in html
Introduction:
This project is an image slider built using HTML, CSS, and JavaScript, designed to showcase multiple images with interactive controls. The slider allows users to click on transparent buttons overlaying each image, triggering animations that scale and highlight the selected image. The slider also moves horizontally based on the selected image, creating a smooth transition effect.
HTML Code
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Slider</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="image-slider">
<div class="slide-div">
<img src="images/img1.jpg" alt="image1" class="img">
<a href="#" class="button"></a>
</div>
<div class="slide-div">
<img src="images/img2.jpg" alt="image2" class="img">
<a href="#" class="button"></a>
</div>
<div class="slide-div">
<img src="images/img3.jpg" alt="image3" class="img">
<a href="#" class="button"></a>
</div>
<div class="slide-div">
<img src="images/img4.jpg" alt="image4" class="img">
<a href="#" class="button"></a>
</div>
<div class="slide-div">
<img src="images/img5.jpg" alt="image5" class="img">
<a href="#" class="button"></a>
</div>
<div class="slide-div">
<img src="images/img6.jpg" alt="image6" class="img">
<a href="#" class="button"></a>
</div>
<div class="slide-div">
<img src="images/img7.jpg" alt="image7" class="img">
<a href="#" class="button"></a>
</div>
</div>
</div>
</body>
</html>
...
Explanation:
In the <body>, the entire content is wrapped inside a div with the class "wrapper", which serves as a parent container that holds the slider and centers it on the page.
Inside the wrapper, the main image slider is defined by a div with the class "image-slider", which acts as a flexible container to hold individual slide elements.
Each image in the slider is placed inside a div with the class "slide-div", which groups an <img> tag and an empty anchor tag (<a>). The <img> tag contains the src attribute that links to the image files, and the alt attribute provides alternate text for accessibility and SEO.
The empty <a> tag, with the class "button", serves as an invisible clickable area overlaying each image. While it doesn’t contain a URL or text, this anchor tag is styled later in CSS and JavaScript to act as an interactive element, enabling the slider’s functionality when clicked.
CSS Code:
...
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
display: grid;
height: 100%;
place-items: center;
overflow: hidden;
background: linear-gradient(to right, rgb(255, 65, 100), rgb(255, 75, 43));
}
.wrapper {
width: 80%;
/* Reduced size of wrapper */
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.image-slider {
width: 100%;
height: 600px;
position: absolute;
left: 0;
display: flex;
justify-content: center;
align-items: center;
transition: 0.7s ease;
}
.slide-div {
display: flex;
align-items: center;
justify-content: center;
margin: 0 20px;
}
img {
position: relative;
width: 150px;
height: 220px;
/* Adjust height proportionally */
object-fit: cover;
/* Fit the image properly */
transition: 0.5s;
filter: saturate(10%);
}
.button {
position: absolute;
width: 150px;
height: 220px;
transition: 0.5s;
background-color: rgba(0, 0, 0, 0.4);
}
.button:hover {
background-color: rgba(0, 0, 0, 0.2);
}
@media (max-width: 768px) {
img,
.button {
width: calc(150px * 0.7);
height: calc(220px * 0.7);
}
}
@media (max-width: 480px) {
img,
.button {
width: calc(150px * 0.5);
height: calc(220px * 0.5);
}
}
..
Explanation:
It begins with a universal selector (`*`), which applies `padding: 0`, `margin: 0`, and `box-sizing: border-box` to reset default browser styles and ensure consistent spacing across all elements.
The `html, body` selectors define a full-height grid layout that centers the content both vertically and horizontally (`place-items: center`) while applying a linear gradient background transitioning from pink to red for a modern aesthetic.
The `.wrapper` class, which contains the image slider, is given a width of `80%` and uses `overflow: hidden` to prevent any content from spilling outside its boundaries, while `display: flex` and `justify-content: center` keep the content aligned centrally.
The `.image-slider` class is styled with `position: absolute`, allowing it to be positioned freely within the wrapper, with a defined height of `600px` to maintain uniformity. The `left: 0` property ensures it starts from the left, while `transition: 0.7s ease` provides a smooth sliding animation when the slider moves.
The `.slide-div` class aligns each slide element centrally using `display: flex` and applies `margin: 0 20px` to space the slides evenly. The `img` selector is styled with fixed dimensions (`width: 150px`, `height: 220px`) and uses `object-fit: cover` to ensure that the images are cropped proportionally without distortion.
Additionally, the images are initially desaturated with `filter: saturate(10%)` and have a `transition: 0.5s` applied to enable smooth scaling and color transitions when hovered or clicked.
The `.button` class is styled as an overlay by positioning it absolutely on top of the images, matching their dimensions, and using `background-color: rgba(0, 0, 0, 0.4)` to create a semi-transparent dark layer. This overlay is made interactive by transitioning the background color on hover (`.button:hover`) to a lighter shade (`rgba(0, 0, 0, 0.2)`), enhancing the user experience.
JavaScript Code:
...
document.addEventListener('DOMContentLoaded', () => {
// Get all buttons and images
const buttons = document.querySelectorAll('.button');
const images = document.querySelectorAll('.img');
const imageSlider = document.querySelector('.image-slider');
buttons.forEach((button, index) => {
button.addEventListener('click', (e) => {
e.preventDefault();
// Reset all images and buttons to default state
images.forEach(img => {
img.style.transform = 'scale(1)';
img.style.filter = 'saturate(10%)';
});
buttons.forEach(btn => {
btn.style.backgroundColor = 'rgba(0, 0, 0, 0.4)';
});
// Scale the clicked image
images[index].style.transform = 'scale(1.3)';
images[index].style.filter = 'saturate(100%)';
// Remove background color from the clicked button
button.style.backgroundColor = 'transparent';
// Move the image-slider based on which button is clicked
switch (index) {
case 0:
imageSlider.style.left = '70%';
break;
case 1:
imageSlider.style.left = '50%';
break;
case 2:
imageSlider.style.left = '25%';
break;
case 3:
imageSlider.style.left = '0%';
break;
case 4:
imageSlider.style.left = '-25%';
break;
case 5:
imageSlider.style.left = '-50%';
break;
case 6:
imageSlider.style.left = '-70%';
break;
}
});
});
});
...
Explanation:
The script starts by listening for the `DOMContentLoaded` event to ensure the DOM is fully loaded before executing the code. It then selects all elements with the class `.button`, `.img`, and the `.image-slider` container for manipulation. Each button, which overlays an image, is assigned an event listener that triggers on click.
When a button is clicked, the script first prevents the default anchor behavior with `e.preventDefault()`.
It then resets the styles of all images and buttons to their default states, ensuring that any previously highlighted images are scaled back to normal and their colors desaturated. Simultaneously, the background color of all buttons is set to a semi-transparent dark color.
The script then scales up the clicked image and restores its saturation to highlight it, while making the background color of the clicked button transparent to indicate selection.
Finally, the script calculates the new position for the `.image-slider` container based on the index of the clicked button, shifting it horizontally to bring the corresponding image to the center. This dynamic positioning uses a switch case to adjust the `left` property of the slider, ensuring smooth and precise alignment of the selected image within the viewable area. The use of dynamic calculations for image positioning and scaling ensures a responsive and engaging user experience.
Source Code:
Download “Image-Slider-in-JavaScript.zip” Image-Slider-in-JavaScript.zip – Downloaded 16 times – 10.37 MB
Conclusions:
The HTML structure sets up a clean layout for displaying images with clickable buttons, while CSS provides styling and smooth transitions, enhancing the visual appeal. The JavaScript functionality ensures responsive behavior by managing image scaling and slider movement based on user interactions. This approach creates a visually engaging slider that adapts seamlessly to different screen sizes and user inputs. Overall, the project demonstrates a well-rounded implementation of web technologies to achieve an aesthetically pleasing and functional component for any website.
