Errors encountered when displaying arrows over the width
<Swiper
slidesPerView={5}
spaceBetween={20}
pagination={{
clickable: true,
}}
navigation={{
prevEl: navigationPrevRef.current,
nextEl: navigationNextRef.current
}}
onSwiper={(swiper) => {
// Delays execution for ref definitions
setTimeout(() => {
// Update prevEl & nextEl with defined refs
swiper.params.navigation.prevEl = navigationPrevRef.current
swiper.params.navigation.nextEl = navigationNextRef.current
// Re-initialize 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'
>
<SwiperSlide>
<div className="category-card">
<img src="https://clicon-html.netlify.app/image/product/product-14.png" alt="" className='category-image' />
<h6 className="category-text">TV & Homes</h6>
</div>
</SwiperSlide>>
// Additional SwiperSlides here
<button className="slick-arrow-carousel button-prev" ref={navigationPrevRef}>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
// SVG paths for previous button
</svg>
</button>
<button className="slick-arrow-carousel button-next" ref={navigationNextRef}>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
// SVG paths for next button
</svg>
</button>
</Swiper>
styles.css
.category-slider{
position: relative;
}
// Additional CSS styles here
Encountering issues with displaying arrows over the full width in Swiper Carousel, despite setting z-index: 99999. Seeking solutions and suggestions for resolving this problem.
Require assistance with understanding and resolving Swiper Carousel properties.