<xml>
<style>
.stories-container {
max-width: 600px;
margin: 24px auto;
position: relative;
}
.stories-container .previous-btn,
.stories-container .next-btn,
.stories-full-view .previous-btn,
.stories-full-view .next-btn {
width: 30px;
position: absolute;
z-index: 2;
top: 50%;
transform: translateY(-50%);
background: #444;
color: #fff;
border-radius: 50%;
padding: 10px;
display: flex;
cursor: pointer;
}
.stories-container .previous-btn,
.stories-container .next-btn {
opacity: 0;
pointer-events: none;
transition: all 400ms ease;
}
.stories-container .previous-btn.active,
.stories-container .next-btn.active {
opacity: 1;
pointer-events: auto;
}
.stories-container .previous-btn,
.stories-full-view .previous-btn {
left: 8px;
}
.stories-container .next-btn,
.stories-full-view .next-btn {
right: 8px;
}
.stories-container .story {
height: 180px;
width: 120px;
flex-shrink: 0;
border-radius: 16px;
overflow: hidden;
position: relative;
cursor: pointer;
}
.stories-container .story img {
width: 100%;
height: 100%;
object-fit: cover;
}
.stories-container .stories {
display: flex;
gap: 8px;
}
.stories-container .content {
overflow-x: scroll;
scrollbar-width: none;
scroll-behavior: smooth;
}
.stories-container .content::-webkit-scrollbar {
display: none;
}
.stories-container .author {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 8px 16px;
font-size: 15px;
font-family: "Roboto", sans-serif;
font-weight: bold;
color: #fff;
background: linear-gradient(transparent, #222 130%);
}
.stories-full-view {
position: fixed;
inset: 0;
z-index: 5;
background: rgba(0, 0, 0, 0.9);
display: none;
place-items: center;
}
.stories-full-view.active {
display: grid;
}
.stories-full-view .close-btn {
position: absolute;
top: 16px;
left: 16px;
width: 30px;
background: #444;
color: #fff;
border-radius: 50%;
padding: 10px;
display: flex;
z-index: 20;
cursor: pointer;
}
.stories-full-view .content {
height: 90vh;
width: 100%;
max-width: 700px;
position: relative;
}
.stories-full-view .story {
height: 100%;
text-align: center;
}
.stories-full-view .story img {
height: 100%;
aspect-ratio: 10/16;
object-fit: cover;
border-radius: 16px;
}
.stories-full-view .author {
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
font-family: "Roboto", sans-serif;
font-size: 18px;
background: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 4px 32px;
border-radius: 8px;
}
</style>
<div class="stories-container">
<div class="content">
<div class="previous-btn">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.75 19.5L8.25 12l7.5-7.5"
/>
</svg>
</div>
<div class="stories"></div>
<div class="next-btn active">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M8.25 4.5l7.5 7.5-7.5 7.5"
/>
</svg>
</div>
</div>
</div>
<div class="stories-full-view">
<div class="close-btn">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</div>
<div class="content">
<div class="previous-btn">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.75 19.5L8.25 12l7.5-7.5"
/>
</svg>
</div>
<div class="story">
<img src="images/3.jpg" alt="" />
<div class="author">Author</div>
</div>
<div class="next-btn">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M8.25 4.5l7.5 7.5-7.5 7.5"
/>
</svg>
</div>
</div>
</div>
<script>
const allStories = [
{
id: 0,
author: "Luna Belle",
imageUrl: "images/1.jpg",
},
{
id: 1,
author: "Willow Grace",
imageUrl: "images/2.jpg",
},
{
id: 2,
author: "Emma Smith",
imageUrl: "images/3.jpg",
},
{
id: 3,
author: "Ruby Skye",
imageUrl: "images/4.jpg",
},
{
id: 4,
author: "Live Blogger",
imageUrl: "images/5.jpg",
},
{
id: 5,
author: "Hazel Jade",
imageUrl: "images/6.jpg",
},
{
id: 6,
author: "Eden Faith",
imageUrl: "images/7.jpg",
},
{
id: 7,
author: "Flora Maeve",
imageUrl: "images/8.jpg",
},
{
id: 8,
author: "Nathaniel Hayes",
imageUrl: "images/9.jpg",
},
{
id: 9,
author: "Everett Lee",
imageUrl: "images/10.jpg",
},
{
id: 9,
author: "Owen",
imageUrl: "images/11.jpg",
},
{
id: 9,
author: "Caleb Knox",
imageUrl: "https://k.top4top.io/p_3042llt870.jpg",
},
{
id: 9,
author: "Felix",
imageUrl: "https://j.top4top.io/p_304205pnk0.jpeg",
},
];
const stories = document.querySelector(".stories");
const storiesFullView = document.querySelector(".stories-full-view");
const closeBtn = document.querySelector(".close-btn");
const storyImageFull = document.querySelector(".stories-full-view .story img");
const storyAuthorFull = document.querySelector(
".stories-full-view .story .author"
);
const nextBtn = document.querySelector(".stories-container .next-btn");
const previousBtn = document.querySelector(".stories-container .previous-btn");
const storiesContent = document.querySelector(".stories-container .content");
const nextBtnFull = document.querySelector(".stories-full-view .next-btn");
const previousBtnFull = document.querySelector(
".stories-full-view .previous-btn"
);
let currentActive = 0;
const createStories = () => {
allStories.forEach((s, i) => {
const story = document.createElement("div");
story.classList.add("story");
const img = document.createElement("img");
img.src = s.imageUrl;
const author = document.createElement("div");
author.classList.add("author");
author.innerHTML = s.author;
story.appendChild(img);
story.appendChild(author);
stories.appendChild(story);
story.addEventListener("click", () => {
showFullView(i);
});
});
};
createStories();
const showFullView = (index) => {
currentActive = index;
updateFullView();
storiesFullView.classList.add("active");
};
closeBtn.addEventListener("click", () => {
storiesFullView.classList.remove("active");
});
const updateFullView = () => {
storyImageFull.src = allStories[currentActive].imageUrl;
storyAuthorFull.innerHTML = allStories[currentActive].author;
};
nextBtn.addEventListener("click", () => {
storiesContent.scrollLeft += 300;
});
previousBtn.addEventListener("click", () => {
storiesContent.scrollLeft -= 300;
});
storiesContent.addEventListener("scroll", () => {
if (storiesContent.scrollLeft <= 24) {
previousBtn.classList.remove("active");
} else {
previousBtn.classList.add("active");
}
let maxScrollValue =
storiesContent.scrollWidth - storiesContent.clientWidth - 24;
if (storiesContent.scrollLeft >= maxScrollValue) {
nextBtn.classList.remove("active");
} else {
nextBtn.classList.add("active");
}
});
nextBtnFull.addEventListener("click", () => {
if (currentActive >= allStories.length - 1) {
return;
}
currentActive++;
updateFullView();
});
previousBtnFull.addEventListener("click", () => {
if (currentActive <= 0) {
return;
}
currentActive--;
updateFullView();
});
</script>
</xml>
HTML to XML Converter👇
:root{----background-color-fff-fff:#fff;----display-flex-flex:flex;----place-items-center-center:center;----flex-direction-column-column:column;----border-radius-8px-8px:8px;----box-shadow-04px8pxrgba00001-04px8pxrgba00001:0 4px 8px rgba(0, 0, 0, 0.1);----margin-0auto-0auto:0 auto;----padding-20px-20px:20px;----width-100-100:100%;----padding-10px-10px:10px;----box-sizing-borderbox-borderbox:border-box;----border-1pxsolidccc-1pxsolidccc:1px solid #ccc;----border-radius-5px-5px:5px;----font-family-Arialsansserif-Arialsansserif:'Arial', sans-serif;----resize-vertical-vertical:vertical;----height-150px-150px:150px;----background-color-4caf50-4caf50:#4caf50;----padding-10px20px-10px20px:10px 20px;----border-none-none:none;----border-radius-4px-4px:4px;----cursor-pointer-pointer:pointer;----background-color-3498db-3498db:#3498db;----background-color-f9f9f9-f9f9f9:#f9f9f9;----white-space-preline-preline:pre-line;----font-size-14px-14px:14px;--background-color-varbackgroundcolorfff:var(--background-color-fff);--display-vardisplayflex:var(--display-flex);--place-items-varplaceitemscenter:var(--place-items-center);--flex-direction-varflexdirectioncolumn:var(--flex-direction-column);--border-radius-varborderradius8px:var(--border-radius-8px);--box-shadow-varboxshadow04px8pxrgba00001:var(--box-shadow-04px8pxrgba00001);--margin-varmargin0auto:var(--margin-0auto);--padding-varpadding20px:var(--padding-20px);--width-varwidth100:var(--width-100);--padding-varpadding10px:var(--padding-10px);--box-sizing-varboxsizingborderbox:var(--box-sizing-borderbox);--border-varborder1pxsolidccc:var(--border-1pxsolidccc);--border-radius-varborderradius5px:var(--border-radius-5px);--font-family-varfontfamilyArialsansserif:var(--font-family-Arialsansserif);--resize-varresizevertical:var(--resize-vertical);--height-varheight150px:var(--height-150px);--background-color-varbackgroundcolor4caf50:var(--background-color-4caf50);--padding-varpadding10px20px:var(--padding-10px20px);--border-varbordernone:var(--border-none);--border-radius-varborderradius4px:var(--border-radius-4px);--cursor-varcursorpointer:var(--cursor-pointer);--background-color-varbackgroundcolor3498db:var(--background-color-3498db);--background-color-varbackgroundcolorf9f9f9:var(--background-color-f9f9f9);--white-space-varwhitespacepreline:var(--white-space-preline);--font-size-varfontsize14px:var(--font-size-14px);}root{--background-color-fff:var(----background-color-fff-fff);--display-flex:var(----display-flex-flex);--place-items-center:var(----place-items-center-center);--flex-direction-column:var(----flex-direction-column-column);--border-radius-8px:var(----border-radius-8px-8px);--box-shadow-04px8pxrgba00001:var(----box-shadow-04px8pxrgba00001-04px8pxrgba00001);--margin-0auto:var(----margin-0auto-0auto);--padding-20px:var(----padding-20px-20px);--width-100:var(----width-100-100);--padding-10px:var(----padding-10px-10px);--box-sizing-borderbox:var(----box-sizing-borderbox-borderbox);--border-1pxsolidccc:var(----border-1pxsolidccc-1pxsolidccc);--border-radius-5px:var(----border-radius-5px-5px);--font-family-Arialsansserif:var(----font-family-Arialsansserif-Arialsansserif);--resize-vertical:var(----resize-vertical-vertical);--height-150px:var(----height-150px-150px);--background-color-4caf50:var(----background-color-4caf50-4caf50);--padding-10px20px:var(----padding-10px20px-10px20px);--border-none:var(----border-none-none);--border-radius-4px:var(----border-radius-4px-4px);--cursor-pointer:var(----cursor-pointer-pointer);--background-color-3498db:var(----background-color-3498db-3498db);--background-color-f9f9f9:var(----background-color-f9f9f9-f9f9f9);--white-space-preline:var(----white-space-preline-preline);--font-size-14px:var(----font-size-14px-14px);}.at_container{background-color:var(--background-color-varbackgroundcolorfff);display:var(--display-vardisplayflex);place-items:var(--place-items-varplaceitemscenter);flex-direction:var(--flex-direction-varflexdirectioncolumn);border-radius:var(--border-radius-varborderradius8px);box-shadow:var(--box-shadow-varboxshadow04px8pxrgba00001);margin:var(--margin-varmargin0auto);padding:var(--padding-varpadding20px);text-align:var(--place-items-varplaceitemscenter);}.at_container div{width:var(--width-varwidth100);margin:var(--margin-varmargin0auto);}.at_container .at_input{padding:var(--padding-varpadding10px);box-sizing:var(--box-sizing-varboxsizingborderbox);border:var(--border-varborder1pxsolidccc);border-radius:var(--border-radius-varborderradius5px);margin-bottom:var(--padding-varpadding10px);font-family:var(--font-family-varfontfamilyArialsansserif);resize:var(--resize-varresizevertical);}#inputCss{width:var(--width-varwidth100);margin:var(--margin-varmargin0auto);height:var(--height-varheight150px);}.atGenbtn, #copyButton{background-color:var(--background-color-varbackgroundcolor4caf50);color:var(--background-color-varbackgroundcolorfff);padding:var(--padding-varpadding10px20px);border:var(--border-varbordernone);border-radius:var(--border-radius-varborderradius4px);cursor:var(--cursor-varcursorpointer);}#copyButton{background-color:var(--background-color-varbackgroundcolor3498db);display:var(--border-varbordernone);}.at_container pre{background-color:var(--background-color-varbackgroundcolorf9f9f9);padding:var(--padding-varpadding10px);border-radius:var(--border-radius-varborderradius4px);white-space:var(--white-space-varwhitespacepreline);font-size:var(--font-size-varfontsize14px);}root{}
