Full list of articles
diff --git a/_sass/base.scss b/_sass/base.scss
index 259da72..d1ee07f 100644
--- a/_sass/base.scss
+++ b/_sass/base.scss
@@ -840,7 +840,7 @@ pre {
padding-left: 80px;
}
-.carousel {
+#carousel {
display: flex;
flex-direction: column;
align-items: center;
diff --git a/assets/js/main.js b/assets/js/main.js
index a8ad828..c99fe57 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -20,17 +20,26 @@ document.addEventListener('DOMContentLoaded', function () {
});
function createCarouselItems(items) {
- const carousel = document.querySelector('.carousel');
+ const carousel = document.querySelector('#carousel');
items.forEach(item => {
const itemDiv = document.createElement('div');
- itemDiv.className = 'carousel-item';
- itemDiv.innerHTML = `
${item.description}`;
+ itemDiv.className = 'carousel-item'
+
+ const link = document.createElement('a');
+ link.className = 'carousel-link';
+ link.href = item.link;
+ link.target = '_blank';
+ link.rel = 'noopener noreferrer';
+ const linkText = document.createTextNode(item.description);
+
+ link.appendChild(linkText);
+ itemDiv.appendChild(link);
carousel.appendChild(itemDiv);
});
}
function initializeCarousel() {
- const carousel = document.querySelector('.carousel');
+ const carousel = document.querySelector('#carousel');
const items = Array.from(carousel.children);
const totalItems = items.length;
const middleIndex = Math.floor(totalItems / 2);
@@ -45,12 +54,12 @@ function initializeCarousel() {
items.forEach((item, index) => {
let positionIndex = (currentIndex + index + totalItems) % totalItems;
let offset = positionIndex - middleIndex;
- item.style.transform = `translateY(${offset * 100}%)`;
+ item.style.transform = `translateY(${offset * 100}%)`;
item.classList.toggle('active', positionIndex === middleIndex);
- item.style.visibility = 'visible';
+ item.style.visibility = 'visible';
});
}
updateCarouselItems();
- setInterval(cycleItems, 7000);
+ setInterval(cycleItems, 7000);
}
\ No newline at end of file