You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
45 lines
2.1 KiB
45 lines
2.1 KiB
document.addEventListener('DOMContentLoaded', function() {
|
|
const heroBlocks = document.querySelectorAll('.hero-block');
|
|
|
|
heroBlocks.forEach(function(block) {
|
|
const swiperContainer = block.querySelector('.swiper');
|
|
|
|
if (!swiperContainer) return;
|
|
|
|
const swiper = new Swiper(swiperContainer, {
|
|
slidesPerView: 1,
|
|
loop: true,
|
|
grabCursor: true,
|
|
on: {
|
|
slideChange: function () {
|
|
const realIndex = this.realIndex;
|
|
const paginationItems = block.querySelectorAll('.pagination-item');
|
|
|
|
paginationItems.forEach((item, index) => {
|
|
const line = item.querySelector('.pagination-line');
|
|
const text = item.querySelector('.slide-text');
|
|
|
|
if (index === realIndex) {
|
|
item.className = 'pagination-item flex-[2] cursor-pointer transition-all ';
|
|
line.className = 'pagination-line bg-[#222] h-[2px] rounded-[30px] transition-colors ';
|
|
text.className = 'slide-text mt-[10px] text-[14px] text-[#222] font-[600] opacity-100 transition-opacity ';
|
|
} else {
|
|
item.className = 'pagination-item flex-1 cursor-pointer transition-all ';
|
|
line.className = 'pagination-line bg-[#e0e0e0] h-[2px] rounded-[30px] transition-colors ';
|
|
text.className = 'slide-text mt-[10px] text-[14px] text-[#222] font-[600] opacity-0 transition-opacity ';
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
// Навигация
|
|
block.querySelector('.custom-prev')?.addEventListener('click', () => swiper.slidePrev());
|
|
block.querySelector('.custom-next')?.addEventListener('click', () => swiper.slideNext());
|
|
|
|
// Пагинация
|
|
block.querySelectorAll('.pagination-item').forEach((item, index) => {
|
|
item.addEventListener('click', () => swiper.slideToLoop(index));
|
|
});
|
|
});
|
|
}); |