Пользовательский модуль HubSpot ⇐ Javascript

[Anonymous]

Я пытаюсь создать пользовательский модуль Hubspot, похожий на эту страницу http://minimalmonkeyblog.s3-website-us- ... onaws.com/. У меня есть настройка статьи в Hubl, чтобы быть повторяющейся группой полей, чтобы пользователь мог добавить столько статей, сколько они хотят. У меня проблемы, когда статья не скрыта на начальной странице. Дисплей: ни один не работает. Как только вы нажмете на статью, она должна открыться в том же окне и быть в слайд -шоу. Эта функциональность работает правильно.

{% for article in module.articles %}


{{ article.date }}
{{ article.title }}
{{ article.content|striptags|truncate(100, true) }}


{% endfor %}




{% for article in module.articles %}

{{ article.title }}
{{ article.content }}

{% endfor %}

X
❮
❯


{% for item in module.articles %}
{{ item.date }}
{% inline_text field="title" value="{{ item.title }}" %}
{% inline_rich_text field="content" value="{{ item.content }}" %}
{{ item.url.href|escape_url }}
{% endfor %}

/* Panels container and individual panel styling */
.panels-container {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding: 20px;
background-color: #f5f5f5;
}

.panels {
display: block;
position: relative;
z-index: 2;
bottom: 0;
overflow: hidden;
width: auto;
min-width: 100%;
min-height: 460px;
}

.panel {
flex: 0 0 calc(100% / 5);
max-width: calc(100% / 5);
scroll-snap-align: start;
padding: 15px;
background: #fff;
border: 1px solid #ddd;
border-radius: 10px;
margin: 0 10px;
cursor: pointer;
transition: transform 0.3s, box-shadow 0.3s;
}

.panel:hover {
transform: scale(1.05);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Article view styling */
.article-view {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(255, 255, 255, 0.95);
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
}

.article-slideshow {
width: 80%;
max-height: 80%;
overflow-y: auto;
text-align: center;
}

.article-slide {
display: none;
}

.article-slide.active {
display: block;
}
.article-slide.hidden {
visibility: hidden;
}

/* Navigation and close buttons */
button {
background: #0073e6;
color: white;
border: none;
padding: 10px 20px;
margin: 10px;
cursor: pointer;
border-radius: 5px;
}

button:hover {
background: #005bb5;
}

.close-article-view {
position: absolute;
top: 120px;
right: 120px;
background: #e60000;
}

@media (min-width: 570px) {
.panels {
display: flex
;
position: absolute;
top: 152px;
}
}

document.addEventListener('DOMContentLoaded', () => {
const panelsContainer = document.querySelector('.panels-container');
const articleView = document.querySelector('.article-view');
const articleSlides = document.querySelectorAll('.article-slide');
const closeButton = document.querySelector('.close-article-view');
const prevButton = document.querySelector('.prev-article');
const nextButton = document.querySelector('.next-article');
let currentIndex = 0;

// Show the panels initially
panelsContainer.style.display = 'flex';
articleView.style.display = 'none';

// Function to show an article
const showArticle = (index) => {
articleSlides.forEach((slide, idx) => {
slide.classList.toggle('active', idx === index);
});
currentIndex = index;
panelsContainer.style.display = 'none';
articleView.style.display = 'flex';
};

// Function to close the article view
const closeArticleView = () => {
panelsContainer.style.display = 'flex';
articleView.style.display = 'none';
};

// Navigate to previous article
const showPrevArticle = () => {
currentIndex = (currentIndex - 1 + articleSlides.length) % articleSlides.length;
showArticle(currentIndex);
};

// Navigate to next article
const showNextArticle = () => {
currentIndex = (currentIndex + 1) % articleSlides.length;
showArticle(currentIndex);
};

// Add click events to panels
document.querySelectorAll('.panel').forEach((panel, index) => {
panel.addEventListener('click', () => {
showArticle(index);
});
});

// Close button event
closeButton.addEventListener('click', closeArticleView);

// Navigation buttons
prevButton.addEventListener('click', showPrevArticle);
nextButton.addEventListener('click', showNextArticle);
});


Подробнее здесь: https://stackoverflow.com/questions/793 ... pot-module