Slider CSS Coding
.slider {
margin-top: 40px; /* Matches header height */
position: relative;
max-width: 1400px;
height: 400px;
overflow: hidden;
margin-left: auto; /* Centers the slider */
margin-right: auto; /* Centers the slider */
margin-bottom: auto; /* Centers the slider */
border-radius: 10px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}
.slides {
display: flex;
width: 7000px; /* 1400px * 5 slides */
animation: slide 10s infinite;
}
.slide{
width: 100%;
border-radius: 10px;
position: relative; /* Ensure text-overlay positions relative to slide */
}
.slide img {
width: 1400px;
height: 400px;
object-fit: cover; /* Ensures images fill the container without distortion */
}
.text-overlay {
position: absolute;
bottom: 10px;
left: 10px;
background: rgba(0, 0, 0, 0.5);
color: white;
padding: 10px;
border-radius: 5px;
}
@keyframes slide {
0%, 20% {
transform: translateX(0);
}
25%, 45% {
transform: translateX(-1400px);
}
50%, 70% { transform: translateX(-2800px); }
75%, 95% { transform: translateX(-4200px); }
100% { transform: translateX(-5600px); }
}
