html
<section class=”dmcs-wrapper”>
<div class=”dmcs-slider”>
<div class=”dmcs-slider-track”>
<div class=”dmcs-slide”><img src=”https://smmagencies.com/wp-content/uploads/2026/04/seo-300×158.jpg” /></div>
<div class=”dmcs-slide”><img src=”https://smmagencies.com/wp-content/uploads/2026/04/seo2-300×158.png” /></div>
<div class=”dmcs-slide”><img src=”https://smmagencies.com/wp-content/uploads/2026/04/simple-page-post-css-300×146.png” /></div>
</div>
<!– CONTROLS –>
<div class=”dmcs-controls”>
<button class=”dmcs-prev”>❮</button>
<div class=”dmcs-dots”></div>
<button class=”dmcs-next”>❯</button>
</div>
</div>
</section>
css
/* WRAPPER */
.dmcs-wrapper {
width: 100%;
}
/* SLIDER */
.dmcs-slider {
width: 100%;
height: 300px; /* ✅ FIX HEIGHT (important) */
overflow: hidden;
position: relative;
}
/* TRACK */
.dmcs-slider-track {
display: flex;
transition: transform 0.4s ease;
height: 100%;
}
/* SLIDE */
.dmcs-slide {
min-width: 100%;
height: 100%;
}
/* IMAGE */
.dmcs-slide img {
width: 100%;
height: 100%;
object-fit: cover; /* ✅ uniform size */
display: block;
}
/* ✅ CONTROLS FIXED */
.dmcs-controls {
position: absolute;
bottom: 10px; /* niche fix */
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 15px;
}
/* ARROWS */
.dmcs-prev,
.dmcs-next {
background: rgba(0,0,0,0.7);
color: white;
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
font-size: 18px;
cursor: pointer;
}
/* DOTS */
.dmcs-dots {
display: flex;
gap: 8px;
}
.dmcs-dot {
width: 10px;
height: 10px;
background: #ccc;
border-radius: 50%;
}
.dmcs-dot.active {
background: white;
}
/* MOBILE */
@media (max-width: 768px) {
.dmcs-slider {
height: 200px; /* mobile height */
}
}
jss
<script>
let index = 0;
const track = document.querySelector(“.dmcs-slider-track”);
const slides = document.querySelectorAll(“.dmcs-slide”);
const dotsContainer = document.querySelector(“.dmcs-dots”);
const total = slides.length;
/* DOTS CREATE */
for (let i = 0; i < total; i++) {
let dot = document.createElement(“div”);
dot.classList.add(“dmcs-dot”);
if(i === 0) dot.classList.add(“active”);
dot.onclick = () => {
index = i;
update();
};
dotsContainer.appendChild(dot);
}
const dots = document.querySelectorAll(“.dmcs-dot”);
/* UPDATE */
function update(){
track.style.transform = “translateX(-” + index * 100 + “%)”;
dots.forEach(d => d.classList.remove(“active”));
dots[index].classList.add(“active”);
}
/* NEXT */
document.querySelector(“.dmcs-next”).onclick = () => {
index = (index + 1) % total;
update();
};
/* PREV */
document.querySelector(“.dmcs-prev”).onclick = () => {
index = (index – 1 + total) % total;
update();
};
/* AUTO */
setInterval(() => {
index = (index + 1) % total;
update();
}, 2000);
</script>