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__/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__/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();
- 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__/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();
- 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();
- 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();
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/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/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..c5ce2f2da 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 = [];
@@ -386,9 +386,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 +787,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 =>