React-id-swiper: How can I add disabled class to outside button?

[Alexandrdrdr]

Hey :)
I need your help. I tried to add disabled class to my new navigation buttons, which place outside swiper container, but I failed.
Can you help me with this?
I need to add this class:

• to previous button when active slide index = 0
• to next button when active slide index = slides length -1.

Here is my code:

`export class InfoSlider extends React.Component {
constructor(props){
super(props);
this.swiper = null;
this.goNext = this.goNext.bind(this);
this.goPrev = this.goPrev.bind(this);
}

goNext(){
    this.swiper.slideNext(); // I tried to figure out how to get button from here... 
}

goPrev(){
    this.swiper.slidePrev();
}

render() {
    const swiperSlides = [0, 1];

    function makeSlide(slideArray){
        return slideArray.map((slide, index) => {
            return <div key={index} className="swiper-slide">1</div>;
        });
    }

    let th = this;
    function dashSliderRes(){

        let swiperParams = {
            loop: false,
            speed: 1000,
            slidesPerView: 3,
            navigation: {
                disabledClass: 'swiper-button-disabled'
            }
        };

        return <Swiper {...swiperParams} ref={node => th.swiper = node !== null ? node.swiper : null }>
            {makeSlide(swiperSlides)}
        </Swiper>;
    }

    return (
        <div>

            {dashSliderRes()}

            <div className="swiper-button-prev js-dashSliderPrev" onClick={this.goPrev}>
                <SvgSliderArrow/>
            </div>
            <div className="swiper-button-next js-dashSliderNext" onClick={this.goNext}>
                <SvgSliderArrow/>
            </div>

        </div>
    );
}

}`

[nico-w]

I used the isEnd and isBeginning methods and added an own class to hide the buttons (see http://idangero.us/swiper/api/#methods). But maybe I will change my code and use the reachBeginning and reachEnd events (see http://idangero.us/swiper/api/#events).

[kei-0226]

I used progress event and swiper status (isEnd, isBeginning).
rewrite your code it will look like this

constructor(props){
    super(props);
    this.swiper = null;
    this.goNext = this.goNext.bind(this);
    this.goPrev = this.goPrev.bind(this);
    this.progress = this.progress.bind(this);

    this.state = {
      isBeginning: true,
      isEnd: false
    }
}

goNext(){
    this.swiper.slideNext(); // I tried to figure out how to get button from here... 
}

goPrev(){
    this.swiper.slidePrev();
}

progress () {
    if (!this.swiper) return;
    if (this.swiper.isEnd) {
        this.setState({ isEnd: true });
    } else if (this.swiper.isBeginning) {
        this.setState({ isBeginning: true });
    } else {
        this.setState({ isEnd: false, isBeginning: false });
    }
}

render() {
    const swiperSlides = [0, 1];
    const { isBeginning, isEnd } = this.state;

    function makeSlide(slideArray){
        return slideArray.map((slide, index) => {
            return <div key={index} className="swiper-slide">1</div>;
        });
    }

    let th = this;
    function dashSliderRes(){

        let swiperParams = {
            loop: false,
            speed: 1000,
            slidesPerView: 3,
            navigation: {
                disabledClass: 'swiper-button-disabled'
            },
            on: {
                progress: this.progress;
            },
        };

        return <Swiper {...swiperParams} ref={node => th.swiper = node !== null ? node.swiper : null }>
            {makeSlide(swiperSlides)}
        </Swiper>;
    }

    return (
        <div>

            {dashSliderRes()}

            <div className={`swiper-button-prev js-dashSliderPrev ${isBeginning ? 'disabled' : ''}`} onClick={this.goPrev}>
                <SvgSliderArrow/>
            </div>
            <div className={`swiper-button-next js-dashSliderNext ${isEnd ? 'disabled' : ''}`} onClick={this.goNext}>
                <SvgSliderArrow/>
            </div>

        </div>
    );
}

[Alexandrdrdr]

Thank you guys ;)
@kei-0226 it works)