Question: Disable Next and Previous Buttons outside the slider

[berenicestr]

Hi,

I use custom previous and next buttons outside the slider.

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

I have the props: infinite: false, How can I disable the next and previous when is the first and the last slide?

Thanks in advance.

This is my code with the latest version of react and react-slick:

import { useState } from 'react';
import Slider from "react-slick”;

var settings = {
  dots: true,
  infinite: false,
  speed: 500,
  slidesToShow: 4,
  slidesToScroll: 1,
  initialSlide: 0,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 1,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 1,
        initialSlide: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ]
}; 

const [slider, setSlider] = useState<any>(null);

  const next = () => {
    slider?.slickNext();
  };
  const previous = () => {
    slider?.slickPrev();
  };

 <div style={{ textAlign: "center" }}>
      <button onClick={previous}>Previous</button>
      <button onClick={next}>Next</button>
        </div>
        <div className="slider-container">
      <Slider ref={(c: any) => setSlider(c)} {...settings}>
          <div>item1</div>
          <div>item2</div>
          <div>item3</div>
      </slider>
</div>

[Lala-kumar]

when you use "infinite: false" it resolved the issue or not?

[akiran]

@Lala-kumar Your comments are not helpful.

This project needs in-depth understanding of the library to contribute. Please don't make comments on the issues of this library.

[berenicestr]

Thanks @Lala-kumar It doesn't solve my problem. It might be better to disable the buttons, but I don't know how.

Please any help? Thanks in advance