title: Disable swiping after last slide in react-slick
body: <p>I am using react-slick for a carousel and have a requirement to disable swiping and dragging of slides after reaching the last image.  I research and tried to set <code>swipe: false</code> on the last slide, which worked to disable swiping. However, when I am on the second to last slide and swipe to the last one, it goes to the first slide, then the last slide, and then swiping becomes disabled.</p>
  <p>Here is my code:</p>
  <pre><code>  const Home: FC&lt;any&gt; = () =&gt; {
    const [index, setIndex] = useState(0);
    const sliderRef = useRef&lt;any&gt;(null)
    const slides = [
      { path: &quot;/images/homeScreen/slider1.png&quot;, username: &quot;creatorusername1&quot;, userlink: &quot;@instagramusername1&quot; },
      { path: &quot;/images/homeScreen/slider2.png&quot;, username: &quot;creatorusername2&quot;, userlink: &quot;@instagramusername2&quot; },
      { path: &quot;/images/homeScreen/slider3.png&quot;, username: &quot;creatorusername3&quot;, userlink: &quot;@instagramusername3&quot; },
      { path: &quot;/images/homeScreen/slider1.png&quot;, username: &quot;creatorusername4&quot;, userlink: &quot;@instagramusername4&quot; },
      { path: &quot;/images/homeScreen/slider2.png&quot;, username: &quot;creatorusername5&quot;, userlink: &quot;@instagramusername5&quot; },
      { path: &quot;/images/homeScreen/slider6.png&quot;, username: &quot;creatorusername6&quot;, userlink: &quot;@instagramusername6&quot; },
    ];
  
    const beforeChange = (prev: number, next: number) =&gt; {
      setIndex(next);
    };
  
    const settings = {
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false,
      autoplay: true,
      autoplaySpeed: 2000,
      infinite: false,
      beforeChange,
      edgeFriction: 1,
      swipe : index !== slides.length - 1
    }
  
    const next = () =&gt; {
      sliderRef.current.slickNext();
    };
  
    const previous = () =&gt; {
      sliderRef.current.slickPrev();
    };
    return (
      &lt;&gt;
        &lt;div&gt;
          &lt;section&gt;
            &lt;div className=&quot;main-section text-slider&quot;&gt;
              &lt;h1 className=&quot;title-fade&quot;&gt;&lt;Translator label={index === slides.length -1 ? &quot;Rank the world&quot; : &quot;Join The Chain&quot;} /&gt;&lt;/h1&gt;
              &lt;h4 className=&quot;subtitle-fade&quot;&gt;&lt;Translator label=&quot;New Trends. New Friends.&quot; /&gt;&lt;/h4&gt;
            &lt;/div&gt;
            &lt;div className=&quot;home-slider&quot;&gt;
              &lt;div className=&quot;carousel&quot;&gt;
                &lt;Slider {...settings} className=&quot;carousel-inner&quot; ref={ref =&gt; sliderRef.current = ref}&gt;
                  {
                    slides.map((slide: any, index) =&gt; (
                      &lt;div className=&quot;carousel-item&quot; key={index}&gt;
                        &lt;div className=&quot;slide-content&quot;&gt;
                          &lt;h3&gt;{slide.username}&lt;/h3&gt;
                          &lt;span id=&quot;user-icon-link&quot;&gt;
                            &lt;Link to=&quot;/&quot; target=&quot;_blank&quot;&gt;
                              &lt;img src=&quot;/images/homeScreen/instagram.png&quot; alt=&quot;link-icon&quot; width=&quot;20&quot; height=&quot;20&quot; /&gt;{slide.userlink}&lt;/Link&gt;
                          &lt;/span&gt;
                        &lt;/div&gt;
                        &lt;img src={slide.path} alt=&quot;Chicago&quot; width=&quot;1100&quot; height=&quot;500&quot; /&gt;
                      &lt;/div&gt;
                    ))
                  }
                &lt;/Slider&gt;
                {((slides.length !== 0) &amp;&amp; (index !== slides.length - 1)) &amp;&amp;
                  &lt;&gt;
                    {(index !== 0) &amp;&amp; &lt;a href=&quot;#/&quot; className=&quot;carousel-control-prev&quot; onClick={previous}&gt;
                      &lt;img src=&quot;/images/homeScreen/skipnewbtn.png&quot; alt=&quot;Los Angeles&quot; /&gt;
                    &lt;/a&gt;}
                    {index !== slides.length - 1 &amp;&amp; &lt;a href=&quot;#/&quot; className=&quot;carousel-control-next&quot; onClick={next}  &gt;
                      &lt;img src=&quot;/images/homeScreen/fast-forward-button.gif&quot; alt=&quot;Los Angeles&quot; /&gt;
                    &lt;/a&gt;}
                  &lt;/&gt;
                }
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/section&gt;
        &lt;/div&gt;
        &lt;Footer /&gt;
      &lt;/&gt;
    )
  }
  </code></pre>