Features of this Hero Slider: Responsive Design:
- Responsive Design: Works on all screen sizes
- Navigation Controls: Previous/Next buttons and dot indicators
- Auto-Sliding: Automatically transitions every 5 seconds
- Smooth Animations: Fade transitions between slides
- Content Animation: Text elements fade in when slide appears
- Interactive Elements: Hover effects on buttons and navigation
- Image Optimization: Uses object-fit: cover for proper image display
/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}
body {
overflow-x: hidden;
}
.hero {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
.slider {
width: 100%;
height: 100%;
position: relative;
}
.slide {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.slide.active {
opacity: 1;
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.slide-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: white;
width: 80%;
max-width: 800px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.slide-content h1 {
font-size: 3rem;
margin-bottom: 20px;
animation: fadeInUp 1s ease;
}
.slide-content p {
font-size: 1.2rem;
margin-bottom: 30px;
animation: fadeInUp 1.2s ease;
}
.btn {
display: inline-block;
padding: 12px 30px;
background-color: #ff6b6b;
color: white;
text-decoration: none;
border-radius: 30px;
font-weight: bold;
transition: all 0.3s ease;
animation: fadeInUp 1.4s ease;
}
.btn:hover {
background-color: #ff5252;
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.slider-nav {
position: absolute;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 20px;
z-index: 10;
}
.prev-btn, .next-btn {
background: rgba(255, 255, 255, 0.3);
border: none;
color: white;
width: 40px;
height: 40px;
border-radius: 50%;
font-size: 1.2rem;
cursor: pointer;
transition: all 0.3s ease;
}
.prev-btn:hover, .next-btn:hover {
background: rgba(255, 255, 255, 0.5);
}
.dots {
display: flex;
gap: 10px;
}
.dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: all 0.3s ease;
}
.dot.active {
background: white;
transform: scale(1.2);
}
/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Responsive Design */
@media (max-width: 768px) {
.slide-content h1 {
font-size: 2rem;
}
.slide-content p {
font-size: 1rem;
}
.btn {
padding: 10px 20px;
}
}
document.addEventListener('DOMContentLoaded', function() {
const slides = document.querySelectorAll('.slide');
const dots = document.querySelectorAll('.dot');
const prevBtn = document.querySelector('.prev-btn');
const nextBtn = document.querySelector('.next-btn');
let currentSlide = 0;
const slideCount = slides.length;
// Initialize the slider
function initSlider() {
slides[currentSlide].classList.add('active');
dots[currentSlide].classList.add('active');
}
// Go to a specific slide
function goToSlide(index) {
slides[currentSlide].classList.remove('active');
dots[currentSlide].classList.remove('active');
currentSlide = (index + slideCount) % slideCount;
slides[currentSlide].classList.add('active');
dots[currentSlide].classList.add('active');
}
// Next slide
function nextSlide() {
goToSlide(currentSlide + 1);
}
// Previous slide
function prevSlide() {
goToSlide(currentSlide - 1);
}
// Auto slide
let slideInterval = setInterval(nextSlide, 5000);
// Reset auto slide timer
function resetInterval() {
clearInterval(slideInterval);
slideInterval = setInterval(nextSlide, 5000);
}
// Event listeners
nextBtn.addEventListener('click', function() {
nextSlide();
resetInterval();
});
prevBtn.addEventListener('click', function() {
prevSlide();
resetInterval();
});
dots.forEach((dot, index) => {
dot.addEventListener('click', function() {
goToSlide(index);
resetInterval();
});
});
// Initialize the slider
initSlider();
});
Thank you for reading our blog. If you face any problem in creating this Hero Section Slider using HTML, CSS & JavaScript, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
إرسال تعليق
Thank you
Learning robo team