Very Easy Code for Hero Slider , Image slider code
Very Easy Code for Hero Slider , Image slider code. This code To use the image slider code, follow these steps:
Copy and paste the HTML code into your HTML file, Its important for making any necessary changes to the file names and directory paths of the images.
HTML Code – Hero slider
<div class=”slider-container”>
<div class=”slider”>
<img src=”image1.jpg” alt=”Image 1″>
<img src=”image2.jpg” alt=”Image 2″>
<img src=”image3.jpg” alt=”Image 3″>
</div>
<div class=”dots-container”>
<span class=”dot”></span>
<span class=”dot”></span>
<span class=”dot”></span>
</div>
</div>
Copy CSS code and paste the CSS code into your CSS file or use for inline css, inside a style tag in your HTML file.
CSS Code
.slider-container {
position: relative;
}
.slider {
display: flex;
width: 100%;
}
.slider img {
width: 100%;
height: auto;
}
.dots-container {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.dot {
height: 10px;
width: 10px;
margin: 0 5px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.3s ease;
}
.dot.active {
background-color: #717171;
}
And Add the jQuery library to your project by including the following link in the head section as well as the footer section and above the JScript code of your HTML file.
jQuery library CDN
<script src=”https://code.jquery.com/jquery-3.6.0.min.js”></script>
JavaScript code:
$(document).ready(function() {
let slideIndex = 0;
showSlides(slideIndex);
$(‘.dot’).click(function() {
slideIndex = $(this).index();
showSlides(slideIndex);
});
function showSlides(index) {
let slides = $(‘.slider img’);
let dots = $(‘.dot’);
if (index < 0) {
index = slides.length – 1;
}
if (index >= slides.length) {
index = 0;
}
slides.hide();
slides.eq(index).fadeIn(500);
dots.removeClass(‘active’);
dots.eq(index).addClass(‘active’);
slideIndex = index;
setTimeout(function() {
showSlides(slideIndex + 1);
}, 5000); // Change image every 5 seconds
}
});
The HTML code creates a container for the slider and its dots. The CSS code styles the container and its elements, including the images and dots.
The JavaScript code creates a function to handle the slideshow, sets up click events for the dots to navigate manually, and initializes the slideshow when the page loads.
You can customize the Easy Code for Hero Slider by changing the image file names, container size and styling, dot color and spacing, and slideshow timing. The JavaScript code is commented to help you understand how it works and what you can modify. Check careehills for more information.