An image slider (also called a carousel) is a great way to display multiple visuals in a compact, engaging space. Whether you’re showcasing campaign photos, testimonials, or progress snapshots, sliders help you tell a visual story interactively.
What This Slider Does
Shows a horizontal row of images, with only one image visible at a time.
Allows navigation using arrow buttons or dot indicators.
Automatically cycles through the images every few seconds.
Fully responsive and touch-friendly.
Step 1: Add the HTML Block with Slider Markup
Paste the following code into a new HTML block on your landing page:
<div class="slider-container">
<div class="slides">
<img src="IMAGE_URL_1" alt="Image 1">
<img src="IMAGE_URL_2" alt="Image 2">
<img src="IMAGE_URL_3" alt="Image 3">
<img src="IMAGE_URL_4" alt="Image 4">
</div>
<span class="prev" onclick="moveSlide(-1)">❮</span>
<span class="next" onclick="moveSlide(1)">❯</span>
</div>
<div class="dots">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
</div>
Replace the IMAGE_URL_x placeholders with your own image links. All images should have the same aspect ratio for best results. You can use CamBuildrs file manager to host the images.
Step 2: Add CSS to Style the Slider
Paste the following styles into a <style> block above or below your HTML:
<style>
.slider-container {
position: relative;
overflow: hidden;
max-width: 100%;
margin: auto;
}
.slides {
display: flex;
transition: transform 0.5s ease-in-out;
}
.slides img {
width: 100%;
height: auto;
border-radius: 30px;
}
.prev,
.next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
color: white;
padding: 10px;
cursor: pointer;
z-index: 1;
}
.prev { left: 0; }
.next { right: 0; }
.dots {
text-align: center;
padding-top: 10px;
}
.dot {
display: inline-block;
height: 10px;
width: 10px;
margin: 5px;
background-color: #bbb;
border-radius: 50%;
cursor: pointer;
}
.active {
background-color: #717171;
}
</style>
Step 3: Add JavaScript for Navigation and Autoplay
Below your HTML and CSS, paste the following script:
<script>
let slideIndex = 0;
const slides = document.querySelector('.slides');
const dots = document.querySelectorAll('.dot');
function showSlide(n) {
const totalSlides = document.querySelectorAll('.slides img').length;
slideIndex = (n + totalSlides) % totalSlides;
slides.style.transform = `translateX(${-slideIndex * 100}%)`;
dots.forEach(dot => dot.classList.remove('active'));
dots[slideIndex].classList.add('active');
}
function moveSlide(n) {
showSlide(slideIndex + n);
}
function currentSlide(n) {
showSlide(n - 1);
}
function autoSlide() {
moveSlide(1);
setTimeout(autoSlide, 3000); // Change image every 3 seconds
}
autoSlide(); // Start automatic sliding
</script>
Use Cases
Campaign photo highlights
Visual testimonials
Project phases or milestones
Product images or endorsements