Мне нужно воспроизвести слайдер путешествия, похожий на веб-сайт DuckDuckGo. ⇐ CSS

[Anonymous]

Мне нужна помощь в воспроизведении функции слайдера путешествия на веб-сайте DuckDuckGo (https://start.duckduckgo.com/about). Слайдер на их странице эффективно демонстрирует ряд шагов или этапов в визуально привлекательной форме, и я хотел бы реализовать что-то подобное на своем веб-сайте. Можете ли вы рассказать мне о процессе создания этого интерактивного слайдера-путешествия? Я ищу, как его структурировать, какие инструменты или библиотеки рекомендуется использовать, а также как сделать его адаптивным для экранов различных размеров.
Вот мой фиктивный код, который я создал -< /p>

Timeline Example

body {
margin: 0;
font-family: Arial, sans-serif;
background-color: white;
}
.story-section {
text-align: center;
padding: 50px 20px;
}
.story-section h2 {
font-size: 2.5rem;
margin-bottom: 10px;
color: #654321;
}
.story-section p {
font-size: 1.2rem;
color: #996515;
}
.timeline-container {
position: relative;
margin: 50px auto;
width: 90%;
max-width: 800px;
}
.timeline {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
.timeline::before {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 4px;
background-color: burlywood;
transform: translateY(-50%);
z-index: 1;
}
.timeline-circle {
width: 20px;
height: 20px;
background-color: burlywood;
border-radius: 50%;
z-index: 2;
position: relative;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.timeline-circle:hover {
background-color: #654321;
transform: scale(1.3);
box-shadow: 0 0 15px #654321;
}
.timeline-circle.active {
background-color: #654321;
}
.timeline-labels {
display: flex;
justify-content: space-between;
margin-top: 10px;
font-size: 0.9rem;
}
.timeline-labels span {
color: brown;
}
.arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: #ebd4b7;
border: none;
width: 40px;
height: 40px;
color: #654321;
font-size: 1.2rem;
border-radius: 50%;
cursor: pointer;
}
.arrow.left {
left: -50px;
}
.arrow.right {
right: -50px;
}
.arrow:hover {
background-color: burlywood;
}
.details-container {
margin-top: 30px;
text-align: center;
color: #654321;
}
.details-container h3 {
font-size: 1.8rem;
margin-bottom: 10px;
}
.details-container p {
font-size: 1rem;
color: #996515;
}
.image-div img {
height: 220px;
width: 220px;
display: none;
}
.image-div img.active {
display: inline-block;
}
@media (max-width: 600px) {
.timeline-container {
position: relative;
margin: 20px auto;
padding: 0 20px;
}
.arrow {
width: 30px;
height: 30px;
font-size: 1rem;
}
.arrow.left {
left: 5px;
}
.arrow.right {
right: 5px;
}
.timeline {
justify-content: space-around;
}
.timeline-labels {
font-size: 0.8rem;
}
}

Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae eros id augue pharetra malesuada.








2008: Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam blandit arcu nec nisl varius scelerisque.

‹








2008
2010
2015
2018
2020
2023

›

function scrollTimeline(direction) {
const circles = document.querySelectorAll('.timeline-circle');
const activeIndex = Array.from(circles).findIndex(circle => circle.classList.contains('active'));

if (direction === -1 && activeIndex > 0) {
setActiveNode(circles[activeIndex - 1]);
} else if (direction === 1 && activeIndex < circles.length - 1) {
setActiveNode(circles[activeIndex + 1]);
}
}

function setActiveNode(node) {
document.querySelectorAll('.timeline-circle').forEach(circle => circle.classList.remove('active'));
node.classList.add('active');

document.getElementById('timeline-title').innerText = node.getAttribute('data-title');
document.getElementById('timeline-description').innerText = node.getAttribute('data-description');

document.querySelectorAll('.image-div img').forEach(img => {
img.classList.toggle('active', img.classList.contains(`image-${node.getAttribute('data-year')}`));
});
}

document.querySelectorAll('.timeline-circle').forEach(circle =>
circle.addEventListener('click', () => setActiveNode(circle))
);


Подробнее здесь: https://stackoverflow.com/questions/792 ... go-website