Merge pull request #1858 from akiran/white-space-infinite

Fix an issue: showing less slides than slidesToShow in infinite mode

Author: akiran

examples/__tests__/UnevenSets.test.js

@@ -49,6 +49,8 @@ describe("UnevenSets Finite", () => {
     activeSlides = slider.find("div.slick-active");
     expect(currentSlide.props()["data-index"]).toEqual(4);
     expect(activeSlides.map(slide => slide.props()["data-index"])).toEqual([
+      2,
+      3,
       4,
       5
     ]);
@@ -59,6 +61,8 @@ describe("UnevenSets Finite", () => {
     activeSlides = slider.find("div.slick-active");
     expect(currentSlide.props()["data-index"]).toEqual(4);
     expect(activeSlides.map(slide => slide.props()["data-index"])).toEqual([
+      2,
+      3,
       4,
       5
     ]);

examples/__tests__/__snapshots__/MultipleItems.test.js.snap

@@ -989,7 +989,7 @@ exports[`Multiple Items should show slides first 3 slides when middle dot is cli
     <h2> Multiple items </h2>
     <div class=\\"slick-slider slick-initialized\\" dir=\\"ltr\\"><button type=\\"button\\" data-role=\\"none\\" class=\\"slick-arrow slick-prev\\" style=\\"display: block;\\"> Previous</button>
         <div class=\\"slick-list\\">
-            <div class=\\"slick-track\\" style=\\"opacity: 1; transform: translate3d(0px, 0px, 0px);\\">
+            <div class=\\"slick-track\\" style=\\"opacity: 1; transform: translate3d(0px, 0px, 0px); transition: transform 500ms ease;\\">
                 <div data-index=\\"-3\\" tabindex=\\"-1\\" class=\\"slick-slide slick-cloned\\" aria-hidden=\\"true\\" style=\\"width: 0px;\\">
                     <div>
                         <div tabindex=\\"-1\\" style=\\"width: 100%; display: inline-block;\\">

examples/__tests__/__snapshots__/UnevenSets.test.js.snap

@@ -20,14 +20,14 @@ exports[`UnevenSets Finite Activity test 1`] = `
                         </div>
                     </div>
                 </div>
-                <div data-index=\\"2\\" class=\\"slick-slide\\" tabindex=\\"-1\\" aria-hidden=\\"true\\" style=\\"outline: none; width: 0px;\\">
+                <div data-index=\\"2\\" class=\\"slick-slide slick-active\\" tabindex=\\"-1\\" aria-hidden=\\"false\\" style=\\"outline: none; width: 0px;\\">
                     <div>
                         <div tabindex=\\"-1\\" style=\\"width: 100%; display: inline-block;\\">
                             <h3>3</h3>
                         </div>
                     </div>
                 </div>
-                <div data-index=\\"3\\" class=\\"slick-slide\\" tabindex=\\"-1\\" aria-hidden=\\"true\\" style=\\"outline: none; width: 0px;\\">
+                <div data-index=\\"3\\" class=\\"slick-slide slick-active\\" tabindex=\\"-1\\" aria-hidden=\\"false\\" style=\\"outline: none; width: 0px;\\">
                     <div>
                         <div tabindex=\\"-1\\" style=\\"width: 100%; display: inline-block;\\">
                             <h3>4</h3>
@@ -51,8 +51,8 @@ exports[`UnevenSets Finite Activity test 1`] = `
             </div>
         </div><button type=\\"button\\" data-role=\\"none\\" class=\\"slick-arrow slick-next slick-disabled\\" style=\\"display: block;\\"> Next</button>
         <ul style=\\"display: block;\\" class=\\"slick-dots\\">
-            <li class=\\"\\"><button>1</button></li>
-            <li class=\\"slick-active\\"><button>2</button></li>
+            <li class=\\"slick-active\\"><button>1</button></li>
+            <li class=\\"\\"><button>2</button></li>
         </ul>
     </div>
 </div>"

src/utils/innerSliderUtils.js

@@ -210,6 +210,11 @@ export const slideHandler = spec => {
       if (!infinite) finalSlide = slideCount - slidesToShow;
       else if (slideCount % slidesToScroll !== 0) finalSlide = 0;
     }
+
+    if (!infinite && animationSlide + slidesToShow >= slideCount) {
+      finalSlide = slideCount - slidesToShow;
+    }
+
     animationLeft = getTrackLeft({ ...spec, slideIndex: animationSlide });
     finalLeft = getTrackLeft({ ...spec, slideIndex: finalSlide });
     if (!infinite) {