diff --git a/__test__/jQSlickUtils.js b/__test__/jQSlickUtils.js
index e8d2ff77b..47525c689 100644
--- a/__test__/jQSlickUtils.js
+++ b/__test__/jQSlickUtils.js
@@ -53,10 +53,12 @@ function fetchDetails(keys) {
     const slideObj = {
       index: $(slide).attr("data-slick-index"),
       value: $(slide)
-        .find("div")
-        .find("div")
         .find("h3")
         .text()
+      //.find("div")
+      // .find("div")
+      // .find("h3")
+      // .text()
     };
     allSlides.push(slideObj);
     if ($(slide).hasClass("slick-current")) {
diff --git a/__test__/mount/simple.test.js b/__test__/mount/simple.test.js
index 9b9001f78..890ec4548 100644
--- a/__test__/mount/simple.test.js
+++ b/__test__/mount/simple.test.js
@@ -31,7 +31,7 @@ const testsUtil = (settings, actions, keys) => {
     expect(reactDetails.activeSlides).toEqual(jqDetails.activeSlides);
   });
 
-  // Following two tests fail
+  // // Following two tests fail
   test("checking cloned slides jQuery vs react", () => {
     expect(reactDetails.clonedSlides.map(slide => slide.index)).toEqual(
       jqDetails.clonedSlides.map(slide => slide.index)
diff --git a/examples/__tests__/AdaptiveHeight.test.js b/examples/__tests__/AdaptiveHeight.test.js
new file mode 100644
index 000000000..91d0f487c
--- /dev/null
+++ b/examples/__tests__/AdaptiveHeight.test.js
@@ -0,0 +1,107 @@
+import React from "react";
+import SimpleSlider from "../SimpleSlider";
+import { render, fireEvent, waitFor, screen } from "@testing-library/react";
+import { html as beautify_html } from "js-beautify";
+import {
+  getActiveSlide,
+  clickNext,
+  clickPrevious,
+  hasClass,
+  getActiveSlides,
+  getActiveSlidesCount,
+  getActiveSlidesText,
+  getButtons,
+  getButtonsListItem,
+  getCurrentSlide
+} from "../../test-utils";
+
+describe("Adaptive Height example", () => {
+  it("should have 8 slides (1(preclone) + 6(actual) + 1(postclone))", function() {
+    const { container } = render(<SimpleSlider a={5} />);
+    expect(container.getElementsByClassName("slick-slide").length).toBe(8);
+  });
+  it("should have 3 clone slides", function() {
+    const { container } = render(<SimpleSlider />);
+    expect(container.getElementsByClassName("slick-cloned").length).toBe(2);
+  });
+  it("should have 1 current slide", function() {
+    const { container } = render(<SimpleSlider />);
+    expect(
+      container.querySelectorAll(".slick-slide.slick-current").length
+    ).toBe(1);
+    expect(parseInt(getCurrentSlide(container).textContent) - 1).toBe(0);
+  });
+  it("should have 1 active slide", function() {
+    const { container } = render(<SimpleSlider />);
+    expect(container.querySelectorAll(".slick-slide.slick-active").length).toBe(
+      1
+    );
+    expect(
+      Array.from(getActiveSlide(container).children).map(
+        e => parseInt(e.textContent) - 1
+      )[0]
+    ).toBe(0);
+  });
+  it("should have 6 dots", function() {
+    const { container } = render(<SimpleSlider />);
+    expect(
+      container.getElementsByClassName("slick-dots")[0].children.length
+    ).toBe(6);
+  });
+  it("should have 1 active dot", function() {
+    const { container } = render(<SimpleSlider />);
+
+    expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+      1
+    );
+  });
+  it("should have a prev arrow", function() {
+    const { container } = render(<SimpleSlider />);
+    expect(container.getElementsByClassName("slick-prev").length).toBe(1);
+  });
+  it("should have a next arrow", function() {
+    const { container } = render(<SimpleSlider />);
+    expect(container.getElementsByClassName("slick-next").length).toBe(1);
+  });
+  it("should got to next slide when next button is clicked", function() {
+    const { container } = render(<SimpleSlider />);
+    clickNext(container);
+    expect(
+      container.querySelectorAll(".slick-slide.slick-active")[0].textContent
+    ).toBe("2");
+    expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+      1
+    );
+    expect(
+      container.querySelectorAll(".slick-dots")[0].children[1]
+    ).toHaveClass("slick-active");
+  });
+  it("should goto previous slide when prev button is clicked", function() {
+    const { container } = render(<SimpleSlider />);
+    clickPrevious(container);
+    expect(
+      container.querySelectorAll(".slick-slide.slick-active")[0].textContent
+    ).toBe("6");
+    expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+      1
+    );
+    expect(
+      container.querySelectorAll(".slick-dots")[0].children[5]
+    ).toHaveClass("slick-active");
+  });
+  it("should goto 4th slide when 4th dot is clicked", function() {
+    const { container } = render(<SimpleSlider />);
+    fireEvent(
+      container.querySelectorAll(".slick-dots button")[3],
+      new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true
+      })
+    );
+    expect(getActiveSlidesText(container)[0]).toEqual("4");
+    expect(getActiveSlidesCount(container)).toEqual(1);
+    expect(hasClass(getButtonsListItem(container)[3], "slick-active")).toEqual(
+      true
+    );
+  });
+});
diff --git a/examples/__tests__/AppendDots.test.js b/examples/__tests__/AppendDots.test.js
new file mode 100644
index 000000000..4cf9238ef
--- /dev/null
+++ b/examples/__tests__/AppendDots.test.js
@@ -0,0 +1,125 @@
+import React from "react";
+import AppendDots from "../AppendDots";
+import { render, fireEvent, waitFor, screen } from "@testing-library/react";
+import { html as beautify_html } from "js-beautify";
+import {
+  getActiveSlide,
+  clickNext,
+  clickPrevious,
+  hasClass,
+  getActiveSlides,
+  getActiveSlidesCount,
+  getActiveSlidesText,
+  getButtons,
+  getButtonsListItem,
+  getCurrentSlide,
+  getSlideHeight
+} from "../../test-utils";
+
+describe("Append Dots example", () => {
+  it("should have 8 slides (1(preclone) + 6(actual) + 1(postclone))", function() {
+    const { container } = render(<AppendDots a={5} />);
+    expect(container.getElementsByClassName("slick-slide").length).toBe(8);
+  });
+  it("should have 3 clone slides", function() {
+    const { container } = render(<AppendDots />);
+    expect(container.getElementsByClassName("slick-cloned").length).toBe(2);
+  });
+  it("should have 1 current slide", function() {
+    const { container } = render(<AppendDots />);
+    expect(
+      container.querySelectorAll(".slick-slide.slick-current").length
+    ).toBe(1);
+    expect(parseInt(getCurrentSlide(container).textContent) - 1).toBe(0);
+  });
+  it("should have 1 active slide", function() {
+    const { container } = render(<AppendDots />);
+    expect(container.querySelectorAll(".slick-slide.slick-active").length).toBe(
+      1
+    );
+    expect(
+      Array.from(getActiveSlide(container).children).map(
+        e => parseInt(e.textContent) - 1
+      )[0]
+    ).toBe(0);
+  });
+  it("should have 6 dots", function() {
+    const { container } = render(<AppendDots />);
+    console.log(
+      Array.from(container.getElementsByClassName("slick-dots"))[0].children[0]
+        .children.length
+    );
+    expect(
+      container.getElementsByClassName("slick-dots")[0].children[0].children
+        .length
+    ).toBe(6);
+  });
+  it("should have 1 active dot", function() {
+    const { container } = render(<AppendDots />);
+
+    expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+      1
+    );
+  });
+  it("should have a prev arrow", function() {
+    const { container } = render(<AppendDots />);
+    expect(container.getElementsByClassName("slick-prev").length).toBe(1);
+  });
+  it("should have a next arrow", function() {
+    const { container } = render(<AppendDots />);
+    expect(container.getElementsByClassName("slick-next").length).toBe(1);
+  });
+  it("should got to next slide when next button is clicked", function() {
+    const { container } = render(<AppendDots />);
+    clickNext(container);
+    expect(
+      container.querySelectorAll(".slick-slide.slick-active")[0].textContent
+    ).toBe("2");
+    expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+      1
+    );
+    expect(
+      container.getElementsByClassName("slick-dots")[0].children[0].children[1]
+    ).toHaveClass("slick-active");
+  });
+  it("should goto previous slide when prev button is clicked", function() {
+    const { container } = render(<AppendDots />);
+    clickPrevious(container);
+    expect(
+      container.querySelectorAll(".slick-slide.slick-active")[0].textContent
+    ).toBe("6");
+    expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+      1
+    );
+    expect(
+      container.getElementsByClassName("slick-dots")[0].children[0].children[5]
+    ).toHaveClass("slick-active");
+  });
+  it("should goto 4th slide when 4th dot is clicked", function() {
+    const { container } = render(<AppendDots />);
+    fireEvent(
+      container.querySelectorAll(".slick-dots div")[3],
+      new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true
+      })
+    );
+    expect(getActiveSlidesText(container)[0]).toEqual("4");
+    expect(getActiveSlidesCount(container)).toEqual(1);
+    expect(
+      hasClass(
+        container.getElementsByClassName("slick-dots")[0].children[0]
+          .children[3],
+        "slick-active"
+      )
+    ).toEqual(true);
+  });
+  it("check the content of dots", function() {
+    const { container } = render(<AppendDots />);
+    const array = [];
+    Array.from(
+      container.getElementsByClassName("slick-dots")[0].children[0].children
+    ).forEach(i => array.push(i.textContent));
+    expect(array).toEqual(["1", "2", "3", "4", "5", "6"]);
+  });
+});
diff --git a/examples/__tests__/AsNavFor.test.js b/examples/__tests__/AsNavFor.test.js
new file mode 100644
index 000000000..8a9b30153
--- /dev/null
+++ b/examples/__tests__/AsNavFor.test.js
@@ -0,0 +1,104 @@
+import React from "react";
+import AsNavFor from "../AsNavFor";
+import { render, fireEvent, waitFor, screen } from "@testing-library/react";
+import { html as beautify_html } from "js-beautify";
+import {
+  getActiveSlide,
+  clickNext,
+  clickPrevious,
+  hasClass,
+  getActiveSlides,
+  getActiveSlidesCount,
+  getActiveSlidesText,
+  getButtons,
+  getButtonsListItem,
+  getCurrentSlide,
+  getSlideHeight
+} from "../../test-utils";
+
+describe("As Nav For example", () => {
+  it("Number of slides should be 2", function() {
+    const { container } = render(<AsNavFor />);
+    expect(container.getElementsByClassName("slick-slider").length).toBe(2);
+  });
+  it("First Slide should have 8 slides (1(preclone) + 6(actual) + 1(postclone))", function() {
+    const { container } = render(<AsNavFor a={5} />);
+    expect(
+      container
+        .getElementsByClassName("slick-slider")[0]
+        .getElementsByClassName("slick-slide").length
+    ).toBe(8);
+  });
+  it("Second Slide should have 8 slides (1(preclone) + 6(actual) + 1(postclone))", function() {
+    const { container } = render(<AsNavFor a={5} />);
+    expect(
+      container
+        .getElementsByClassName("slick-slider")[1]
+        .getElementsByClassName("slick-slide").length
+    ).toBe(12);
+  });
+  it("Clicking on next of first slide should change second slide too", function() {
+    const { container } = render(<AsNavFor />);
+    expect(
+      getActiveSlidesText(container.getElementsByClassName("slick-slider")[0])
+    ).toEqual(["1"]);
+    expect(
+      getActiveSlidesText(container.getElementsByClassName("slick-slider")[1])
+    ).toEqual(["1", "2", "3"]);
+    clickNext(container.getElementsByClassName("slick-slider")[0]);
+    expect(
+      getActiveSlidesText(container.getElementsByClassName("slick-slider")[0])
+    ).toEqual(["2"]);
+    expect(
+      getActiveSlidesText(container.getElementsByClassName("slick-slider")[1])
+    ).toEqual(["2", "3", "4"]);
+  });
+  it("Clicking on next of second slide should change first slide too", function() {
+    const { container } = render(<AsNavFor />);
+    expect(
+      getActiveSlidesText(container.getElementsByClassName("slick-slider")[0])
+    ).toEqual(["1"]);
+    expect(
+      getActiveSlidesText(container.getElementsByClassName("slick-slider")[1])
+    ).toEqual(["1", "2", "3"]);
+    clickNext(container.getElementsByClassName("slick-slider")[1]);
+    expect(
+      getActiveSlidesText(container.getElementsByClassName("slick-slider")[0])
+    ).toEqual(["2"]);
+    expect(
+      getActiveSlidesText(container.getElementsByClassName("slick-slider")[1])
+    ).toEqual(["2", "3", "4"]);
+  });
+  it("Clicking on previous button of first slide should change second slide too", function() {
+    const { container } = render(<AsNavFor />);
+    expect(
+      getActiveSlidesText(container.getElementsByClassName("slick-slider")[0])
+    ).toEqual(["1"]);
+    expect(
+      getActiveSlidesText(container.getElementsByClassName("slick-slider")[1])
+    ).toEqual(["1", "2", "3"]);
+    clickPrevious(container.getElementsByClassName("slick-slider")[0]);
+    expect(
+      getActiveSlidesText(container.getElementsByClassName("slick-slider")[0])
+    ).toEqual(["6"]);
+    expect(
+      getActiveSlidesText(container.getElementsByClassName("slick-slider")[1])
+    ).toEqual(["6", "1", "2"]);
+  });
+  it("Clicking on previous button of second slide should change first slide too", function() {
+    const { container } = render(<AsNavFor />);
+    expect(
+      getActiveSlidesText(container.getElementsByClassName("slick-slider")[0])
+    ).toEqual(["1"]);
+    expect(
+      getActiveSlidesText(container.getElementsByClassName("slick-slider")[1])
+    ).toEqual(["1", "2", "3"]);
+    clickPrevious(container.getElementsByClassName("slick-slider")[1]);
+    expect(
+      getActiveSlidesText(container.getElementsByClassName("slick-slider")[0])
+    ).toEqual(["6"]);
+    expect(
+      getActiveSlidesText(container.getElementsByClassName("slick-slider")[1])
+    ).toEqual(["6", "1", "2"]);
+  });
+});
diff --git a/examples/__tests__/AutoPlay.test.js b/examples/__tests__/AutoPlay.test.js
new file mode 100644
index 000000000..16c589c7a
--- /dev/null
+++ b/examples/__tests__/AutoPlay.test.js
@@ -0,0 +1,284 @@
+import React from "react";
+import AutoPlay from "../AutoPlay";
+import AutoPlayMethods from "../AutoPlayMethods";
+import { render, fireEvent, waitFor, screen } from "@testing-library/react";
+import { html as beautify_html, js_beautify } from "js-beautify";
+import jest from "jest";
+import {
+  getActiveSlide,
+  clickNext,
+  clickPrevious,
+  hasClass,
+  getActiveSlides,
+  getActiveSlidesCount,
+  getActiveSlidesText,
+  getButtons,
+  getButtonsListItem,
+  getCurrentSlide,
+  getSlideHeight
+} from "../../test-utils";
+
+describe("AutoPlay example", () => {
+  it("should have 8 slides (3(preclone) + 6(actual) + 3(postclone))", function() {
+    const { container } = render(<AutoPlay a={5} />);
+    expect(container.getElementsByClassName("slick-slide").length).toBe(12);
+  });
+  it("should have 3 clone slides", function() {
+    const { container } = render(<AutoPlay />);
+    expect(container.getElementsByClassName("slick-cloned").length).toBe(6);
+  });
+  it("should have 1 current slide", function() {
+    const { container } = render(<AutoPlay />);
+    expect(
+      container.querySelectorAll(".slick-slide.slick-current").length
+    ).toBe(1);
+    expect(parseInt(getCurrentSlide(container).textContent) - 1).toBe(0);
+  });
+  it("should have 3 active slide", function() {
+    const { container } = render(<AutoPlay />);
+    expect(container.querySelectorAll(".slick-slide.slick-active").length).toBe(
+      3
+    );
+    expect(
+      Array.from(getActiveSlide(container).children).map(
+        e => parseInt(e.textContent) - 1
+      )[0]
+    ).toBe(0);
+  });
+  it("should have 6 dots", function() {
+    const { container } = render(<AutoPlay />);
+    expect(
+      container.getElementsByClassName("slick-dots")[0].children.length
+    ).toBe(6);
+  });
+  it("should have 1 active dot", function() {
+    const { container } = render(<AutoPlay />);
+
+    expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+      1
+    );
+  });
+  it("should have a prev arrow", function() {
+    const { container } = render(<AutoPlay />);
+    expect(container.getElementsByClassName("slick-prev").length).toBe(1);
+  });
+  it("should have a next arrow", function() {
+    const { container } = render(<AutoPlay />);
+    expect(container.getElementsByClassName("slick-next").length).toBe(1);
+  });
+  it("should got to next slide when next button is clicked", function() {
+    const { container } = render(<AutoPlay />);
+    clickNext(container);
+    expect(
+      container.querySelectorAll(".slick-slide.slick-active")[0].textContent
+    ).toBe("2");
+    expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+      1
+    );
+    expect(
+      container.querySelectorAll(".slick-dots")[0].children[1]
+    ).toHaveClass("slick-active");
+  });
+  it("should goto previous slide when prev button is clicked", function() {
+    const { container } = render(<AutoPlay />);
+    clickPrevious(container);
+    expect(
+      container.querySelectorAll(".slick-slide.slick-active")[0].textContent
+    ).toBe("6");
+    expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+      1
+    );
+    expect(
+      container.querySelectorAll(".slick-dots")[0].children[5]
+    ).toHaveClass("slick-active");
+  });
+  it("should goto 4th slide when 4th dot is clicked", function() {
+    const { container } = render(<AutoPlay />);
+    fireEvent(
+      container.querySelectorAll(".slick-dots button")[3],
+      new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true
+      })
+    );
+    expect(getActiveSlidesText(container)).toEqual(["4", "5", "6"]);
+    expect(getActiveSlidesCount(container)).toEqual(3);
+    expect(hasClass(getButtonsListItem(container)[3], "slick-active")).toEqual(
+      true
+    );
+  });
+  it("Should change the active slides automatically", async function() {
+    const { container } = render(<AutoPlay />);
+    expect(getActiveSlidesText(container)).toEqual(["1", "2", "3"]);
+    await waitFor(
+      () => {
+        expect(getActiveSlidesText(container)).toEqual(["2", "3", "4"]);
+      },
+      { timeout: "3000" }
+    );
+  });
+});
+describe("AutoPlay method example", () => {
+  it("should have 8 slides (3(preclone) + 6(actual) + 3(postclone))", function() {
+    const { container } = render(<AutoPlayMethods a={5} />);
+    expect(container.getElementsByClassName("slick-slide").length).toBe(12);
+  });
+  it("should have 3 clone slides", function() {
+    const { container } = render(<AutoPlayMethods />);
+    expect(container.getElementsByClassName("slick-cloned").length).toBe(6);
+  });
+  it("should have 1 current slide", function() {
+    const { container } = render(<AutoPlayMethods />);
+    expect(
+      container.querySelectorAll(".slick-slide.slick-current").length
+    ).toBe(1);
+    expect(parseInt(getCurrentSlide(container).textContent) - 1).toBe(0);
+  });
+  it("should have 3 active slide", function() {
+    const { container } = render(<AutoPlayMethods />);
+    expect(container.querySelectorAll(".slick-slide.slick-active").length).toBe(
+      3
+    );
+    expect(
+      Array.from(getActiveSlide(container).children).map(
+        e => parseInt(e.textContent) - 1
+      )[0]
+    ).toBe(0);
+  });
+  it("should have 6 dots", function() {
+    const { container } = render(<AutoPlayMethods />);
+    expect(
+      container.getElementsByClassName("slick-dots")[0].children.length
+    ).toBe(6);
+  });
+  it("should have 1 active dot", function() {
+    const { container } = render(<AutoPlayMethods />);
+
+    expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+      1
+    );
+  });
+  it("should have a prev arrow", function() {
+    const { container } = render(<AutoPlayMethods />);
+    expect(container.getElementsByClassName("slick-prev").length).toBe(1);
+  });
+  it("should have a next arrow", function() {
+    const { container } = render(<AutoPlayMethods />);
+    expect(container.getElementsByClassName("slick-next").length).toBe(1);
+  });
+  it("should got to next slide when next button is clicked", function() {
+    const { container } = render(<AutoPlayMethods />);
+    clickNext(container);
+    expect(
+      container.querySelectorAll(".slick-slide.slick-active")[0].textContent
+    ).toBe("2");
+    expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+      1
+    );
+    expect(
+      container.querySelectorAll(".slick-dots")[0].children[1]
+    ).toHaveClass("slick-active");
+  });
+  it("should goto previous slide when prev button is clicked", function() {
+    const { container } = render(<AutoPlayMethods />);
+    clickPrevious(container);
+    expect(
+      container.querySelectorAll(".slick-slide.slick-active")[0].textContent
+    ).toBe("6");
+    expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+      1
+    );
+    expect(
+      container.querySelectorAll(".slick-dots")[0].children[5]
+    ).toHaveClass("slick-active");
+  });
+  it("should goto 4th slide when 4th dot is clicked", function() {
+    const { container } = render(<AutoPlayMethods />);
+    fireEvent(
+      container.querySelectorAll(".slick-dots button")[3],
+      new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true
+      })
+    );
+    expect(getActiveSlidesText(container)).toEqual(["4", "5", "6"]);
+    expect(getActiveSlidesCount(container)).toEqual(3);
+    expect(hasClass(getButtonsListItem(container)[3], "slick-active")).toEqual(
+      true
+    );
+  });
+  it("Should change the active slides automatically", async function() {
+    const { container } = render(<AutoPlayMethods />);
+    expect(getActiveSlidesText(container)).toEqual(["1", "2", "3"]);
+    await waitFor(
+      () => {
+        expect(getActiveSlidesText(container)).toEqual(["2", "3", "4"]);
+      },
+      { timeout: "3000" }
+    );
+  });
+  it("Shouldn't change the active slides when Paused button is clicked", async function() {
+    const { container } = render(<AutoPlayMethods />);
+    expect(getActiveSlidesText(container)).toEqual(["1", "2", "3"]);
+    let button1;
+    Array.from(container.querySelectorAll(" .button")).forEach(e =>
+      e.textContent === "Pause" ? (button1 = e) : null
+    );
+    fireEvent(
+      button1,
+      new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true
+      })
+    );
+    //This will fail as active slides wont change
+    //await waitFor(()=>{console.log(getActiveSlidesText(container));expect(getActiveSlidesText(container)).toEqual(["3","4","5"]);},{timeout:"10000"});
+    await waitFor(
+      () => {
+        expect(getActiveSlidesText(container)).toEqual(["1", "2", "3"]);
+      },
+      { timeout: "10000" }
+    );
+  });
+  it("Should change the active slides when Play button is clicked", async function() {
+    const { container } = render(<AutoPlayMethods />);
+    expect(getActiveSlidesText(container)).toEqual(["1", "2", "3"]);
+    let button1;
+    let button2;
+    Array.from(container.querySelectorAll(" .button")).forEach(e =>
+      e.textContent === "Pause"
+        ? (button1 = e)
+        : e.textContent === "Play"
+        ? (button2 = e)
+        : null
+    );
+    fireEvent(
+      button1,
+      new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true
+      })
+    );
+    //This will fail as active slides wont change
+    //await waitFor(()=>{console.log(getActiveSlidesText(container));expect(getActiveSlidesText(container)).toEqual(["3","4","5"]);},{timeout:"10000"});
+    await waitFor(
+      () => {
+        expect(getActiveSlidesText(container)).toEqual(["1", "2", "3"]);
+      },
+      { timeout: "10000" }
+    );
+    fireEvent(
+      button2,
+      new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true
+      })
+    );
+    await waitFor(
+      () => {
+        expect(getActiveSlidesText(container)).toEqual(["3", "4", "5"]);
+      },
+      { timeout: "10000" }
+    );
+  });
+});
diff --git a/examples/__tests__/CentreMode.test.js b/examples/__tests__/CentreMode.test.js
index d2c3c5191..5ccab1f1e 100644
--- a/examples/__tests__/CentreMode.test.js
+++ b/examples/__tests__/CentreMode.test.js
@@ -17,8 +17,8 @@ describe("CenterMode Tests", () => {
     let totalSlides = getSlidesCount(container);
     let clonedSlides = getClonesCount(container);
     let activeSlides = getActiveSlidesCount(container);
-    expect(totalSlides).toEqual(16);
-    expect(clonedSlides).toEqual(10);
+    expect(totalSlides).toEqual(14);
+    expect(clonedSlides).toEqual(8);
     expect(activeSlides).toEqual(3);
     //expect(beautify_html(toString(container))).toMatchSnapshot();
   });
