Instagram Story Carousel

admin1234
Jan 31, 2026 10
Live Preview

Live Editor

<!-- STORY ROW -->
<div class="stories">
  <div class="story" onclick="openStory(0)">
    <div class="ring"><img src="https://picsum.photos/200?1"></div>
    <span>Alex</span>
  </div>
  <div class="story" onclick="openStory(1)">
    <div class="ring"><img src="https://picsum.photos/200?2"></div>
    <span>Sam</span>
  </div>
  <div class="story" onclick="openStory(2)">
    <div class="ring"><img src="https://picsum.photos/200?3"></div>
    <span>Chris</span>
  </div>
</div>

<!-- VIEWER -->
<div class="viewer" id="viewer" onclick="nextStory()">
  <div class="progress"><span id="bar"></span></div>
  <img id="storyImg">
</div>
*{box-sizing:border-box}
body{
  margin:0;
  background:#020617;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  color:#fff;
}

/* story row */
.stories{
  display:flex;
  gap:14px;
  padding:16px;
  overflow-x:auto;
}
.stories::-webkit-scrollbar{display:none}

/* story circle */
.story{
  text-align:center;
  cursor:pointer;
}
.ring{
  width:72px;
  height:72px;
  border-radius:50%;
  padding:3px;
  background:linear-gradient(45deg,#f97316,#ec4899,#8b5cf6);
}
.ring img{
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
  border:3px solid #020617;
}
.story span{
  font-size:12px;
  opacity:.8;
}

/* viewer */
.viewer{
  position:fixed;
  inset:0;
  background:#000;
  display:none;
  flex-direction:column;
}
.viewer.active{display:flex}

/* progress */
.progress{
  height:3px;
  background:rgba(255,255,255,.2);
}
.progress span{
  display:block;
  height:100%;
  width:0;
  background:#fff;
}

/* image */
.viewer img{
  flex:1;
  width:100%;
  object-fit:cover;
}
const images = [
  "https://picsum.photos/600/900?1",
  "https://picsum.photos/600/900?2",
  "https://picsum.photos/600/900?3"
];

let index = 0, timer;

function openStory(i){
  index = i;
  document.getElementById("viewer").classList.add("active");
  playStory();
}

function playStory(){
  clearTimeout(timer);
  const bar = document.getElementById("bar");
  const img = document.getElementById("storyImg");
  img.src = images[index];
  bar.style.width = "0";
  setTimeout(()=>bar.style.width="100%",50);

  timer = setTimeout(nextStory, 4000);
}

function nextStory(){
  index++;
  if(index >= images.length){
    document.getElementById("viewer").classList.remove("active");
    return;
  }
  playStory();
}
Categories

Instagram Story Carousel

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
