218 lines
6.8 KiB
HTML
218 lines
6.8 KiB
HTML
<div class="cc--component-container cc--news-events">
|
|
<div class="c--component c--news-events">
|
|
|
|
<!-- Phần 2 cột: Tin mới (Trái) và Sự kiện (Phải) -->
|
|
<div class="news-events-row">
|
|
|
|
<div class="news-column">
|
|
<h2 class="section-title--news" style="font-size: 2rem;">
|
|
TIN TỨC
|
|
</h2>
|
|
<div class="news-slider-wrapper">
|
|
<button class="news-slider-btn prev-btn" aria-label="Previous">‹</button>
|
|
<div class="news-slider-container">
|
|
<div class="news-slider-track">
|
|
<!-- Shortcode Tin Tức hiển thị dạng list (limit tăng lên 6 để có thể trượt) -->
|
|
[component:news-grid data-source="posts:tag=news,limit=6,collection=news_posts"]
|
|
</div>
|
|
</div>
|
|
<button class="news-slider-btn next-btn" aria-label="Next">›</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="events-column">
|
|
<h2 class="events-title" style="font-size: 2rem;">
|
|
SỰ KIỆN
|
|
</h2>
|
|
<div class="events-widget">
|
|
<!-- Shortcode Sự kiện -->
|
|
[component:events-list data-source="posts:tag=event,limit=4,collection=event_posts"]
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Header chung (Mobile) -->
|
|
<div class="news-events-section__footer">
|
|
<a href="/news/news-events" class="news-events-section__cta news-events-section__cta--mobile">
|
|
Xem Thêm
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.news-slider-wrapper {
|
|
position: relative;
|
|
padding: 0px;
|
|
}
|
|
|
|
.news-slider-container {
|
|
overflow: hidden;
|
|
width: 100%;
|
|
}
|
|
|
|
.news-slider-wrapper .news-grid,
|
|
.news-slider-wrapper .row,
|
|
.news-slider-track {
|
|
display: flex !important;
|
|
flex-wrap: nowrap !important;
|
|
gap: 20px;
|
|
margin: 0 !important;
|
|
transition: transform 0.4s ease;
|
|
}
|
|
|
|
/* Force children to be fixed width cards - 2 cards at a time because this column is narrow */
|
|
.news-slider-wrapper .news-grid>*,
|
|
.news-slider-wrapper .row>*,
|
|
.news-slider-track>* {
|
|
flex: 0 0 calc(50% - 10px) !important;
|
|
max-width: none !important;
|
|
}
|
|
|
|
@media (max-width: 992px) {
|
|
|
|
.news-slider-wrapper .news-grid>*,
|
|
.news-slider-wrapper .row>*,
|
|
.news-slider-track>* {
|
|
flex: 0 0 calc(50% - 10px) !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
|
|
.news-slider-wrapper .news-grid>*,
|
|
.news-slider-wrapper .row>*,
|
|
.news-slider-track>* {
|
|
flex: 0 0 100% !important;
|
|
}
|
|
}
|
|
|
|
.news-slider-btn {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background-color: rgba(200, 200, 200, 0.5);
|
|
color: #333;
|
|
border: none;
|
|
font-size: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
z-index: 10;
|
|
transition: background-color 0.2s, color 0.2s;
|
|
line-height: 1;
|
|
}
|
|
|
|
.news-slider-btn:hover {
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
color: #fff;
|
|
}
|
|
|
|
.news-slider-btn.prev-btn {
|
|
left: -15px;
|
|
}
|
|
|
|
.news-slider-btn.next-btn {
|
|
right: -15px;
|
|
}
|
|
|
|
.news-slider-btn:disabled {
|
|
opacity: 0.2;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* --- Hiệu ứng crop (zoom) ảnh khi hover --- */
|
|
/* 1. Thiết lập vùng chứa ảnh sẽ cắt bỏ phần bị lồi ra (overflow: hidden) */
|
|
.news-slider-wrapper .featured-grid__item .news-card__image {
|
|
overflow: hidden !important;
|
|
display: block;
|
|
}
|
|
|
|
/* 2. Thiết lập thời gian chuyển động cho ảnh */
|
|
.news-slider-wrapper .featured-grid__item .news-card__image img {
|
|
transition: transform 0.4s ease-in-out !important;
|
|
}
|
|
|
|
/* 3. Phóng to ảnh (scale) khi trỏ chuột vào vùng chứa */
|
|
.news-slider-wrapper .featured-grid__item:hover .news-card__image img {
|
|
transform: scale(1.1) !important;
|
|
}
|
|
|
|
</style>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
const wrappers = document.querySelectorAll('.news-slider-wrapper');
|
|
wrappers.forEach(wrapper => {
|
|
const prevBtn = wrapper.querySelector('.prev-btn');
|
|
const nextBtn = wrapper.querySelector('.next-btn');
|
|
|
|
let track = wrapper.querySelector('.news-slider-track');
|
|
if (track && track.children.length === 1 && (track.children[0].classList.contains('news-grid') || track.children[0].classList.contains('row'))) {
|
|
track = track.children[0];
|
|
track.classList.add('news-slider-track');
|
|
}
|
|
|
|
if (!track) return;
|
|
|
|
let currentIndex = 0;
|
|
|
|
function updateSlider() {
|
|
const items = track.children;
|
|
if(items.length === 0) return;
|
|
const itemWidth = items[0].getBoundingClientRect().width;
|
|
|
|
const gap = parseFloat(window.getComputedStyle(track).gap) || 20;
|
|
track.style.transform = `translateX(-${currentIndex * (itemWidth + gap)}px)`;
|
|
|
|
const containerWidth = wrapper.querySelector('.news-slider-container').getBoundingClientRect().width;
|
|
const visibleCount = Math.max(1, Math.floor((containerWidth + gap) / (itemWidth + gap)));
|
|
|
|
prevBtn.disabled = currentIndex === 0;
|
|
nextBtn.disabled = currentIndex >= items.length - visibleCount;
|
|
}
|
|
|
|
prevBtn.addEventListener('click', () => {
|
|
if (currentIndex > 0) {
|
|
currentIndex--;
|
|
updateSlider();
|
|
}
|
|
});
|
|
|
|
nextBtn.addEventListener('click', () => {
|
|
const items = track.children;
|
|
const itemWidth = items[0].getBoundingClientRect().width;
|
|
const gap = parseFloat(window.getComputedStyle(track).gap) || 20;
|
|
const containerWidth = wrapper.querySelector('.news-slider-container').getBoundingClientRect().width;
|
|
const visibleCount = Math.max(1, Math.floor((containerWidth + gap) / (itemWidth + gap)));
|
|
|
|
if (currentIndex < items.length - visibleCount) {
|
|
currentIndex++;
|
|
updateSlider();
|
|
}
|
|
});
|
|
|
|
window.addEventListener('resize', () => {
|
|
const items = track.children;
|
|
if(items.length === 0) return;
|
|
const itemWidth = items[0].getBoundingClientRect().width;
|
|
const gap = parseFloat(window.getComputedStyle(track).gap) || 20;
|
|
const containerWidth = wrapper.querySelector('.news-slider-container').getBoundingClientRect().width;
|
|
const visibleCount = Math.max(1, Math.floor((containerWidth + gap) / (itemWidth + gap)));
|
|
|
|
if (currentIndex > items.length - visibleCount) {
|
|
currentIndex = Math.max(0, items.length - visibleCount);
|
|
}
|
|
updateSlider();
|
|
});
|
|
|
|
setTimeout(updateSlider, 200);
|
|
});
|
|
});
|
|
</script> |