Instagram Carousel

admin1234
Jan 31, 2026 7
Live Preview

Live Editor

<div class="insta">

  <div class="slider" id="slider">
    <div class="slide"><img src="https://picsum.photos/500/500?1"></div>
    <div class="slide"><img src="https://picsum.photos/500/500?2"></div>
    <div class="slide"><img src="https://picsum.photos/500/500?3"></div>
  </div>

  <div class="dots" id="dots">
    <span class="active"></span>
    <span></span>
    <span></span>
  </div>

</div>
body{
  margin:0;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#020617;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
}

/* frame */
.insta{
  width:320px;
  background:#000;
  border-radius:22px;
  padding:14px 0 18px;
  box-shadow:0 30px 80px rgba(0,0,0,.7);
}

/* slider */
.slider{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  scroll-behavior:smooth;
}
.slider::-webkit-scrollbar{display:none}

/* slide */
.slide{
  flex:0 0 100%;
  scroll-snap-align:center;
  padding:0 14px;
}

.slide img{
  width:100%;
  height:320px;
  object-fit:cover;
  border-radius:16px;
}

/* dots */
.dots{
  display:flex;
  justify-content:center;
  gap:6px;
  margin-top:10px;
}

.dots span{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#4b5563;
  transition:.3s;
}
.dots span.active{
  background:#fff;
}
const slider = document.getElementById("slider");
const dots = document.querySelectorAll("#dots span");

slider.addEventListener("scroll", () => {
  const index = Math.round(
    slider.scrollLeft / slider.clientWidth
  );
  dots.forEach(d => d.classList.remove("active"));
  dots[index]?.classList.add("active");
});
Categories

Instagram Carousel

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
