How i can hide prev button when the index is 0, but the next button is show. But when until last index of cards, the prev button is showing.

[muamarzidan]

iam using swiper 11, and now iam still using has navigation, but now iam still want hide the prev button when the swiper no click/or in index 0, but the next button is show, but when going to last index, the next button is hide and left button is show.

actuali i have been see from owner/contributor from nolimits4web, but when i see that code, i think thats is different configuration in swiper 11, this the from owner

var swiper = $('.swiper-container').swiper({
        onSlideChangeStart: function(){
            if (swiper.activeIndex==0) {
                $('.left-arrow').hide()
                $('.right-arrow').show()
            }
            else if (swiper.activeIndex == swiper.slides.length-1) {
                $('.left-arrow').show()
                $('.right-arrow').hide()
            }
            else {
                $('.left-arrow').show()
                $('.right-arrow').show()
            }   
        }
    })
    

and this is my code

import React, { useRef, useState } from 'react';
import Image from 'next/image';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/navigation';
import { Pagination, Navigation, HashNavigation } from 'swiper/modules';


const roleSlider = () => {
    return (
        <>
            <Swiper
                slidesPerView={1}
                spaceBetween={10}
                navigation={true}
                hashNavigation={{
                    watchState: true,
                }}
                pagination={{
                    clickable: true,
                }}
                breakpoints={{
                    '@0.00': {
                        slidesPerView: 1,
                        spaceBetween: 10,
                    },
                    '@0.75': {
                        slidesPerView: 2,
                        spaceBetween: 20,
                    },
                    '@1.00': {
                        slidesPerView: 3,
                        spaceBetween: 40,
                    },
                    '@1.50': {
                        slidesPerView: 3    ,
                        spaceBetween: 50,
                    },
                }}
                modules={[Pagination, Navigation, HashNavigation]}
                className="w-full"
            >

                {dataCard.map((data, index) => (
                    <SwiperSlide key={index} data-hash={`slide${index+1}`}>
                        <div className="bg-gray-100 p-4 rounded-lg">
                            <Image width={220} height={150} src={data.image} alt="news-thumbnail" className="w-full h-auto" />
                            <h2 className="text-lg font-semibold">{data.title}</h2>
                            <p className="text-sm text-gray-500">{data.date}</p>
                        </div>
                    </SwiperSlide>
                ))}
            </Swiper>
        </>
    );
}

export default roleSlider;

someone can help me how to implement?

[jpierson-at-riis]

Probably a duplicate discussion of #4348.