feature: Настроен адаптив для карусели событий

This commit is contained in:
Ilia Mashkov
2025-11-21 15:41:57 +03:00
parent f34f1a28de
commit 364c5e1ff1
3 changed files with 44 additions and 6 deletions

View File

@@ -30,4 +30,24 @@
opacity: 0;
pointer-events: none;
}
:global(.swiper-slide-next) {
transition: opacity 0.3s ease;
@media (width <=576px) {
opacity: 0.4;
}
}
:global(.swiper-slide-prev) {
transition: opacity 0.3s ease;
@media (width <=576px) {
opacity: 0.4;
}
}
:global(.swiper-slide-active) {
opacity: 1;
}

View File

@@ -145,6 +145,7 @@ export const EventsCarousel = memo(
<Swiper
{...EVENT_CAROUSEL_CONFIG}
watchSlidesProgress
onInit={handleSwiperInit}
onSlideChange={handleSlideChange}
>

View File

@@ -1,5 +1,7 @@
import { Navigation } from 'swiper/modules'
import styles from './EventsCarousel.module.scss'
import type { SwiperOptions } from 'swiper/types'
/**
@@ -7,16 +9,31 @@ import type { SwiperOptions } from 'swiper/types'
*/
export const EVENT_CAROUSEL_CONFIG: SwiperOptions = {
modules: [Navigation],
spaceBetween: 30,
slidesPerView: 1.5,
breakpoints: {
768: {
slidesPerView: 3.5,
},
},
spaceBetween: 25,
navigation: {
prevEl: '.swiper-button-prev-custom',
nextEl: '.swiper-button-next-custom',
enabled: false,
},
breakpoints: {
576: {
slidesPerView: 2,
},
768: {
slidesPerView: 3,
navigation: {
enabled: true,
},
spaceBetween: 30,
},
1440: {
slidesPerView: 3,
navigation: {
enabled: true,
},
spaceBetween: 80,
},
},
}