Smooth Image Slider in HTML, CSS and JavaScript
Website design plays a crucial role in ensuring that people pay attention to the site and remain on the page. One of the features that can help beautify any website is a smooth image slider. Well In this article, I’m going to share with you free source codes to build the Smooth Image Slider in HTML, CSS, and JS. This slider will enable you to present images in a smooth and trendy style.
GitHub Source: Smooth Image Slider
In this article, I am going to provide some insights on how developers, designers, and owners of websites can integrate a seamless image slider in a small blog or in any website projects.
Here is full tool project: Google Drive Direct Download Link Generator Tool
Features
The Smooth Image Slider has some wonderful features that are easy to implement for any type of website. Here are four standout features:
- Seamless Image Transition: The slider minimizes transition between images making the transition very pleasing to the eyes.
- Fully Responsive: Slider is also responsive meaning that the slider changes its size when the site is accessed with a tablet or a smartphone.
- Compatible with All Modern CMS: This slider is fully compatible with WordPress, Joomla or custom HTML based web interface.
- Customizable Design: Slider can be easily redesigned through CSS and JavaScript files.
Technologies Used
To build the Smooth Image Slider, following programming languages and technologies are used:
- HTML (for the formation of the slider)
- CSS (for styling the slider and making it responsive)
- JavaScript (for smooth transitions and interactions)
Such technologies make it possible to have the slider fully functional and responsive to the current browsers and devices.
Want free codes for further image sliders? Dive in now!
- Modern Image Slider
- Responsive Image Slider
- Text Overlay Image Slider
- Image Clip Animation Slider
- Image Comparison Slider
Video Guide
Here is video tutorial to design slider:
Steps to Build Card
It is quite easy to build the Smooth Image Slider in HTML, CSS, and JS. Follow these steps to create the slider:
- Create a Project Folder: The first step is to build a folder for the project. This folder will contain all the files that will make up the slider part of the site.
- Create an Images Folder: In the project folder, create a new folder named “images” and this will be the place where you will find images for the slider.
- Create an index.html File: This file will consist of HTML template of your slider.
- Create a style.css File: In the CSS file, the styling and positioning of the slider will be done so that it would look good on any device.
- Create a script.js File: This javascript file will consist of the code that will enable slider to work properly, including easy movements and any form of operation.
HTML
Here is the HTML code for your index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Title of the web page -->
<title>Smooth Image Slider - JV Source Code</title>
<!-- Link to external CSS file -->
<link rel="stylesheet" href="style.css">
<!-- Include Font Awesome CDN for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<!--
Credits: JV Codes (jvcodes.com)
Visit jvcodes.com to get more free jv source codes for your projects
-->
</head>
<body>
<!-- Main container for the image slider -->
<div class="container">
<!-- Slide container to hold individual items -->
<div class="slide">
<!-- Item 1: Mangoes -->
<div class="item" style="background-image: url(images/image-1.jpg);">
<div class="content">
<div class="name">Mangoes</div>
<div class="description">The sweet and tropical king of fruits.</div>
<button>See More</button>
</div>
</div>
<!-- Item 2: Pineapples -->
<div class="item" style="background-image: url(images/image-2.jpg);">
<div class="content">
<div class="name">Pineapples</div>
<div class="description">A juicy tropical fruit with a tangy flavor.</div>
<button>See More</button>
</div>
</div>
<!-- Item 3: Strawberries -->
<div class="item" style="background-image: url(images/image-3.jpg);">
<div class="content">
<div class="name">Strawberries</div>
<div class="description">Small, red berries with a sweet and tart taste.</div>
<button>See More</button>
</div>
</div>
<!-- Item 4: Apples -->
<div class="item" style="background-image: url(images/image-4.jpg);">
<div class="content">
<div class="name">Apples</div>
<div class="description">Crisp and refreshing, a popular everyday fruit.</div>
<button>See More</button>
</div>
</div>
<!-- Item 5: Watermelons -->
<div class="item" style="background-image: url(images/image-5.jpg);">
<div class="content">
<div class="name">Watermelons</div>
<div class="description">Large, juicy fruit perfect for a refreshing snack.</div>
<button>See More</button>
</div>
</div>
<!-- Item 6: Grapes -->
<div class="item" style="background-image: url(images/image-6.jpg);">
<div class="content">
<div class="name">Grapes</div>
<div class="description">Small, sweet or tart fruits often eaten fresh or used in wine.</div>
<button>See More</button>
</div>
</div>
</div> <!-- End of slide container -->
<!-- Navigation buttons for the slider -->
<div class="button">
<button class="prev"><i class="fa-solid fa-arrow-left"></i></button>
<button class="next"><i class="fa-solid fa-arrow-right"></i></button>
</div>
</div> <!-- End of container -->
<!-- Link to external JavaScript file -->
<script src="script.js"></script>
<!--
Credits: JV Codes (jvcodes.com)
Visit jvcodes.com to get more free source codes for your projects
-->
</body>
</html>CSS
Here is the complete code for style.css file to style the slider.
/* Global Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Body Styles */
body {
background: #eaeaea;
overflow: hidden;
}
/* Container Styles */
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 1000px;
height: 600px;
background: #f5f5f5;
box-shadow: 0 30px 50px #dbdbdb;
}
/* Slide Item Styles */
.container .slide .item {
width: 200px;
height: 300px;
position: absolute;
top: 50%;
transform: translate(0, -50%);
border-radius: 20px;
box-shadow: 0 30px 50px #505050;
background-position: 50% 50%;
background-size: cover;
display: inline-block;
transition: 0.5s;
}
/* Positioning for Slide Items */
.slide .item:nth-child(1),
.slide .item:nth-child(2) {
top: 0;
left: 0;
transform: translate(0, 0);
border-radius: 0;
width: 100%;
height: 100%;
}
.slide .item:nth-child(3) {
left: 50%;
}
.slide .item:nth-child(4) {
left: calc(50% + 220px);
}
.slide .item:nth-child(5) {
left: calc(50% + 440px);
}
/* Hide Items Beyond Certain Index */
.slide .item:nth-child(n + 6) {
left: calc(50% + 660px);
opacity: 0;
}
/* Content Inside Items */
.item .content {
position: absolute;
top: 50%;
left: 100px;
width: 300px;
text-align: left;
color: #eee;
transform: translate(0, -50%);
font-family: system-ui;
display: none;
}
/* Show Content for Specific Item */
.slide .item:nth-child(2) .content {
display: block;
}
/* Content Text Styles */
.content .name {
font-size: 40px;
text-transform: uppercase;
font-weight: bold;
opacity: 0;
color: #000;
animation: animate 1s ease-in-out 1 forwards;
}
.content .description {
margin-top: 10px;
margin-bottom: 20px;
font-weight: bold;
opacity: 0;
color: #000;
animation: animate 1s ease-in-out 0.3s 1 forwards;
}
.content button {
padding: 10px 20px;
border: none;
cursor: pointer;
font-weight: bold;
opacity: 0;
animation: animate 1s ease-in-out 0.6s 1 forwards;
}
/* Animation for Content */
@keyframes animate {
from {
opacity: 0;
transform: translate(0, 100px);
filter: blur(33px);
}
to {
opacity: 1;
transform: translate(0);
filter: blur(0);
}
}
/* Button Container Styles */
.button {
width: 100%;
text-align: center;
position: absolute;
bottom: 20px;
}
/* Individual Buttons */
.button button {
width: 40px;
height: 35px;
border-radius: 8px;
border: 1px solid #000;
cursor: pointer;
margin: 0 5px;
transition: 0.3s;
}
/* Button Hover Effect */
.button button:hover {
background: #ababab;
color: #fff;
}JavaScript
Here is the complete code for script.js file to function the slider.
// Select the 'next' and 'prev' buttons
let next = document.querySelector('.next');
let prev = document.querySelector('.prev');
// Event listener for the 'next' button
next.addEventListener('click', function() {
// Select all items in the slide
let items = document.querySelectorAll('.item');
// Move the first item to the end of the slide
document.querySelector('.slide').appendChild(items[0]);
});
// Event listener for the 'prev' button
prev.addEventListener('click', function() {
// Select all items in the slide
let items = document.querySelectorAll('.item');
// Move the last item to the beginning of the slide
document.querySelector('.slide').prepend(items[items.length - 1]);
});Download Source Code
Below is the HTML/CSS/JS source code of Smooth Image Slider, which has been provided for free download. It means that the source code is 100% free from any copyright and you are able to download all the files required for the slider – including images. You are welcome to include it in your projects.
Conclusion
To sum up, I want to say that Smooth Image Slider is one of the best and easy-to-implement code in your web page design. Save the provided source code, and it will only take you a few minutes to add a cool image slider to any website, even if you are using WordPress or even HTML based interface.
If you use this code, I would like to request to give credit to JV Source Codes by providing a link back to this website. If you have any problems with it, or ideas for changes, just let me know it in the comments section. Sounds good, I will be happy to help and don’t forget to subscribe my YouTube channel JV Codes.
Want free codes for stunning responsive cards? Dive in now!
