<!
-- Image Slider Start -->
<div class="home-slider" style="display:none;">
<div class="slider-container">
<div class="slider-item">
<img
src="https://blogger.googleusercontent.com/img/a/AVvXsEhmUbbSfNHcOtCaT6tM_WsIcFrviE
MXvlho_CFUhVj5AeVcrkJeXBCXok1AeYeBjMocbO-ztvOBr5Ae_fz2rd_YcE9-
J3SqxeZqGVl6bDnC_0R0AHCut6sqCTd9O8dzhs04v23X5oIE5SYN24BaeVIGXd-
Cboa7a_lIH607fJGH87uAjX2hndfsocypp92h" alt="Slider Image 1" />
</div>
<div class="slider-item">
<img
src="https://blogger.googleusercontent.com/img/a/AVvXsEiBQaCIOhKR_KiIEkLzHCZQk6HmvK
v5YQQfHnx6XzHAjgjVhYJ4Rwueq9aJPTuIAKhXMHNowAvrjnyMiGPM_OPUqjPLMydka6stfz0M72zPv8Wg_
HHcvI1Q1W7dktUIHi_C4Fcu3i2c6nLpfnETNKext3Lpv_3LEr_1fL2_1XSuirb3XKYwmMI5gPCfFORs=s16
00" alt="Slider Image 2" />
</div>
<div class="slider-item">
<img
src="https://blogger.googleusercontent.com/img/a/AVvXsEhkOw__oL2RBh2MmNwgsPLJUJG2b0
TGswcrpfOyiZVHyifS-_GFpMY4AwkTGjBPgs8Yr7BGR_nVsIqkY29mJPKCEdo87gwxwtdo3X7jIU0zuBRi-
oWVkbWMnroOdkF3R8Qt08i-zzsnev7oHU2rW-
pLcU2uOaMwJZti8Zb7XMMMmgfedadkB8YT29Wf5cUS=s1600" alt="Slider Image 3" />
</div>
<div class="slider-item">
<img
src="https://blogger.googleusercontent.com/img/a/AVvXsEhmUbbSfNHcOtCaT6tM_WsIcFrviE
MXvlho_CFUhVj5AeVcrkJeXBCXok1AeYeBjMocbO-ztvOBr5Ae_fz2rd_YcE9-
J3SqxeZqGVl6bDnC_0R0AHCut6sqCTd9O8dzhs04v23X5oIE5SYN24BaeVIGXd-
Cboa7a_lIH607fJGH87uAjX2hndfsocypp92h" alt="Slider Image 4" />
</div>
</div>
<style>
/* Slider Container */
.home-slider .slider-container {
position: relative;
width: 100%;
height: 300px; /* Adjusted height for a reasonable size */
overflow: hidden;
border-radius: 15px; /* Rounded corners for the container */
background-color: #000; /* Optional: Add a background color to avoid flash
during loading */
}
/* Slider Item */
.home-slider .slider-item {
display: none;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 100%; /* Position all images outside of view initially */
transition: left 1.5s ease-in-out; /* Apply sliding transition */
}
/* Show Active Slide */
.home-slider .active {
display: block;
left: 0; /* Bring the active slide into view */
transition: left 1.5s ease-in-out; /* Slide in left with transition */
}
/* Styling for Images */
.home-slider .slider-item img {
width: 100%;
height: 100%;
object-fit: cover; /* Ensures the image covers the container */
border-radius: 15px; /* Rounded corners for the image */
}
</style>
<script>
window.onload = function() {
if (window.location.pathname === '/') { // Check if it's the homepage
var sliderItems = document.querySelectorAll('.home-slider .slider-item');
var currentIndex = 0;
function showSlider() {
// Remove active class from all items
for (var i = 0; i < sliderItems.length; i++) {
sliderItems[i].classList.remove('active');
sliderItems[i].style.left = "100%"; // Reset to starting position off-
screen
}
// Add active class to the current image
sliderItems[currentIndex].classList.add('active');
sliderItems[currentIndex].style.left = "0"; // Move the active item into
view
// Move to the next image in the array
currentIndex = (currentIndex + 1) % sliderItems.length;
}
showSlider(); // Show the first slide
setInterval(showSlider, 4000); // Change slide every 4 seconds (after
transition delay)
document.querySelector('.home-slider').style.display = 'block'; // Make
slider visible
}
};
</script>
</div>
<!-- Image Slider End -->
