Мобильная версияArrows could not be shown over the width
{ // Delay execution for the refs to be defined setTimeout(() => { // Override prevEl & nextEl now that refs are defined swiper.params.navigation.prevEl = navigationPrevRef.current swiper.params.navigation.nextEl = navigationNextRef.current // Re-init navigation swiper.navigation.destroy() swiper.navigation.init() swiper.navigation.update() }) }} breakpoints={{ 640: { slidesPerView: 2, spaceBetween: 20, }, 768: { slidesPerView: 4, spaceBetween: 40, }, 1024: { slidesPerView: 5, spaceBetween: 50, }, }} modules={[Pagination, Navigation]} className='category-slider' >
TV & Homes
Accessories
Computer & Laptop styles.css
.category-slider{ position: relative; } .swiper-pagination{ display: none!important; } .slick-arrow-carousel{ position: absolute!important; top: 50%; transform: translateY(-50%); background: transparent; border: 0; padding: 0; min-width: 48px; max-width: 48px; min-height: 48px; max-height: 48px; border-radius: 500px; display: flex!important; justify-content: center; align-items: center; background: var(--bs-primary-500); z-index: 99999; } .swiper-button-prev, .swiper-button-next{ display: none!important; } .button-prev{ position: absolute; left: -20px; } .button-next{ position: absolute; right: -20px; } In the swiper carousel, I am expecting the custom swiper buttons should be displayed over the width of the container when I set the z-index: 99999 but even how I modified it could not be displayed correctly? May I ask how can I have the arrow directions to be displayed with full width instead of only be displayed in the container?
I have difficulties in Swiper Carousel properties and may want to look for suggested solutions
Источник: https://stackoverflow.com/questions/781 ... iner-width