diff --git a/examples/__tests__/CustomArrow.test.js b/examples/__tests__/CustomArrow.test.js
new file mode 100644
index 000000000..5394bb574
--- /dev/null
+++ b/examples/__tests__/CustomArrow.test.js
@@ -0,0 +1,112 @@
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import {
+  activeSlide,
+  activeSlides,
+  clickNext,
+  clickPrevious,
+  getActiveButton,
+  getActiveSlide,
+  getActiveSlidesCount,
+  getActiveSlidesText,
+  getButtons,
+  getButtonsLength,
+  getButtonsListItem,
+  getClonesCount,
+  getCurrentSlide,
+  getSlidesCount,
+  hasClass
+} from "../../test-utils";
+import CustomArrows from "../CustomArrows";
+describe("CustomArrow example", () => {
+  it("should have 8 slides (3(preclone) + 6(actual) + 3(postclone))", function() {
+    const { container } = render(<CustomArrows />);
+    expect(container.getElementsByClassName("slick-slide").length).toBe(12);
+  });
+  it("should have 3 clone slides", function() {
+    const { container } = render(<CustomArrows />);
+    expect(container.getElementsByClassName("slick-cloned").length).toBe(6);
+  });
+  it("should have 1 current slide", function() {
+    const { container } = render(<CustomArrows />);
+    expect(
+      container.getElementsByClassName("slick-slide slick-current").length
+    ).toBe(1);
+    expect(parseInt(getCurrentSlide(container).textContent) - 1).toBe(0);
+  });
+  it("should have 3 active slide", function() {
+    const { container } = render(<CustomArrows />);
+    expect(
+      container.getElementsByClassName("slick-slide slick-active").length
+    ).toBe(3);
+    expect(
+      Array.from(getActiveSlide(container).children).map(
+        e => parseInt(e.textContent) - 1
+      )[0]
+    ).toBe(0);
+  });
+  it("should have 6 dots", function() {
+    const { container } = render(<CustomArrows />);
+    expect(
+      container.getElementsByClassName("slick-dots")[0].children.length
+    ).toBe(6);
+  });
+  it("should have 1 active dot", function() {
+    const { container } = render(<CustomArrows />);
+
+    expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+      1
+    );
+  });
+  it("should have a prev arrow", function() {
+    const { container } = render(<CustomArrows />);
+    expect(container.getElementsByClassName("slick-prev").length).toBe(1);
+  });
+  it("should have a next arrow", function() {
+    const { container } = render(<CustomArrows />);
+    expect(container.getElementsByClassName("slick-next").length).toBe(1);
+  });
+  it("should got to next slide when next button is clicked", function() {
+    const { container } = render(<CustomArrows />);
+    clickNext(container);
+    expect(
+      container.getElementsByClassName("slick-slide slick-active")[0]
+        .textContent
+    ).toBe("2");
+    expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+      1
+    );
+    expect(
+      container.querySelectorAll(".slick-dots")[0].children[1]
+    ).toHaveClass("slick-active");
+  });
+  it("should goto previous slide when prev button is clicked", function() {
+    const { container } = render(<CustomArrows />);
+    clickPrevious(container);
+    expect(
+      container.getElementsByClassName("slick-slide slick-active")[0]
+        .textContent
+    ).toBe("6");
+    expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+      1
+    );
+    expect(
+      container.querySelectorAll(".slick-dots")[0].children[5]
+    ).toHaveClass("slick-active");
+  });
+  it("should goto 4th slide when 4th dot is clicked", function() {
+    const { container } = render(<CustomArrows />);
+    fireEvent(
+      container.querySelectorAll(".slick-dots button")[3],
+      new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true
+      })
+    );
+    expect(getActiveSlidesText(container)).toEqual(["4", "5", "6"]);
+    expect(getActiveSlidesCount(container)).toEqual(3);
+    expect(hasClass(getButtonsListItem(container)[3], "slick-active")).toEqual(
+      true
+    );
+  });
+});
diff --git a/examples/__tests__/CustomPaging.test.js b/examples/__tests__/CustomPaging.test.js
new file mode 100644
index 000000000..c7d7b08d8
--- /dev/null
+++ b/examples/__tests__/CustomPaging.test.js
@@ -0,0 +1,94 @@
+import React from "react";
+import CustomPaging from "../CustomPaging";
+import { render, fireEvent, waitFor, screen } from "@testing-library/react";
+import { html as beautify_html } from "js-beautify";
+import {
+  getActiveSlide,
+  clickNext,
+  clickPrevious,
+  hasClass,
+  getActiveSlides,
+  getActiveSlidesCount,
+  getActiveSlidesText,
+  getButtons,
+  getButtonsListItem,
+  getCurrentSlide
+} from "../../test-utils";
+
+describe("Custom Paging example", () => {
+  it("should have 13 slides (1(preclone) + 6(actual) + 1(postclone))", function() {
+    const { container } = render(<CustomPaging />);
+    expect(container.getElementsByClassName("slick-slide").length).toBe(6);
+  });
+  it("should have 3 clone slides", function() {
+    const { container } = render(<CustomPaging />);
+    expect(container.getElementsByClassName("slick-cloned").length).toBe(2);
+  });
+  it("should have 1 current slide", function() {
+    const { container } = render(<CustomPaging />);
+    expect(
+      container.querySelectorAll(".slick-slide.slick-current").length
+    ).toBe(1);
+  });
+  it("should have 1 active slide", function() {
+    const { container } = render(<CustomPaging />);
+    expect(container.querySelectorAll(".slick-slide.slick-active").length).toBe(
+      1
+    );
+  });
+  it("should have 6 dots", function() {
+    const { container } = render(<CustomPaging />);
+    expect(
+      container.getElementsByClassName("slick-dots")[0].children.length
+    ).toBe(4);
+  });
+  it("should have 1 active dot", function() {
+    const { container } = render(<CustomPaging />);
+
+    expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+      1
+    );
+  });
+  it("should have a prev arrow", function() {
+    const { container } = render(<CustomPaging />);
+    expect(container.getElementsByClassName("slick-prev").length).toBe(1);
+  });
+  it("should have a next arrow", function() {
+    const { container } = render(<CustomPaging />);
+    expect(container.getElementsByClassName("slick-next").length).toBe(1);
+  });
+  it("should got to next slide when next button is clicked", function() {
+    const { container } = render(<CustomPaging />);
+    clickNext(container);
+    expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+      1
+    );
+    expect(
+      container.querySelectorAll(".slick-dots")[0].children[1]
+    ).toHaveClass("slick-active");
+  });
+  it("should goto previous slide when prev button is clicked", function() {
+    const { container } = render(<CustomPaging />);
+    clickPrevious(container);
+    expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+      1
+    );
+    expect(
+      container.querySelectorAll(".slick-dots")[0].children[3]
+    ).toHaveClass("slick-active");
+  });
+  it("should goto 4th slide when 4th dot is clicked", function() {
+    const { container } = render(<CustomPaging />);
+    fireEvent(
+      container.querySelectorAll(".slick-dots a")[3],
+      new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true
+      })
+    );
+    expect(getActiveSlidesCount(container)).toEqual(1);
+    expect(hasClass(getButtonsListItem(container)[3], "slick-active")).toEqual(
+      true
+    );
+  });
+});
diff --git a/examples/__tests__/CustomSlides.js b/examples/__tests__/CustomSlides.js
new file mode 100644
index 000000000..a2c3d72f4
--- /dev/null
+++ b/examples/__tests__/CustomSlides.js
@@ -0,0 +1,135 @@
+import React from "react";
+import SimpleSlider from "../CustomSlides";
+import { render, fireEvent, waitFor, screen } from "@testing-library/react";
+import { html as beautify_html } from "js-beautify";
+import {
+  getActiveSlide,
+  clickNext,
+  clickPrevious,
+  hasClass,
+  getActiveSlides,
+  getActiveSlidesCount,
+  getActiveSlidesText,
+  getButtons,
+  getButtonsListItem,
+  getCurrentSlide
+} from "../../test-utils";
+
+describe("Custom Slider example", () => {
+  it("should have 13 slides (1(preclone) + 6(actual) + 1(postclone))", function() {
+    const { container } = render(<SimpleSlider />);
+    expect(container.getElementsByClassName("slick-slide").length).toBe(8);
+  });
+  it("should have 3 clone slides", function() {
+    const { container } = render(<SimpleSlider />);
+    expect(container.getElementsByClassName("slick-cloned").length).toBe(2);
+  });
+  it("should have 1 current slide", function() {
+    const { container } = render(<SimpleSlider />);
+    expect(
+      container.querySelectorAll(".slick-slide.slick-current").length
+    ).toBe(1);
+    expect(parseInt(getCurrentSlide(container).textContent) - 1).toBe(0);
+  });
+  it("should have 1 active slide", function() {
+    const { container } = render(<SimpleSlider />);
+    expect(container.querySelectorAll(".slick-slide.slick-active").length).toBe(
+      1
+    );
+    expect(
+      Array.from(getActiveSlide(container).children).map(
+        e => parseInt(e.textContent) - 1
+      )[0]
+    ).toBe(0);
+  });
+  it("should have 6 dots", function() {
+    const { container } = render(<SimpleSlider />);
+    expect(
+      container.getElementsByClassName("slick-dots")[0].children.length
+    ).toBe(6);
+  });
+  it("should have 1 active dot", function() {
+    const { container } = render(<SimpleSlider />);
+
+    expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+      1
+    );
+  });
+  it("should have a prev arrow", function() {
+    const { container } = render(<SimpleSlider />);
+    expect(container.getElementsByClassName("slick-prev").length).toBe(1);
+  });
+  it("should have a next arrow", function() {
+    const { container } = render(<SimpleSlider />);
+    expect(container.getElementsByClassName("slick-next").length).toBe(1);
+  });
+  it("should got to next slide when next button is clicked", function() {
+    const { container } = render(<SimpleSlider />);
+    clickNext(container);
+    expect(
+      container.querySelectorAll(".slick-slide.slick-active")[0].textContent
+    ).toBe("2");
+    expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+      1
+    );
+    expect(
+      container.querySelectorAll(".slick-dots")[0].children[1]
+    ).toHaveClass("slick-active");
+  });
+  it("should goto previous slide when prev button is clicked", function() {
+    const { container } = render(<SimpleSlider />);
+    clickPrevious(container);
+    expect(
+      container.querySelectorAll(".slick-slide.slick-active")[0].textContent
+    ).toBe("6");
+    expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+      1
+    );
+    expect(
+      container.querySelectorAll(".slick-dots")[0].children[5]
+    ).toHaveClass("slick-active");
+  });
+  it("should goto 4th slide when 4th dot is clicked", function() {
+    const { container } = render(<SimpleSlider />);
+    fireEvent(
+      container.querySelectorAll(".slick-dots button")[3],
+      new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true
+      })
+    );
+    expect(getActiveSlidesText(container)[0]).toEqual("4");
+    expect(getActiveSlidesCount(container)).toEqual(1);
+    expect(hasClass(getButtonsListItem(container)[3], "slick-active")).toEqual(
+      true
+    );
+  });
+});
+
+describe("Simple Slider Snapshots", function() {
+  it("slider initial state", function() {
+    const { container } = render(<SimpleSlider />);
+    // expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+  it("click on next button", function() {
+    const { container } = render(<SimpleSlider />);
+    clickNext(container);
+    //expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+  it("click on prev button", function() {
+    const { container } = render(<SimpleSlider />);
+    clickPrevious(container);
+    // expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+  it("click on 3rd dot", function() {
+    const { container } = render(<SimpleSlider />);
+    fireEvent(
+      getButtons(container)[2],
+      new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true
+      })
+    );
+    // expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+});
diff --git a/examples/__tests__/DynamicSlides.test.js b/examples/__tests__/DynamicSlides.test.js
new file mode 100644
index 000000000..3148488fc
--- /dev/null
+++ b/examples/__tests__/DynamicSlides.test.js
@@ -0,0 +1,225 @@
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import { html as beautify_html } from "js-beautify";
+import {
+  activeSlide,
+  activeSlides,
+  clickNext,
+  clickPrevious,
+  getActiveButton,
+  getActiveSlidesCount,
+  getActiveSlidesText,
+  getButtons,
+  getButtonsLength,
+  getButtonsListItem,
+  getClonesCount,
+  getCurrentSlide,
+  getSlidesCount,
+  hasClass
+} from "../../test-utils";
+import DynamicSlides from "../DynamicSlides";
+
+describe("Multiple Items", function() {
+  it("should have 9 actual slides and (3(pre) + 3(post)) clone slides", function() {
+    const { container } = render(<DynamicSlides />);
+    expect(getSlidesCount(container)).toEqual(12);
+    expect(getClonesCount(container)).toEqual(6);
+    //expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+  it("should have 3 active slides", function() {
+    const { container } = render(<DynamicSlides />);
+    expect(getActiveSlidesCount(container)).toEqual(3);
+    // expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+  it("should have 2 dots", function() {
+    const { container } = render(<DynamicSlides />);
+    expect(getButtonsLength(container)).toEqual(2);
+    // expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+  it("should show first 3 slides", function() {
+    const { container } = render(<DynamicSlides />);
+    expect(getActiveButton(container)).toEqual(["1"]);
+    expect(getActiveSlidesText(container)).toEqual(["1", "2", "3"]);
+    // expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+  it("should show slides from 4 to 6 when next button is clicked", function() {
+    const { container } = render(<DynamicSlides />);
+    clickNext(container);
+    // Array.from(container.querySelectorAll(".slick-current")).map(e=>console.log(e.textContent))
+    expect(getActiveButton(container)).toEqual(["2"]);
+    expect(getActiveSlidesText(container)).toEqual(["4", "5", "6"]);
+    // expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+  it("should show last 3 slides when previous button is clicked", function() {
+    const { container } = render(<DynamicSlides />);
+    clickPrevious(container);
+    expect(getActiveButton(container)).toEqual(["2"]);
+    expect(getActiveSlidesText(container)).toEqual(["4", "5", "6"]);
+    // expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+  it("should show slides first 3 slides when first dot is clicked", function() {
+    const { container } = render(<DynamicSlides />);
+    fireEvent(
+      getButtons(container)[0],
+      new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true
+      })
+    );
+    expect(getActiveButton(container)).toEqual(["1"]);
+    expect(getActiveSlidesText(container)).toEqual(["1", "2", "3"]);
+    // expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+  it("should show slides from 4 to 6 when last dot is clicked", function() {
+    const { container } = render(<DynamicSlides />);
+    fireEvent(
+      getButtons(container)[1],
+      new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true
+      })
+    );
+    expect(getActiveButton(container)).toEqual(["2"]);
+    expect(getActiveSlidesText(container)).toEqual(["4", "5", "6"]);
+    // expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+  it("should have 9 actual slides and (3(pre) + 3(post)) clone slides", function() {
+    const { container } = render(<DynamicSlides />);
+    fireEvent(
+      container.getElementsByClassName("button")[0],
+      new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true
+      })
+    );
+    expect(getSlidesCount(container)).toEqual(15);
+    expect(getClonesCount(container)).toEqual(6);
+    //expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+  it("should have 3 active slides", function() {
+    const { container } = render(<DynamicSlides />);
+    fireEvent(
+      container.getElementsByClassName("button")[0],
+      new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true
+      })
+    );
+    expect(getActiveSlidesCount(container)).toEqual(3);
+    // expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+  it("should have 3 dots", function() {
+    const { container } = render(<DynamicSlides />);
+    fireEvent(
+      container.getElementsByClassName("button")[0],
+      new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true
+      })
+    );
+    expect(getButtonsLength(container)).toEqual(3);
+    // expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+  it("should show first 3 slides", function() {
+    const { container } = render(<DynamicSlides />);
+    fireEvent(
+      container.getElementsByClassName("button")[0],
+      new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true
+      })
+    );
+    expect(getActiveButton(container)).toEqual(["1"]);
+    expect(getActiveSlidesText(container)).toEqual(["1", "2", "3"]);
+    // expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+  it("should show slides from 4 to 6 when next button is clicked", function() {
+    const { container } = render(<DynamicSlides />);
+    fireEvent(
+      container.getElementsByClassName("button")[0],
+      new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true
+      })
+    );
+    clickNext(container);
+    // Array.from(container.querySelectorAll(".slick-current")).map(e=>console.log(e.textContent))
+    expect(getActiveButton(container)).toEqual(["2"]);
+    expect(getActiveSlidesText(container)).toEqual(["4", "5", "6"]);
+    // expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+  it("should show last 3 slides when previous button is clicked", function() {
+    const { container } = render(<DynamicSlides />);
+    fireEvent(
+      container.getElementsByClassName("button")[0],
+      new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true
+      })
+    );
+    clickPrevious(container);
+    expect(getActiveButton(container)).toEqual(["3"]);
+    expect(getActiveSlidesText(container)).toEqual(["7", "8", "9"]);
+    // expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+  it("should show slides first 3 slides when first dot is clicked", function() {
+    const { container } = render(<DynamicSlides />);
+    fireEvent(
+      container.getElementsByClassName("button")[0],
+      new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true
+      })
+    );
+    fireEvent(
+      getButtons(container)[0],
+      new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true
+      })
+    );
+    expect(getActiveButton(container)).toEqual(["1"]);
+    expect(getActiveSlidesText(container)).toEqual(["1", "2", "3"]);
+    // expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+  it("should show slides from 4 to 6 when middle dot is clicked", function() {
+    const { container } = render(<DynamicSlides />);
+    fireEvent(
+      container.getElementsByClassName("button")[0],
+      new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true
+      })
+    );
+    fireEvent(
+      getButtons(container)[1],
+      new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true
+      })
+    );
+    expect(getActiveButton(container)).toEqual(["2"]);
+    expect(getActiveSlidesText(container)).toEqual(["4", "5", "6"]);
+    // expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+  it("should show last 3 slides when last dot is clicked", function() {
+    const { container } = render(<DynamicSlides />);
+    fireEvent(
+      container.getElementsByClassName("button")[0],
+      new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true
+      })
+    );
+    fireEvent(
+      getButtons(container)[2],
+      new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true
+      })
+    );
+    expect(getActiveButton(container)).toEqual(["3"]);
+    expect(getActiveSlidesText(container)).toEqual(["7", "8", "9"]);
+    // expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+});
diff --git a/examples/__tests__/LazyLoad.test.js b/examples/__tests__/LazyLoad.test.js
new file mode 100644
index 000000000..a9348d6aa
--- /dev/null
+++ b/examples/__tests__/LazyLoad.test.js
@@ -0,0 +1,94 @@
+import React from "react";
+import LazyLoad from "../LazyLoad";
+import { render, fireEvent, waitFor, screen } from "@testing-library/react";
+import { html as beautify_html } from "js-beautify";
+import {
+  getActiveSlide,
+  clickNext,
+  clickPrevious,
+  hasClass,
+  getActiveSlides,
+  getActiveSlidesCount,
+  getActiveSlidesText,
+  getButtons,
+  getButtonsListItem,
+  getCurrentSlide
+} from "../../test-utils";
+
+describe("Custom Paging example", () => {
+  it("should have 13 slides (1(preclone) + 6(actual) + 1(postclone))", function() {
+    const { container } = render(<LazyLoad />);
+    expect(container.getElementsByClassName("slick-slide").length).toBe(6);
+  });
+  it("should have 3 clone slides", function() {
+    const { container } = render(<LazyLoad />);
+    expect(container.getElementsByClassName("slick-cloned").length).toBe(2);
+  });
+  it("should have 1 current slide", function() {
+    const { container } = render(<LazyLoad />);
+    expect(
+      container.querySelectorAll(".slick-slide.slick-current").length
+    ).toBe(1);
+  });
+  it("should have 1 active slide", function() {
+    const { container } = render(<LazyLoad />);
+    expect(container.querySelectorAll(".slick-slide.slick-active").length).toBe(
+      1
+    );
+  });
+  it("should have 6 dots", function() {
+    const { container } = render(<LazyLoad />);
+    expect(
+      container.getElementsByClassName("slick-dots")[0].children.length
+    ).toBe(4);
+  });
+  it("should have 1 active dot", function() {
+    const { container } = render(<LazyLoad />);
+
+    expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+      1
+    );
+  });
+  it("should have a prev arrow", function() {
+    const { container } = render(<LazyLoad />);
+    expect(container.getElementsByClassName("slick-prev").length).toBe(1);
+  });
+  it("should have a next arrow", function() {
+    const { container } = render(<LazyLoad />);
+    expect(container.getElementsByClassName("slick-next").length).toBe(1);
+  });
+  it("should got to next slide when next button is clicked", function() {
+    const { container } = render(<LazyLoad />);
+    clickNext(container);
+    expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+      1
+    );
+    expect(
+      container.querySelectorAll(".slick-dots")[0].children[3]
+    ).toHaveClass("slick-active");
+  });
+  it("should goto previous slide when prev button is clicked", function() {
+    const { container } = render(<LazyLoad />);
+    clickPrevious(container);
+    expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+      1
+    );
+    expect(
+      container.querySelectorAll(".slick-dots")[0].children[1]
+    ).toHaveClass("slick-active");
+  });
+  it("should goto 4th slide when 4th dot is clicked", function() {
+    const { container } = render(<LazyLoad />);
+    fireEvent(
+      container.querySelectorAll(".slick-dots button")[3],
+      new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true
+      })
+    );
+    expect(getActiveSlidesCount(container)).toEqual(1);
+    expect(hasClass(getButtonsListItem(container)[3], "slick-active")).toEqual(
+      true
+    );
+  });
+});
diff --git a/examples/__tests__/MultipleItems.test.js b/examples/__tests__/MultipleItems.test.js
index 1adc83daa..334929811 100644
--- a/examples/__tests__/MultipleItems.test.js
+++ b/examples/__tests__/MultipleItems.test.js
@@ -20,10 +20,10 @@ import {
 import MultipleItems from "../MultipleItems";
 
 describe("Multiple Items", function() {
-  it("should have 9 actual slides and (3(pre) + 9(post)) clone slides", function() {
+  it("should have 9 actual slides and (3(pre) + 3(post)) clone slides", function() {
     const { container } = render(<MultipleItems />);
-    expect(getSlidesCount(container)).toEqual(21);
-    expect(getClonesCount(container)).toEqual(12);
+    expect(getSlidesCount(container)).toEqual(15);
+    expect(getClonesCount(container)).toEqual(6);
     //expect(beautify_html(toString(container))).toMatchSnapshot();
   });
   it("should have 3 active slides", function() {
diff --git a/examples/__tests__/MultipleRows.test.js b/examples/__tests__/MultipleRows.test.js
new file mode 100644
index 000000000..84a89314f
--- /dev/null
+++ b/examples/__tests__/MultipleRows.test.js
@@ -0,0 +1,60 @@
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import { html as beautify_html } from "js-beautify";
+import {
+  activeSlide,
+  activeSlides,
+  clickNext,
+  clickPrevious,
+  getActiveButton,
+  getActiveSlidesCount,
+  getActiveSlidesText,
+  getButtons,
+  getButtonsLength,
+  getButtonsListItem,
+  getClonesCount,
+  getCurrentSlide,
+  getSlidesCount,
+  hasClass
+} from "../../test-utils";
+import MultipleRows from "../MultipleRows";
+
+describe("Multiple Items", function() {
+  it("should have 9 actual slides and (3(pre) + 3(post)) clone slides", function() {
+    const { container } = render(<MultipleRows />);
+    expect(getSlidesCount(container)).toEqual(12);
+    expect(getClonesCount(container)).toEqual(8);
+    //expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+  it("should have 3 active slides", function() {
+    const { container } = render(<MultipleRows />);
+    expect(getActiveSlidesCount(container)).toEqual(3);
+    // expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+  it("should show first 3 slides", function() {
+    const { container } = render(<MultipleRows />);
+    expect(getActiveSlidesText(container)).toEqual([
+      "13141516",
+      "1234",
+      "5678"
+    ]);
+    // expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+  it("should show slides from 4 to 6 when next button is clicked", function() {
+    const { container } = render(<MultipleRows />);
+    clickNext(container);
+    // Array.from(container.querySelectorAll(".slick-current")).map(e=>console.log(e.textContent))
+    expect(getActiveSlidesText(container)).toEqual(["1234", "5678", "9101112"]);
+    // expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+  it("should show last 3 slides when previous button is clicked", function() {
+    const { container } = render(<MultipleRows />);
+    clickPrevious(container);
+    expect(getActiveSlidesText(container)).toEqual([
+      "9101112",
+      "13141516",
+      "1234"
+    ]);
+    // expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+});
diff --git a/examples/__tests__/PauseOnHover.test.js b/examples/__tests__/PauseOnHover.test.js
new file mode 100644
index 000000000..461945682
--- /dev/null
+++ b/examples/__tests__/PauseOnHover.test.js
@@ -0,0 +1,118 @@
+import React from "react";
+import PauseOnHover from "../PauseOnHover";
+import { render, fireEvent, waitFor, screen } from "@testing-library/react";
+import { html as beautify_html, js_beautify } from "js-beautify";
+import jest from "jest";
+import {
+  getActiveSlide,
+  clickNext,
+  clickPrevious,
+  hasClass,
+  getActiveSlides,
+  getActiveSlidesCount,
+  getActiveSlidesText,
+  getButtons,
+  getButtonsListItem,
+  getCurrentSlide,
+  getSlideHeight
+} from "../../test-utils";
+describe("Pause On Hover example", () => {
+  it("should have 8 slides (3(preclone) + 6(actual) + 3(postclone))", function() {
+    const { container } = render(<PauseOnHover />);
+    expect(container.getElementsByClassName("slick-slide").length).toBe(12);
+  });
+  it("should have 3 clone slides", function() {
+    const { container } = render(<PauseOnHover />);
+    expect(container.getElementsByClassName("slick-cloned").length).toBe(6);
+  });
+  it("should have 1 current slide", function() {
+    const { container } = render(<PauseOnHover />);
+    expect(
+      container.querySelectorAll(".slick-slide.slick-current").length
+    ).toBe(1);
+    expect(parseInt(getCurrentSlide(container).textContent) - 1).toBe(0);
+  });
+  it("should have 3 active slide", function() {
+    const { container } = render(<PauseOnHover />);
+    expect(container.querySelectorAll(".slick-slide.slick-active").length).toBe(
+      3
+    );
+    expect(
+      Array.from(getActiveSlide(container).children).map(
+        e => parseInt(e.textContent) - 1
+      )[0]
+    ).toBe(0);
+  });
+  it("should have 6 dots", function() {
+    const { container } = render(<PauseOnHover />);
+    expect(
+      container.getElementsByClassName("slick-dots")[0].children.length
+    ).toBe(6);
+  });
+  it("should have 1 active dot", function() {
+    const { container } = render(<PauseOnHover />);
+
+    expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+      1
+    );
+  });
+  it("should have a prev arrow", function() {
+    const { container } = render(<PauseOnHover />);
+    expect(container.getElementsByClassName("slick-prev").length).toBe(1);
+  });
+  it("should have a next arrow", function() {
+    const { container } = render(<PauseOnHover />);
+    expect(container.getElementsByClassName("slick-next").length).toBe(1);
+  });
+  it("should got to next slide when next button is clicked", function() {
+    const { container } = render(<PauseOnHover />);
+    clickNext(container);
+    expect(
+      container.querySelectorAll(".slick-slide.slick-active")[0].textContent
+    ).toBe("2");
+    expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+      1
+    );
+    expect(
+      container.querySelectorAll(".slick-dots")[0].children[1]
+    ).toHaveClass("slick-active");
+  });
+  it("should goto previous slide when prev button is clicked", function() {
+    const { container } = render(<PauseOnHover />);
+    clickPrevious(container);
+    expect(
+      container.querySelectorAll(".slick-slide.slick-active")[0].textContent
+    ).toBe("6");
+    expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+      1
+    );
+    expect(
+      container.querySelectorAll(".slick-dots")[0].children[5]
+    ).toHaveClass("slick-active");
+  });
+  it("should goto 4th slide when 4th dot is clicked", function() {
+    const { container } = render(<PauseOnHover />);
+    fireEvent(
+      container.querySelectorAll(".slick-dots button")[3],
+      new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true
+      })
+    );
+    expect(getActiveSlidesText(container)).toEqual(["4", "5", "6"]);
+    expect(getActiveSlidesCount(container)).toEqual(3);
+    expect(hasClass(getButtonsListItem(container)[3], "slick-active")).toEqual(
+      true
+    );
+  });
+  it("Should change the active slides automatically", async function() {
+    const { container } = render(<PauseOnHover />);
+    expect(getActiveSlidesText(container)).toEqual(["1", "2", "3"]);
+    await waitFor(
+      () => {
+        expect(getActiveSlidesText(container)).toEqual(["2", "3", "4"]);
+      },
+      { timeout: "3000" }
+    );
+  });
+});
diff --git a/examples/__tests__/PreviousNextMethods.test.js b/examples/__tests__/PreviousNextMethods.test.js
new file mode 100644
index 000000000..670a1b7a1
--- /dev/null
+++ b/examples/__tests__/PreviousNextMethods.test.js
@@ -0,0 +1,146 @@
+import React from "react";
+import PreviousNextMethods from "../PreviousNextMethods";
+import { render, fireEvent, waitFor, screen } from "@testing-library/react";
+import { html as beautify_html } from "js-beautify";
+import {
+  getActiveSlide,
+  clickNext,
+  clickPrevious,
+  hasClass,
+  getActiveSlides,
+  getActiveSlidesCount,
+  getActiveSlidesText,
+  getButtons,
+  getButtonsListItem,
+  getCurrentSlide
+} from "../../test-utils";
+
+describe("SimpleSlider example", () => {
+  it("should have 13 slides (1(preclone) + 6(actual) + 1(postclone))", function() {
+    const { container } = render(<PreviousNextMethods />);
+    expect(container.getElementsByClassName("slick-slide").length).toBe(8);
+  });
+  it("should have 3 clone slides", function() {
+    const { container } = render(<PreviousNextMethods />);
+    expect(container.getElementsByClassName("slick-cloned").length).toBe(2);
+  });
+  it("should have 1 current slide", function() {
+    const { container } = render(<PreviousNextMethods />);
+    expect(
+      container.querySelectorAll(".slick-slide.slick-current").length
+    ).toBe(1);
+    expect(parseInt(getCurrentSlide(container).textContent) - 1).toBe(0);
+  });
+  it("should have 1 active slide", function() {
+    const { container } = render(<PreviousNextMethods />);
+    expect(container.querySelectorAll(".slick-slide.slick-active").length).toBe(
+      1
+    );
+    expect(
+      Array.from(getActiveSlide(container).children).map(
+        e => parseInt(e.textContent) - 1
+      )[0]
+    ).toBe(0);
+  });
+  it("should have 6 dots", function() {
+    const { container } = render(<PreviousNextMethods />);
+    expect(
+      container.getElementsByClassName("slick-dots")[0].children.length
+    ).toBe(6);
+  });
+  it("should have 1 active dot", function() {
+    const { container } = render(<PreviousNextMethods />);
+
+    expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+      1
+    );
+  });
+  it("should have a prev arrow", function() {
+    const { container } = render(<PreviousNextMethods />);
+    expect(container.getElementsByClassName("slick-prev").length).toBe(1);
+  });
+  it("should have a next arrow", function() {
+    const { container } = render(<PreviousNextMethods />);
+    expect(container.getElementsByClassName("slick-next").length).toBe(1);
+  });
+  it("should got to next slide when next button is clicked", function() {
+    const { container } = render(<PreviousNextMethods />);
+    clickNext(container);
+    expect(
+      container.querySelectorAll(".slick-slide.slick-active")[0].textContent
+    ).toBe("2");
+    expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+      1
+    );
+    expect(
+      container.querySelectorAll(".slick-dots")[0].children[1]
+    ).toHaveClass("slick-active");
+  });
+  it("should goto previous slide when prev button is clicked", function() {
+    const { container } = render(<PreviousNextMethods />);
+    clickPrevious(container);
+    expect(
+      container.querySelectorAll(".slick-slide.slick-active")[0].textContent
+    ).toBe("6");
+    expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+      1
+    );
+    expect(
+      container.querySelectorAll(".slick-dots")[0].children[5]
+    ).toHaveClass("slick-active");
+  });
+  it("should goto 4th slide when 4th dot is clicked", function() {
+    const { container } = render(<PreviousNextMethods />);
+    fireEvent(
+      container.querySelectorAll(".slick-dots button")[3],
+      new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true
+      })
+    );
+    expect(getActiveSlidesText(container)[0]).toEqual("4");
+    expect(getActiveSlidesCount(container)).toEqual(1);
+    expect(hasClass(getButtonsListItem(container)[3], "slick-active")).toEqual(
+      true
+    );
+  });
+
+  //   it("should got to next slide when next button is clicked", function() {
+  //     const { container } = render(<PreviousNextMethods />);
+  //     Array.from(container.getElementsByClassName("button")).forEach(e=>e.textContent==="Next"?fireEvent(
+  //     e,
+  //     new MouseEvent("click", {
+  //       bubbles: true,
+  //       cancelable: true
+  //     })
+  //   ):null)
+  //     expect(
+  //       container.querySelectorAll(".slick-slide.slick-active")[0].textContent
+  //     ).toBe("2");
+  //     expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+  //       1
+  //     );
+  //     expect(
+  //       container.querySelectorAll(".slick-dots")[0].children[1]
+  //     ).toHaveClass("slick-active");
+  //    });
+  //   it("should goto previous slide when prev button is clicked", function() {
+  //     const { container } = render(<PreviousNextMethods />);
+  //     Array.from(container.getElementsByClassName("button")).forEach(e=>e.textContent==="Previous"?fireEvent(
+  //                 e,
+  //                 new MouseEvent("click", {
+  //                   bubbles: true,
+  //                   cancelable: true
+  //                 })
+  //               ):null)
+  //     expect(
+  //       container.querySelectorAll(".slick-slide.slick-active")[0].textContent
+  //     ).toBe("6");
+  //     expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+  //       1
+  //     );
+  //     expect(
+  //       container.querySelectorAll(".slick-dots")[0].children[5]
+  //     ).toHaveClass("slick-active");
+  //   });
+});
diff --git a/examples/__tests__/Resizeable.test.js b/examples/__tests__/Resizeable.test.js
new file mode 100644
index 000000000..9327a3313
--- /dev/null
+++ b/examples/__tests__/Resizeable.test.js
@@ -0,0 +1,109 @@
+import React from "react";
+import Resizable from "../Resizable";
+import { render, fireEvent, waitFor, screen } from "@testing-library/react";
+import { html as beautify_html, js_beautify } from "js-beautify";
+import jest from "jest";
+import {
+  getActiveSlide,
+  clickNext,
+  clickPrevious,
+  hasClass,
+  getActiveSlides,
+  getActiveSlidesCount,
+  getActiveSlidesText,
+  getButtons,
+  getButtonsListItem,
+  getCurrentSlide,
+  getSlideHeight
+} from "../../test-utils";
+
+describe("Resizeable example", () => {
+  it("should have 8 slides (3(preclone) + 6(actual) + 3(postclone))", function() {
+    const { container } = render(<Resizable />);
+    expect(container.getElementsByClassName("slick-slide").length).toBe(12);
+  });
+  it("should have 3 clone slides", function() {
+    const { container } = render(<Resizable />);
+    expect(container.getElementsByClassName("slick-cloned").length).toBe(6);
+  });
+  it("should have 1 current slide", function() {
+    const { container } = render(<Resizable />);
+    expect(
+      container.querySelectorAll(".slick-slide.slick-current").length
+    ).toBe(1);
+    expect(parseInt(getCurrentSlide(container).textContent) - 1).toBe(0);
+  });
+  it("should have 3 active slide", function() {
+    const { container } = render(<Resizable />);
+    expect(container.querySelectorAll(".slick-slide.slick-active").length).toBe(
+      3
+    );
+    expect(
+      Array.from(getActiveSlide(container).children).map(
+        e => parseInt(e.textContent) - 1
+      )[0]
+    ).toBe(0);
+  });
+  it("should have 6 dots", function() {
+    const { container } = render(<Resizable />);
+    expect(
+      container.getElementsByClassName("slick-dots")[0].children.length
+    ).toBe(6);
+  });
+  it("should have 1 active dot", function() {
+    const { container } = render(<Resizable />);
+
+    expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+      1
+    );
+  });
+  it("should have a prev arrow", function() {
+    const { container } = render(<Resizable />);
+    expect(container.getElementsByClassName("slick-prev").length).toBe(1);
+  });
+  it("should have a next arrow", function() {
+    const { container } = render(<Resizable />);
+    expect(container.getElementsByClassName("slick-next").length).toBe(1);
+  });
+  it("should got to next slide when next button is clicked", function() {
+    const { container } = render(<Resizable />);
+    clickNext(container);
+    expect(
+      container.querySelectorAll(".slick-slide.slick-active")[0].textContent
+    ).toBe("2");
+    expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+      1
+    );
+    expect(
+      container.querySelectorAll(".slick-dots")[0].children[1]
+    ).toHaveClass("slick-active");
+  });
+  it("should goto previous slide when prev button is clicked", function() {
+    const { container } = render(<Resizable />);
+    clickPrevious(container);
+    expect(
+      container.querySelectorAll(".slick-slide.slick-active")[0].textContent
+    ).toBe("6");
+    expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+      1
+    );
+    expect(
+      container.querySelectorAll(".slick-dots")[0].children[5]
+    ).toHaveClass("slick-active");
+  });
+  it("should goto 4th slide when 4th dot is clicked", function() {
+    const { container } = render(<Resizable />);
+    fireEvent(
+      container.querySelectorAll(".slick-dots button")[3],
+      new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true
+      })
+    );
+    expect(getActiveSlidesText(container)).toEqual(["4", "5", "6"]);
+    expect(getActiveSlidesCount(container)).toEqual(3);
+    expect(hasClass(getButtonsListItem(container)[3], "slick-active")).toEqual(
+      true
+    );
+  });
+});
diff --git a/examples/__tests__/Responsive.test.js b/examples/__tests__/Responsive.test.js
new file mode 100644
index 000000000..206009688
--- /dev/null
+++ b/examples/__tests__/Responsive.test.js
@@ -0,0 +1,85 @@
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import { html as beautify_html } from "js-beautify";
+import {
+  activeSlide,
+  activeSlides,
+  clickNext,
+  clickPrevious,
+  getActiveButton,
+  getActiveSlidesCount,
+  getActiveSlidesText,
+  getButtons,
+  getButtonsLength,
+  getButtonsListItem,
+  getClonesCount,
+  getCurrentSlide,
+  getSlidesCount,
+  hasClass
+} from "../../test-utils";
+import Responsive from "../Responsive";
+
+describe("Responsive Items", function() {
+  it("should have 8 actual slides", function() {
+    const { container } = render(<Responsive />);
+    expect(getSlidesCount(container)).toEqual(8);
+    //expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+  it("should have 4 active slides", function() {
+    const { container } = render(<Responsive />);
+    expect(getActiveSlidesCount(container)).toEqual(4);
+    // expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+  it("should have 2 dots", function() {
+    const { container } = render(<Responsive />);
+    expect(getButtonsLength(container)).toEqual(2);
+    // expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+  it("should show first 4 slides", function() {
+    const { container } = render(<Responsive />);
+    expect(getActiveButton(container)).toEqual(["1"]);
+    expect(getActiveSlidesText(container)).toEqual(["1", "2", "3", "4"]);
+    // expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+  it("should show slides from 5 to 8 when next button is clicked", function() {
+    const { container } = render(<Responsive />);
+    clickNext(container);
+    // Array.from(container.querySelectorAll(".slick-current")).map(e=>console.log(e.textContent))
+    expect(getActiveButton(container)).toEqual(["2"]);
+    expect(getActiveSlidesText(container)).toEqual(["5", "6", "7", "8"]);
+    // expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+  it("should show first 4 slides when previous button is clicked from last 4 slides", function() {
+    const { container } = render(<Responsive initialSlide={5} />);
+    clickPrevious(container);
+    expect(getActiveButton(container)).toEqual(["1"]);
+    expect(getActiveSlidesText(container)).toEqual(["1", "2", "3", "4"]);
+    // expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+  it("should show slides first 4 slides when first dot is clicked", function() {
+    const { container } = render(<Responsive />);
+    fireEvent(
+      getButtons(container)[0],
+      new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true
+      })
+    );
+    expect(getActiveButton(container)).toEqual(["1"]);
+    expect(getActiveSlidesText(container)).toEqual(["1", "2", "3", "4"]);
+    // expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+  it("should show slides from 5 to 6 when second dot is clicked", function() {
+    const { container } = render(<Responsive />);
+    fireEvent(
+      getButtons(container)[1],
+      new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true
+      })
+    );
+    expect(getActiveButton(container)).toEqual(["2"]);
+    expect(getActiveSlidesText(container)).toEqual(["5", "6", "7", "8"]);
+    // expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+});
diff --git a/examples/__tests__/Rtl.test.js b/examples/__tests__/Rtl.test.js
new file mode 100644
index 000000000..49e7e9762
--- /dev/null
+++ b/examples/__tests__/Rtl.test.js
@@ -0,0 +1,119 @@
+import React from "react";
+import Rtl from "../Rtl";
+import { render, fireEvent, waitFor, screen } from "@testing-library/react";
+import { html as beautify_html, js_beautify } from "js-beautify";
+import jest from "jest";
+import {
+  getActiveSlide,
+  clickNext,
+  clickPrevious,
+  hasClass,
+  getActiveSlides,
+  getActiveSlidesCount,
+  getActiveSlidesText,
+  getButtons,
+  getButtonsListItem,
+  getCurrentSlide,
+  getSlideHeight
+} from "../../test-utils";
+
+describe.skip("Right To Left example", () => {
+  it("should have 8 slides (3(preclone) + 6(actual) + 3(postclone))", function() {
+    const { container } = render(<Rtl />);
+    expect(container.getElementsByClassName("slick-slide").length).toBe(12);
+  });
+  it("should have 3 clone slides", function() {
+    const { container } = render(<Rtl />);
+    expect(container.getElementsByClassName("slick-cloned").length).toBe(6);
+  });
+  it("should have 1 current slide", function() {
+    const { container } = render(<Rtl />);
+    expect(
+      container.querySelectorAll(".slick-slide.slick-current").length
+    ).toBe(1);
+    expect(parseInt(getCurrentSlide(container).textContent) - 1).toBe(0);
+  });
+  it("should have 3 active slide", function() {
+    const { container } = render(<Rtl />);
+    expect(container.querySelectorAll(".slick-slide.slick-active").length).toBe(
+      3
+    );
+    expect(
+      Array.from(getActiveSlide(container).children).map(
+        e => parseInt(e.textContent) - 1
+      )[0]
+    ).toBe(0);
+  });
+  it("should have 6 dots", function() {
+    const { container } = render(<Rtl />);
+    expect(
+      container.getElementsByClassName("slick-dots")[0].children.length
+    ).toBe(6);
+  });
+  it("should have 1 active dot", function() {
+    const { container } = render(<Rtl />);
+
+    expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+      1
+    );
+  });
+  it("should have a prev arrow", function() {
+    const { container } = render(<Rtl />);
+    expect(container.getElementsByClassName("slick-prev").length).toBe(1);
+  });
+  it("should have a next arrow", function() {
+    const { container } = render(<Rtl />);
+    expect(container.getElementsByClassName("slick-next").length).toBe(1);
+  });
+  it("should got to next slide when next button is clicked", function() {
+    const { container } = render(<Rtl />);
+    clickNext(container);
+    expect(
+      container.querySelectorAll(".slick-slide.slick-active")[0].textContent
+    ).toBe("2");
+    expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+      1
+    );
+    expect(
+      container.querySelectorAll(".slick-dots")[0].children[1]
+    ).toHaveClass("slick-active");
+  });
+  it("should goto previous slide when prev button is clicked", function() {
+    const { container } = render(<Rtl />);
+    clickPrevious(container);
+    expect(
+      container.querySelectorAll(".slick-slide.slick-active")[0].textContent
+    ).toBe("6");
+    expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+      1
+    );
+    expect(
+      container.querySelectorAll(".slick-dots")[0].children[5]
+    ).toHaveClass("slick-active");
+  });
+  it("should goto 4th slide when 4th dot is clicked", function() {
+    const { container } = render(<Rtl />);
+    fireEvent(
+      container.querySelectorAll(".slick-dots button")[3],
+      new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true
+      })
+    );
+    expect(getActiveSlidesText(container)).toEqual(["4", "5", "6"]);
+    expect(getActiveSlidesCount(container)).toEqual(3);
+    expect(hasClass(getButtonsListItem(container)[3], "slick-active")).toEqual(
+      true
+    );
+  });
+  it("Should change the active slides automatically", async function() {
+    const { container } = render(<Rtl />);
+    expect(getActiveSlidesText(container)).toEqual(["1", "2", "3"]);
+    await waitFor(
+      () => {
+        expect(getActiveSlidesText(container)).toEqual(["2", "3", "4"]);
+      },
+      { timeout: "3000" }
+    );
+  });
+});
diff --git a/examples/__tests__/SimpleSlider.test.js b/examples/__tests__/SimpleSlider.test.js
index 71402cbbb..1289ffaff 100644
--- a/examples/__tests__/SimpleSlider.test.js
+++ b/examples/__tests__/SimpleSlider.test.js
@@ -16,13 +16,13 @@ import {
 } from "../../test-utils";
 
 describe("SimpleSlider example", () => {
-  it("should have 13 slides (1(preclone) + 6(actual) + 6(postclone))", function() {
+  it("should have 13 slides (1(preclone) + 6(actual) + 1(postclone))", function() {
     const { container } = render(<SimpleSlider a={5} />);
-    expect(container.getElementsByClassName("slick-slide").length).toBe(13);
+    expect(container.getElementsByClassName("slick-slide").length).toBe(8);
   });
-  it("should have 7 clone slides", function() {
+  it("should have 3 clone slides", function() {
     const { container } = render(<SimpleSlider />);
-    expect(container.getElementsByClassName("slick-cloned").length).toBe(7);
+    expect(container.getElementsByClassName("slick-cloned").length).toBe(2);
   });
   it("should have 1 current slide", function() {
     const { container } = render(<SimpleSlider />);
diff --git a/examples/__tests__/SwipeToSlide.test.js b/examples/__tests__/SwipeToSlide.test.js
new file mode 100644
index 000000000..2bdbdb2ef
--- /dev/null
+++ b/examples/__tests__/SwipeToSlide.test.js
@@ -0,0 +1,52 @@
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import { html as beautify_html } from "js-beautify";
+import {
+  activeSlide,
+  activeSlides,
+  clickNext,
+  clickPrevious,
+  getActiveButton,
+  getActiveSlidesCount,
+  getActiveSlidesText,
+  getButtons,
+  getButtonsLength,
+  getButtonsListItem,
+  getClonesCount,
+  getCurrentSlide,
+  getSlidesCount,
+  hasClass
+} from "../../test-utils";
+import SwipeToSlide from "../SwipeToSlide";
+
+describe("Multiple Items", function() {
+  it("should have 9 actual slides and (3(pre) + 3(post)) clone slides", function() {
+    const { container } = render(<SwipeToSlide />);
+    expect(getSlidesCount(container)).toEqual(19);
+    expect(getClonesCount(container)).toEqual(10);
+    //expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+  it("should have 5 active slides", function() {
+    const { container } = render(<SwipeToSlide />);
+    expect(getActiveSlidesCount(container)).toEqual(5);
+    // expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+  it("should show first 5 slides", function() {
+    const { container } = render(<SwipeToSlide />);
+    expect(getActiveSlidesText(container)).toEqual(["1", "2", "3", "4", "5"]);
+    // expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+  it("should show slides from 2 to 6 when next button is clicked", function() {
+    const { container } = render(<SwipeToSlide />);
+    clickNext(container);
+    // Array.from(container.querySelectorAll(".slick-current")).map(e=>console.log(e.textContent))x
+    expect(getActiveSlidesText(container)).toEqual(["2", "3", "4", "5", "6"]);
+    // expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+  it("should show last 5 slides when previous button is clicked", function() {
+    const { container } = render(<SwipeToSlide />);
+    clickPrevious(container);
+    expect(getActiveSlidesText(container)).toEqual(["9", "1", "2", "3", "4"]);
+    // expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+});
diff --git a/examples/__tests__/UnevenSets.test.js b/examples/__tests__/UnevenSets.test.js
index eff2f9dcf..0f4ed92a9 100644
--- a/examples/__tests__/UnevenSets.test.js
+++ b/examples/__tests__/UnevenSets.test.js
@@ -82,8 +82,8 @@ describe("UnevenSets Infinite", () => {
     let clonedSlides = getClonesCount(container);
     let activeSlides = getActiveSlidesCount(container);
     let dots = getButtonsLength(container);
-    expect(totalSlides).toEqual(16);
-    expect(clonedSlides).toEqual(10);
+    expect(totalSlides).toEqual(14);
+    expect(clonedSlides).toEqual(8);
     expect(activeSlides).toEqual(4);
     expect(dots).toEqual(2);
     //  expect(beautify_html(toString(container))).toMatchSnapshot();
diff --git a/examples/__tests__/VariableWidth.test.js b/examples/__tests__/VariableWidth.test.js
new file mode 100644
index 000000000..b186b6a9c
--- /dev/null
+++ b/examples/__tests__/VariableWidth.test.js
@@ -0,0 +1,107 @@
+import React from "react";
+import VariableWidth from "../VariableWidth";
+import { render, fireEvent, waitFor, screen } from "@testing-library/react";
+import { html as beautify_html } from "js-beautify";
+import {
+  getActiveSlide,
+  clickNext,
+  clickPrevious,
+  hasClass,
+  getActiveSlides,
+  getActiveSlidesCount,
+  getActiveSlidesText,
+  getButtons,
+  getButtonsListItem,
+  getCurrentSlide
+} from "../../test-utils";
+
+describe("Variable Width example", () => {
+  it("should have 10 slides (2(preclone) + 6(actual) + 2(postclone))", function() {
+    const { container } = render(<VariableWidth />);
+    //Should be 10
+    expect(container.getElementsByClassName("slick-slide").length).toBe(18);
+  });
+  it("should have 4 clone slides", function() {
+    const { container } = render(<VariableWidth />);
+    //Should be 4
+    expect(container.getElementsByClassName("slick-cloned").length).toBe(12);
+  });
+  it("should have 1 current slide", function() {
+    const { container } = render(<VariableWidth />);
+    expect(
+      container.querySelectorAll(".slick-slide.slick-current").length
+    ).toBe(1);
+    expect(getCurrentSlide(container).textContent).toBe("100");
+  });
+  it("should have 1 active slide", function() {
+    const { container } = render(<VariableWidth />);
+    expect(container.querySelectorAll(".slick-slide.slick-active").length).toBe(
+      1
+    );
+    expect(
+      Array.from(getActiveSlide(container).children).map(e => e.textContent)[0]
+    ).toBe("100");
+  });
+  it("should have 6 dots", function() {
+    const { container } = render(<VariableWidth />);
+    expect(
+      container.getElementsByClassName("slick-dots")[0].children.length
+    ).toBe(6);
+  });
+  it("should have 1 active dot", function() {
+    const { container } = render(<VariableWidth />);
+
+    expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+      1
+    );
+  });
+  it("should have a prev arrow", function() {
+    const { container } = render(<VariableWidth />);
+    expect(container.getElementsByClassName("slick-prev").length).toBe(1);
+  });
+  it("should have a next arrow", function() {
+    const { container } = render(<VariableWidth />);
+    expect(container.getElementsByClassName("slick-next").length).toBe(1);
+  });
+  it("should got to next slide when next button is clicked", function() {
+    const { container } = render(<VariableWidth />);
+    clickNext(container);
+    expect(
+      container.querySelectorAll(".slick-slide.slick-active")[0].textContent
+    ).toBe("200");
+    expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+      1
+    );
+    expect(
+      container.querySelectorAll(".slick-dots")[0].children[1]
+    ).toHaveClass("slick-active");
+  });
+  it("should goto previous slide when prev button is clicked", function() {
+    const { container } = render(<VariableWidth />);
+    clickPrevious(container);
+    expect(
+      container.querySelectorAll(".slick-slide.slick-active")[0].textContent
+    ).toBe("175");
+    expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+      1
+    );
+    expect(
+      container.querySelectorAll(".slick-dots")[0].children[5]
+    ).toHaveClass("slick-active");
+  });
+  it("should goto 4th slide when 4th dot is clicked", function() {
+    const { container } = render(<VariableWidth />);
+    fireEvent(
+      container.querySelectorAll(".slick-dots button")[3],
+      new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true
+      })
+    );
+    expect(getActiveSlidesText(container)[0]).toEqual("300");
+    expect(getActiveSlidesCount(container)).toEqual(1);
+    expect(hasClass(getButtonsListItem(container)[3], "slick-active")).toEqual(
+      true
+    );
+  });
+});
diff --git a/examples/__tests__/VerticleSets.test.js b/examples/__tests__/VerticleSets.test.js
new file mode 100644
index 000000000..a643a2596
--- /dev/null
+++ b/examples/__tests__/VerticleSets.test.js
@@ -0,0 +1,179 @@
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import VerticleMode from "../VerticalMode";
+import VerticalSwipeToSlide from "../VerticalSwipeToSlide";
+import { html as beautify_html } from "js-beautify";
+import {
+  activeSlide,
+  activeSlides,
+  clickNext,
+  clickPrevious,
+  getActiveButton,
+  getActiveSlidesCount,
+  getActiveSlidesText,
+  getButtons,
+  getButtonsLength,
+  getButtonsListItem,
+  getClonesCount,
+  getCurrentSlide,
+  getSlidesCount,
+  hasClass
+} from "../../test-utils";
+
+describe("Verticle Mode testing", function() {
+  it("should have 9 actual slides and (1(pre) + 1(post)) clone slides", function() {
+    const { container } = render(<VerticleMode />);
+    expect(getSlidesCount(container)).toEqual(12);
+    expect(getClonesCount(container)).toEqual(6);
+    //expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+  it("should have 3 active slides", function() {
+    const { container } = render(<VerticleMode />);
+    expect(getActiveSlidesCount(container)).toEqual(3);
+    // expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+  it("should have 3 dots", function() {
+    const { container } = render(<VerticleMode />);
+    expect(getButtonsLength(container)).toEqual(6);
+    // expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+  it("should show first 3 slides", function() {
+    const { container } = render(<VerticleMode />);
+    expect(getActiveButton(container)).toEqual(["1"]);
+    expect(getActiveSlidesText(container)).toEqual(["1", "2", "3"]);
+    // expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+  it("should show slides from 4 to 6 when next button is clicked", function() {
+    const { container } = render(<VerticleMode />);
+    clickNext(container);
+    // Array.from(container.querySelectorAll(".slick-current")).map(e=>console.log(e.textContent))
+    expect(getActiveButton(container)).toEqual(["2"]);
+    expect(getActiveSlidesText(container)).toEqual(["2", "3", "4"]);
+    // expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+  it("should show last 3 slides when previous button is clicked", function() {
+    const { container } = render(<VerticleMode />);
+    clickPrevious(container);
+    expect(getActiveButton(container)).toEqual(["6"]);
+    expect(getActiveSlidesText(container)).toEqual(["6", "1", "2"]);
+    // expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+  it("should show slides first 3 slides when first dot is clicked", function() {
+    const { container } = render(<VerticleMode />);
+    fireEvent(
+      getButtons(container)[0],
+      new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true
+      })
+    );
+    expect(getActiveButton(container)).toEqual(["1"]);
+    expect(getActiveSlidesText(container)).toEqual(["1", "2", "3"]);
+    // expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+  it("should show slides from 4 to 6 when fourth dot is clicked", function() {
+    const { container } = render(<VerticleMode />);
+    fireEvent(
+      getButtons(container)[3],
+      new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true
+      })
+    );
+    expect(getActiveButton(container)).toEqual(["4"]);
+    expect(getActiveSlidesText(container)).toEqual(["4", "5", "6"]);
+    // expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+  it("should show last 3 slides when last dot is clicked", function() {
+    const { container } = render(<VerticleMode />);
+    fireEvent(
+      getButtons(container)[5],
+      new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true
+      })
+    );
+    expect(getActiveButton(container)).toEqual(["6"]);
+    expect(getActiveSlidesText(container)).toEqual(["6", "1", "2"]);
+    // expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+});
+
+describe("VerticleSwipeToSlide Mode testing", function() {
+  it("should have 9 actual slides and (1(pre) + 1(post)) clone slides", function() {
+    const { container } = render(<VerticalSwipeToSlide />);
+    expect(getSlidesCount(container)).toEqual(12);
+    expect(getClonesCount(container)).toEqual(6);
+    //expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+  it("should have 3 active slides", function() {
+    const { container } = render(<VerticalSwipeToSlide />);
+    expect(getActiveSlidesCount(container)).toEqual(3);
+    // expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+  it("should have 3 dots", function() {
+    const { container } = render(<VerticalSwipeToSlide />);
+    expect(getButtonsLength(container)).toEqual(6);
+    // expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+  it("should show first 3 slides", function() {
+    const { container } = render(<VerticalSwipeToSlide />);
+    expect(getActiveButton(container)).toEqual(["1"]);
+    expect(getActiveSlidesText(container)).toEqual(["1", "2", "3"]);
+    // expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+  it("should show slides from 4 to 6 when next button is clicked", function() {
+    const { container } = render(<VerticalSwipeToSlide />);
+    clickNext(container);
+    // Array.from(container.querySelectorAll(".slick-current")).map(e=>console.log(e.textContent))
+    expect(getActiveButton(container)).toEqual(["2"]);
+    expect(getActiveSlidesText(container)).toEqual(["2", "3", "4"]);
+    // expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+  it("should show last 3 slides when previous button is clicked", function() {
+    const { container } = render(<VerticalSwipeToSlide />);
+    clickPrevious(container);
+    expect(getActiveButton(container)).toEqual(["6"]);
+    expect(getActiveSlidesText(container)).toEqual(["6", "1", "2"]);
+    // expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+  it("should show slides first 3 slides when first dot is clicked", function() {
+    const { container } = render(<VerticalSwipeToSlide />);
+    fireEvent(
+      getButtons(container)[0],
+      new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true
+      })
+    );
+    expect(getActiveButton(container)).toEqual(["1"]);
+    expect(getActiveSlidesText(container)).toEqual(["1", "2", "3"]);
+    // expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+  it("should show slides from 4 to 6 when fourth dot is clicked", function() {
+    const { container } = render(<VerticalSwipeToSlide />);
+    fireEvent(
+      getButtons(container)[3],
+      new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true
+      })
+    );
+    expect(getActiveButton(container)).toEqual(["4"]);
+    expect(getActiveSlidesText(container)).toEqual(["4", "5", "6"]);
+    // expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+  it("should show last 3 slides when last dot is clicked", function() {
+    const { container } = render(<VerticalSwipeToSlide />);
+    fireEvent(
+      getButtons(container)[5],
+      new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true
+      })
+    );
+    expect(getActiveButton(container)).toEqual(["6"]);
+    expect(getActiveSlidesText(container)).toEqual(["6", "1", "2"]);
+    // expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+});
diff --git a/package.json b/package.json
index 6425e7f7d..93a283abf 100644
--- a/package.json
+++ b/package.json
@@ -72,7 +72,7 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "sinon": "^2.1.0",
-    "slick-carousel": "^1.8.1",
+    "slick-carousel": "^1.6.0",
     "style-loader": "^0.16.1",
     "uglifyjs-webpack-plugin": "^2.0.1",
     "webpack": "^4.21.0",
@@ -84,6 +84,7 @@
     "@testing-library/user-event": "^14.3.0",
     "classnames": "^2.2.5",
     "enquire.js": "^2.1.6",
+    "jquery": "^3.7.0",
     "json2mq": "^0.2.0",
     "lodash.debounce": "^4.0.8",
     "resize-observer-polyfill": "^1.5.0"
diff --git a/src/dots.js b/src/dots.js
index 93520cbd7..05b3feb50 100644
--- a/src/dots.js
+++ b/src/dots.js
@@ -2,7 +2,12 @@
 
 import React from "react";
 import classnames from "classnames";
-import { clamp } from "./utils/innerSliderUtils";
+import {
+  clamp,
+  dotClicked,
+  getActiveParentTagName,
+  x
+} from "./utils/innerSliderUtils";
 
 const getDotCount = spec => {
   let dots;
@@ -23,7 +28,31 @@ export class Dots extends React.PureComponent {
     // In Autoplay the focus stays on clicked button even after transition
     // to next slide. That only goes away by click somewhere outside
     e.preventDefault();
+    if (this.props.autoplay && this.props.autoplaying === "playing") {
+      this.props.pauseHandler("paused");
+    }
     this.props.clickHandler(options);
+    document.activeElement.addEventListener("blur", () => {
+      if (
+        !dotClicked() &&
+        this.props.autoplay &&
+        this.props.autoplaying === "paused"
+      ) {
+        this.props.autoPlayHandler("play");
+      }
+    });
+    window.addEventListener("blur", e => {
+      if (dotClicked()) {
+        this.props.pauseHandler("paused");
+      }
+    });
+    window.addEventListener("focus", e => {
+      if (this.props.autoplay && this.props.autoplaying === "paused") {
+        this.props.pauseHandler("paused");
+      } else if (this.props.autoplay) {
+        this.props.autoPlayHandler("play");
+      }
+    });
   }
   render() {
     const {
diff --git a/src/inner-slider.js b/src/inner-slider.js
index b477bc2d1..305526205 100644
--- a/src/inner-slider.js
+++ b/src/inner-slider.js
@@ -19,7 +19,9 @@ import {
   getPreClones,
   getPostClones,
   getTrackLeft,
-  getTrackCSS
+  getTrackCSS,
+  dotClicked,
+  x
 } from "./utils/innerSliderUtils";
 
 import { Track } from "./track";
@@ -148,7 +150,9 @@ export class InnerSlider extends React.Component {
         React.Children.count(prevProps.children)
     );
   }
-
+  dotReferenceHandler = ref => {
+    this.Dotcollection = ref;
+  };
   componentDidUpdate = prevProps => {
     this.checkImagesLoad();
     this.props.onReInit && this.props.onReInit();
@@ -433,7 +437,9 @@ export class InnerSlider extends React.Component {
     } else {
       this.slideHandler(targetSlide);
     }
-    this.props.autoplay && this.autoPlay("update");
+    if (this.props.autoPlay && this.state.autoplaying !== "playing") {
+      this.props.autoplay && this.autoPlay("update");
+    }
     if (this.props.focusOnSelect) {
       const nodes = this.list.querySelectorAll(".slick-current");
       nodes[0] && nodes[0].focus();
@@ -669,17 +675,21 @@ export class InnerSlider extends React.Component {
         "children",
         "customPaging",
         "infinite",
-        "appendDots"
+        "appendDots",
+        "autoplay",
+        "autoplaying"
       ]);
       const { pauseOnDotsHover } = this.props;
       dotProps = {
         ...dotProps,
+        autoPlayHandler: this.autoPlay,
+        pauseHandler: this.pause,
         clickHandler: this.changeSlide,
         onMouseEnter: pauseOnDotsHover ? this.onDotsLeave : null,
         onMouseOver: pauseOnDotsHover ? this.onDotsOver : null,
         onMouseLeave: pauseOnDotsHover ? this.onDotsLeave : null
       };
-      dots = <Dots {...dotProps} />;
+      dots = <Dots ref={this.dotReferenceHandler} {...dotProps} />;
     }
 
     var prevArrow, nextArrow;
diff --git a/src/track.js b/src/track.js
index f8924c826..68b17f4a3 100644
--- a/src/track.js
+++ b/src/track.js
@@ -5,7 +5,8 @@ import classnames from "classnames";
 import {
   lazyStartIndex,
   lazyEndIndex,
-  getPreClones
+  getPreClones,
+  getPostClones
 } from "./utils/innerSliderUtils";
 
 // given specifications/props for a slide, fetch all the classes that need to be applied to the slide
@@ -18,7 +19,8 @@ const getSlideClasses = spec => {
   } else {
     index = spec.index;
   }
-  slickCloned = index < 0 || index >= spec.slideCount;
+  slickCloned =
+    (index < spec.slidesToShow && index < 0) || index >= spec.slideCount;
   if (spec.centerMode) {
     centerOffset = Math.floor(spec.slidesToShow / 2);
     slickCenter = (index - spec.currentSlide) % spec.slideCount === 0;
@@ -163,9 +165,12 @@ const renderSlides = spec => {
           })
         );
       }
-
-      if (childrenCount !== spec.slidesToShow) {
-        key = childrenCount + index;
+      let postCloneNo = index;
+      if (
+        postCloneNo < getPostClones(spec) &&
+        childrenCount !== spec.slidesToShow
+      ) {
+        key = postCloneNo + childrenCount;
         if (key < endIndex) {
           child = elem;
         }
diff --git a/src/utils/innerSliderUtils.js b/src/utils/innerSliderUtils.js
index c06029d0a..18b818ee4 100644
--- a/src/utils/innerSliderUtils.js
+++ b/src/utils/innerSliderUtils.js
@@ -6,10 +6,10 @@ export function clamp(number, lowerBound, upperBound) {
 
 export const safePreventDefault = event => {
   const passiveEvents = ["onTouchStart", "onTouchMove", "onWheel"];
-  if(!passiveEvents.includes(event._reactName)) {
+  if (!passiveEvents.includes(event._reactName)) {
     event.preventDefault();
   }
-}
+};
 
 export const getOnDemandLazySlides = spec => {
   let onDemandSlides = [];
@@ -33,7 +33,7 @@ export const getRequiredLazySlides = spec => {
   }
   return requiredSlides;
 };
-
+export let x = 0;
 // startIndex that needs to be present
 export const lazyStartIndex = spec =>
   spec.currentSlide - lazySlidesOnLeft(spec);
@@ -97,7 +97,22 @@ export const canGoNext = spec => {
   }
   return canGo;
 };
-
+export const getActiveElement = () => {
+  return document.activeElement;
+};
+export const getActiveParentTagName = () => {
+  return getActiveElement().parentElement.tagName;
+};
+export const getActiveParentClassName = () => {
+  return getActiveElement().parentElement.classList.value;
+};
+export const dotClicked = () => {
+  return (
+    getActiveElement().tagName === "BUTTON" &&
+    getActiveParentTagName() === "LI" &&
+    getActiveParentClassName() === "slick-active"
+  );
+};
 // given an object and a list of keys, return new object with given keys
 export const extractObject = (spec, keys) => {
   let newObject = {};
@@ -386,9 +401,12 @@ export const swipeMove = (e, spec) => {
   let touchSwipeLength = touchObject.swipeLength;
   if (!infinite) {
     if (
-      (currentSlide === 0 && (swipeDirection === "right" || swipeDirection === "down")) ||
-      (currentSlide + 1 >= dotCount && (swipeDirection === "left" || swipeDirection === "up")) ||
-      (!canGoNext(spec) && (swipeDirection === "left" || swipeDirection === "up"))
+      (currentSlide === 0 &&
+        (swipeDirection === "right" || swipeDirection === "down")) ||
+      (currentSlide + 1 >= dotCount &&
+        (swipeDirection === "left" || swipeDirection === "up")) ||
+      (!canGoNext(spec) &&
+        (swipeDirection === "left" || swipeDirection === "up"))
     ) {
       touchSwipeLength = touchObject.swipeLength * edgeFriction;
       if (edgeDragged === false && onEdge) {
@@ -784,7 +802,10 @@ export const getPostClones = spec => {
   if (spec.unslick || !spec.infinite) {
     return 0;
   }
-  return spec.slideCount;
+  if (spec.variableWidth) {
+    return spec.slideCount;
+  }
+  return spec.slidesToShow + (spec.centerMode ? 1 : 0);
 };
 
 export const getTotalSlides = spec =>