Slider
.homepage-slider {
position: relative;
width: 100%;
overflow: hidden;
max-height: 400px; /* Adjust height as needed */
}
.slider {
display: flex;
transition: transform 0.5s ease;
width: 300%; /* 100% x number of slides */
}
.slide {
min-width: 100%;
box-sizing: border-box;
}
.slide img {
width: 100%;
height: auto;
object-fit: cover;
}
/* Navigation Arrows */
button.prev, button.next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.5);
color: white;
border: none;
padding: 10px;
cursor: pointer;
z-index: 10;
}
button.prev { left: 10px; }
button.next { right: 10px; }
/* Mobile Friendly */
@media (max-width: 768px) {
.homepage-slider {
max-height: 250px;
}
button.prev, button.next {
padding: 6px;
}
}
let currentSlide = 0;
function moveSlide(direction) {
const slides = document.querySelector(‘.slider’);
const totalSlides = document.querySelectorAll(‘.slide’).length;
currentSlide += direction;
if (currentSlide < 0) {
currentSlide = totalSlides - 1;
} else if (currentSlide >= totalSlides) {
currentSlide = 0;
}
const offset = currentSlide * -100;
slides.style.transform = translateX(${offset}%);
}
// Optional: Auto-Slide every 5 seconds
setInterval(() => moveSlide(1), 5000);
function enqueue_homepage_slider_assets() {
if (is_front_page()) {
wp_enqueue_style(‘homepage-slider-css’, get_template_directory_uri() . ‘/slider.css’);
wp_enqueue_script(‘homepage-slider-js’, get_template_directory_uri() . ‘/slider.js’, array(), false, true);
}
}
add_action(‘wp_enqueue_scripts’, ‘enqueue_homepage_slider_assets’);
