<Code>
<style>
.stories-container {
display: flex;
background: #fff;
box-shadow: 0 3px 24px -8px rgba(0, 0, 0, 0.3);
width: 640px;
margin: 0 auto;
padding: 20px 36px;
border-radius: 8px;
gap: 48px;
overflow: hidden;
overflow-x: scroll;
box-sizing: border-box;
}
.stories-container .content img {
height: 90px;
width: 90px;
border-radius: 50%;
object-fit: cover;
z-index: 300;
position: relative;
vertical-align: middle;
}
.stories-container .content {
position: relative;
cursor: pointer;
flex-shrink: 0;
}
.stories-container .content::before {
content: "";
height: 98px;
width: 98px;
background: #fff;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 101;
}
.stories-container .content::after {
content: "";
height: 106px;
width: 106px;
background: linear-gradient(#dd2a7b, #f58529);
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 100;
}
.story-full {
background: #222;
position: fixed;
left: 0;
top: 0;
height: 100vh;
width: 100%;
z-index: 500;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: all 100ms ease;
}
.story-full.active {
opacity: 1;
pointer-events: auto;
}
.story-full .close-btn {
position: fixed;
right: 32px;
top: 32px;
width: 32px;
cursor: pointer;
}
.story-full .content .left-arrow,
.story-full .content .right-arrow {
width: 60px;
cursor: pointer;
}
.story-full .content {
height: 100%;
display: flex;
align-items: center;
position: relative;
}
.story-full img {
height: 90%;
}
.story-full .content .title {
position: absolute;
bottom: 26px;
left: 50%;
transform: translateX(-50%);
background: #fff;
font-family: "Roboto", sans-serif;
line-height: 2;
padding: 8px 32px;
}
@media (max-width: 700px) {
.stories-container {
width: 90%;
}
.stories-container .content img {
width: 60px;
height: 60px;
}
.stories-container .content::before {
height: 70px;
width: 70px;
}
.stories-container .content::after {
width: 80px;
height: 80px;
}
.story-full .content img {
height: 65%;
}
}
</style>
<div class="stories-container">
<!-- <div class="content">
<img src="images/1-thumb.png" alt="" />
</div>
<div class="content">
<img src="images/2-thumb.png" alt="" />
</div>
<div class="content">
<img src="images/3-thumb.png" alt="" />
</div>
<div class="content">
<img src="images/4-thumb.png" alt="" />
</div>
<div class="content">
<img src="images/5-thumb.png" alt="" />
</div>
<div class="content">
<img src="images/6-thumb.png" alt="" />
</div>
<div class="content">
<img src="images/7-thumb.png" alt="" />
</div>
<div class="content">
<img src="images/8-thumb.png" alt="" />
</div> -->
</div>
<div class="story-full">
<div class="content">
<div class="close-btn">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="#fff"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</div>
<div class="left-arrow">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="#fff"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15 19l-7-7 7-7"
/>
</svg>
</div>
<img src="images/1.png" alt="" />
<div class="right-arrow">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="#fff"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M9 5l7 7-7 7"
/>
</svg>
</div>
<div class="title">Test Title</div>
</div>
</div>
<script>
const allStories = [
{
thumbUrl: "https://res.cloudinary.com/organised-notes/image/upload/v1661149369/cld-sample-5.jpg",
imageUrl: "https://res.cloudinary.com/organised-notes/image/upload/v1661149369/cld-sample-5.jpg",
title: "Title No. 1",
},
{
thumbUrl: "https://res.cloudinary.com/organised-notes/image/upload/v1661149368/cld-sample-4.jpg",
imageUrl: "https://res.cloudinary.com/organised-notes/image/upload/v1661149368/cld-sample-4.jpg",
title: "Title No. 2",
},
];
const storiesContainer = document.querySelector(".stories-container");
const storyFull = document.querySelector(".story-full");
const storyFullImage = document.querySelector(".story-full img");
const storyFullTitle = document.querySelector(".story-full .title");
const closeBtn = document.querySelector(".story-full .close-btn");
const leftArrow = document.querySelector(".story-full .left-arrow");
const rightArrow = document.querySelector(".story-full .right-arrow");
let currentIndex = 0;
let timer;
allStories.forEach((s, i) => {
const content = document.createElement("div");
content.classList.add("content");
const img = document.createElement("img");
img.setAttribute("src", s.thumbUrl);
storiesContainer.appendChild(content);
content.appendChild(img);
content.addEventListener("click", () => {
currentIndex = i;
storyFull.classList.add("active");
storyFullImage.setAttribute("src", s.imageUrl);
if (!s.title) {
storyFullTitle.style.display = "none";
} else {
storyFullTitle.style.display = "block";
storyFullTitle.innerHTML = s.title;
}
clearInterval(timer);
timer = setInterval(nextStory, 5000);
});
});
closeBtn.addEventListener("click", () => {
storyFull.classList.remove("active");
});
leftArrow.addEventListener("click", () => {
if (currentIndex > 0) {
currentIndex -= 1;
storyFullImage.setAttribute("src", allStories[currentIndex].imageUrl);
if (!allStories[currentIndex].title) {
storyFullTitle.style.display = "none";
} else {
storyFullTitle.style.display = "block";
storyFullTitle.innerHTML = allStories[currentIndex].title;
}
clearInterval(timer);
timer = setInterval(nextStory, 5000);
}
});
const nextStory = () => {
if (currentIndex < allStories.length - 1) {
currentIndex += 1;
storyFullImage.setAttribute("src", allStories[currentIndex].imageUrl);
if (!allStories[currentIndex].title) {
storyFullTitle.style.display = "none";
} else {
storyFullTitle.style.display = "block";
storyFullTitle.innerHTML = allStories[currentIndex].title;
}
}
};
rightArrow.addEventListener("click", () => {
nextStory();
clearInterval(timer);
timer = setInterval(nextStory, 5000);
});
</script>
