/*CSS Code */
<style>
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.slider-container {
width: 100%;
max-width: 800px;
height: 400px;
margin: 0 auto;
border-radius: 12px;
overflow: hidden;
position: relative;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.slider {
display: flex;
height: 100%;
transition: transform 0.5s ease-in-out;
}
.slide {
min-width: 100%;
height: 100%;
position: relative;
}
.slide::after {
position: absolute;
content: "";
bottom: 0;
left: 0;
width: 100%;
height: 50%;
background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.7));
}
.slide-content {
position: absolute;
bottom: 40px;
left: 40px;
color: #fff;
z-index: 2;
font-family: "Inter", sans-serif;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.slide-title {
font-size: 32px;
margin: 0;
font-weight: 600;
opacity: 0;
animation: fadeInUp 0.8s ease-out forwards;
animation-delay: 0.3s;
}
.slide-description {
font-size: 18px;
margin: 8px 0;
opacity: 0;
animation: fadeInUp 0.8s ease-out forwards;
animation-delay: 0.5s;
}
.slider-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
width: 48px;
height: 48px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s ease;
cursor: pointer;
}
.slider-arrow:hover {
background: rgba(255, 255, 255, 0.3);
}
.slider-arrow svg {
width: 30px;
color: #fff;
display: flex;
}
.prev {
left: 20px;
}
.next {
right: 20px;
}
/* Navigation dots */
.slider-nav {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 2;
}
.nav-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: all 0.3s ease;
}
.nav-dot.active {
background: #fff;
transform: scale(1.2);
}
</style>
/*HTML Code*/
<div class="slider-container">
<div class="slider">
<div class="slide active">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiukoqOYHiSy8-2-QiaH4QU8N6wgtY_zUFHXF__-ki5fZxClWQxUKoNz-mcgC5v7Oy2ArH4NI2363t_8mdkgbyQ2us5LCRsZnWa3VGUArq7UcXXIFeiqd0mm-n1S6QCrZgc7Y1IPOQNFVploBzYq8CrtfGjAQF7zBGdpF_AAkiDFWmIRNNuofnN0_v2qjrz/s1600/pexels-plann-2999237-4549414.jpg" alt="" />
<div class="slide-content">
<h2 class="slide-title">APR Goat Farm & Cattle Feed</h2>
<p class="slide-description">
Please reach our us for more details - 8489257126.
</p>
</div>
</div>
<div class="slide">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTAaADFpm5cZDGs1sZtESnfxdC5qHsflhcKZllPJlm2_UuQs0ZbIZLv8uemYAAIY6WONbfIlK7y-4Hc7rItbOgTmynPPJPgR_LeTjgH7D2iHaBe1jQ6l1ecb3fokEb0HL7NeNIY3gfemmUOuUZGDuWbhK9Obuay8uq2u5zMqNcwMBbSo015u6TdXVbChYE/s1600/WhatsApp%20Image%202024-11-16%20at%202.20.01%20PM.jpeg" alt="" />
<div class="slide-content">
<h2 class="slide-title">Salem Black Goat</h2>
<p class="slide-description">Please reach our us for more details - 8489257126</p>
</div>
</div>
<div class="slide">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_h2uUnwnDUZwKvxtbOBqlFytV2d9-zN1RuS8DxbpLb6RghOJt0e47DPFxRK5z-FnoS7bcDleL-9xW6Tc4dkhFpfgth7_EYdIAxYIkGghxIOqwaaHkBOFgTU5twDB2gMpQ2kH4JFLvx5Mdp_zGodCiyTyezMjyFlxLglqL0xVR-0QLNVECrTl2Vx3VfD3y/s1600/pexels-pixabay-416179.jpg" alt="" />
<div class="slide-content">
<h2 class="slide-title">Mechari Semmari</h2>
<p class="slide-description">
Please reach our us for more details - 8489257126
</p>
</div>
</div>
<div class="slide">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtN24UAU-eRDnjxCv9yIbQRUrBdwAlp7McyXV10yP4HHbsXMCUEfaRXN9sBzBwgCriEWk9OB1WnGRWDfxFHZsN547UXrSInFEDf7bKJX5V1FdfTU_7g1eMIl00mAEOKRy0mFV1Ss_IEsLATpOUhN-JVTTm_pTgaqTfwX6Csfr511TdXE7ZK7CCkpBWlepC/s1600/hand.jpg" alt="" />
<div class="slide-content">
<h2 class="slide-title">Thalacheri + boyar</h2>
<p class="slide-description">Please reach our us for more details - 8489257126</p>
</div>
</div>
</div>
<div class="slider-nav"></div>
<div class="slider-arrow prev">
<span class="arrow-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.75 19.5 8.25 12l7.5-7.5"
/>
</svg>
</span>
</div>
<div class="slider-arrow next">
<span class="arrow-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m8.25 4.5 7.5 7.5-7.5 7.5"
/>
</svg>
</span>
</div>
</div>
/*Java Script */
<Script>
const slides = document.querySelectorAll(".slide");
const sliderNav = document.querySelector(".slider-nav");
const slider = document.querySelector(".slider");
const prevBtn = document.querySelector(".prev");
const nextBtn = document.querySelector(".next");
let currentSlide = 0;
let slideCount = slides.length;
let intervalId = null;
slides.forEach((_, index) => {
const dot = document.createElement("div");
dot.classList.add("nav-dot");
if (index === 0) dot.classList.add("active");
dot.addEventListener("click", () => {
goToSlide(index);
});
sliderNav.appendChild(dot);
});
const dots = document.querySelectorAll(".nav-dot");
function updateDots() {
dots.forEach((dot, index) => {
dot.classList.toggle("active", index === currentSlide);
});
}
function goToSlide(index) {
currentSlide = (index + slideCount) % slideCount;
slider.style.transform = `translateX(-${currentSlide * 100}%)`;
resetAnimation(slides[currentSlide]);
updateDots();
}
function resetAnimation(slide) {
const content = slide.querySelector(".slide-content");
if (content) {
const clone = content.cloneNode(true);
content.parentNode.replaceChild(clone, content);
}
}
function startAutoAdvance() {
if (!intervalId) {
intervalId = setInterval(handleNextSlide, 5000);
}
}
function stopAutoAdvance() {
clearInterval(intervalId);
intervalId = null;
}
startAutoAdvance();
slider.addEventListener("mouseenter", stopAutoAdvance);
slider.addEventListener("mouseleave", startAutoAdvance);
function handleNextSlide() {
stopAutoAdvance();
goToSlide(currentSlide + 1);
startAutoAdvance();
}
function handlePrevSlide() {
stopAutoAdvance();
goToSlide(currentSlide - 1);
startAutoAdvance();
}
prevBtn.addEventListener("click", handlePrevSlide);
nextBtn.addEventListener("click", handleNextSlide);
</Script>
0 Comments