Disable Prev or Next Button if there is no slides available before or after the current slide in react slick. (PreviousNextMethod)

Question

I used react slick PrevNextMethod
https://react-slick.neostack.com/docs/example/previous-next-methods

I set the Infinite to false so, there is no loop will shown in carousel. Now, i want to disable the previous button if there is no slides available before the current showing slide or to disable next button vise versa..

There is no options in official documentation. is there anyway to achieve this?

score 5 · Answer 1 · answered May 21 '21 at 17:13

Using custom arrows you can get the className property on custom arrow component, react-slick add the class slick-disabled to that arrow when it does not have more slide to show, so with that in mind you can check className?.includes("slick-disabled"), more details following:

import React from "react";
import Slider from "react-slick";

const NextArrow: React.FC<ArrowsProps> = ({ onClick, className }) => (
  <ArrowRightContainer onClick={onClick} isDisabled={className?.includes("slick-disabled")}>
    <Icon name="chevron-right" />
  </ArrowRightContainer>
);

const PrevArrow: React.FC<ArrowsProps> = ({ onClick, className }) => (
  <ArrowLeftContainer onClick={onClick} isDisabled={className?.includes("slick-disabled")}>
    <Icon name="chevron-right" styles={ArrowLeftIcon} />
  </ArrowLeftContainer>
);


const settings = {
  infinite: false,
  speed: 350,
  slidesToShow: 4,
  slidesToScroll: 1,
  nextArrow: <NextArrow />,
  prevArrow: <PrevArrow />,
};

<Slider {...settings}>
 .....
</Slider>

score 2 · Accepted Answer · answered Jul 12 '19 at 12:55

Yes, it can be done using the beforeChange callback.

Here's a basic example that I created from one of the examples in the docs:

export default class SimpleSlider extends Component {
  state = { index: 0 };
  next = () => {
    this.slider.slickNext();
  };
  previous = () => {
    this.slider.slickPrev();
  };
  beforeChange = (prev, next) => {
    this.setState({ index: next });
  };
  render() {
    const settings = {
      infinite: false,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: true,
      beforeChange: this.beforeChange
    };
    const index = this.state.index;
    return (
      <div>
        <h2> Single Item</h2>
        <Slider {...settings} ref={c => (this.slider = c)}>
          <div>
            <h3>1</h3>
          </div>
          <div>
            <h3>2</h3>
          </div>
          <div>
            <h3>3</h3>
          </div>
          <div>
            <h3>4</h3>
          </div>
          <div>
            <h3>5</h3>
          </div>
          <div>
            <h3>6</h3>
          </div>
        </Slider>
        <div style={{ textAlign: "center" }}>
          <button
            className="button"
            disabled={index === 0}
            onClick={this.previous}
          >
            Previous
          </button>
          <button className="button" disabled={index === 5} onClick={this.next}>
            Next
          </button>
        </div>
      </div>
    );
  }
}

You just have to keep track of the index by keeping it in state somewhere.

Basic codepen here

I Used your code, but there is a problem, it cant be used if there is more slides add dynamically. how to achieve this? — Nandhini Kajol, Jul 12 '19 at 13:21
You can still use it, just needs a few mods. Check this example for how to use dynamic numbers of slides: https://react-slick.neostack.com/docs/example/dynamic-slides — Will Jenkins, Jul 12 '19 at 13:26
You would just then need to check e.g. `disabled={index === this.slides.length-1}` in your next button — Will Jenkins, Jul 12 '19 at 13:27
Can You Please Modify the Codepen according to this. Please, it will very helpful for me as a beginner in react — Nandhini Kajol, Jul 12 '19 at 13:27
it shows TypeError: this.slides is undefined, What to do now? — Nandhini Kajol, Jul 12 '19 at 13:40

Disable Prev or Next Button if there is no slides available before or after the current slide in react slick. (PreviousNextMethod)

2 Answers2