diff --git a/src/widgets/TimeFrameSlider/ui/EventsCarousel/EventsCarousel.module.scss b/src/widgets/TimeFrameSlider/ui/EventsCarousel/EventsCarousel.module.scss index 68c1485..d968c58 100644 --- a/src/widgets/TimeFrameSlider/ui/EventsCarousel/EventsCarousel.module.scss +++ b/src/widgets/TimeFrameSlider/ui/EventsCarousel/EventsCarousel.module.scss @@ -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; } \ No newline at end of file diff --git a/src/widgets/TimeFrameSlider/ui/EventsCarousel/EventsCarousel.tsx b/src/widgets/TimeFrameSlider/ui/EventsCarousel/EventsCarousel.tsx index f6e7d00..cd12507 100644 --- a/src/widgets/TimeFrameSlider/ui/EventsCarousel/EventsCarousel.tsx +++ b/src/widgets/TimeFrameSlider/ui/EventsCarousel/EventsCarousel.tsx @@ -145,6 +145,7 @@ export const EventsCarousel = memo( diff --git a/src/widgets/TimeFrameSlider/ui/EventsCarousel/constants.ts b/src/widgets/TimeFrameSlider/ui/EventsCarousel/constants.ts index b6149e8..7697fff 100644 --- a/src/widgets/TimeFrameSlider/ui/EventsCarousel/constants.ts +++ b/src/widgets/TimeFrameSlider/ui/EventsCarousel/constants.ts @@ -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, + }, }, }