slide1
- slide2
- slide3
- slide4
- slide1
- slide2
- slide3
- slide4
- slide1
-
- slide1
-
- )
- ).toBe(true);
- });
-});
diff --git a/__tests__/jQSlickUtils.js b/__tests__/jQSlickUtils.js
deleted file mode 100644
index e353cf45e..000000000
--- a/__tests__/jQSlickUtils.js
+++ /dev/null
@@ -1,133 +0,0 @@
-// this is for fetching details after initializing react and jquery slicks
-// and compare those details to see if things are going different
-
-import {
- createSliderReact,
- createJQuerySliderChildren,
- activeSlideInLastTransition
-} from "./testUtils";
-import $ from "jquery";
-import * as slickCarousel from "slick-carousel";
-import util from "util";
-import js_beautify, { html as html_beautify } from "js-beautify";
-
-// simulates actions from given actions object
-// takes document from the scope from where it's called
-function simulateActions(actions) {
- if (actions.clickNext) {
- for (let click = 0; click < actions.clickNext; click++) {
- $(".slick-next").click();
- }
- }
- if (actions.clickPrev) {
- for (let click = 0; click < actions.clickPrev; click++) {
- $(".slick-prev").click();
- }
- }
- if (actions.clickSequence) {
- for (let click of actions.clickSequence) {
- if (click === "n") {
- $(".slick-next").click();
- } else if (click === "p") {
- $(".slick-prev").click();
- } else {
- // that's right, you can't even write n/p properly
- }
- }
- }
-}
-
-// takes an object of keys and returns those details
-/* Possible keys can be one of the following
-currentSlide(index and value), activeSlides(index and value),
-allSlides(index and value), clonedSlides(index and value)
-*/
-function fetchDetails(keys) {
- let details = {};
- let currentSlide = null,
- activeSlides = [],
- allSlides = [],
- clonedSlides = [],
- visibleSlides = [];
- for (let slide of $("div.slick-slide")) {
- const slideObj = {
- index: $(slide).attr("data-slick-index"),
- value: $(slide)
- .find("div")
- .find("div")
- .find("h3")
- .text()
- };
- allSlides.push(slideObj);
- if ($(slide).hasClass("slick-current")) {
- currentSlide = slideObj.index;
- }
- if ($(slide).hasClass("slick-active")) {
- activeSlides.push(slideObj);
- }
- if ($(slide).hasClass("slick-cloned")) {
- clonedSlides.push(slideObj);
- }
- if ($(slide).attr("aria-hidden") == "false") {
- visibleSlides.push(slideObj);
- }
- }
- if (keys.currentSlide) {
- details.currentSlide = currentSlide;
- }
- if (keys.activeSlides) {
- details.activeSlides = activeSlides;
- }
- if (keys.allSlides) {
- details.allSlides = allSlides;
- }
- if (keys.clonedSlides) {
- details.clonedSlides = clonedSlides;
- }
- if (keys.visibleSlides) {
- details.visibleSlides = visibleSlides;
- }
- return details;
-}
-
-// creates a jQuery slick with given settings and
-// performs the given actions
-// returns the given keys
-export function getJQuerySlickDetails(settings, actions, keys) {
- // create new slider
- document.body.innerHTML = `
-
- `;
- $(".regular.slider").slick({
- ...settings
- });
- simulateActions(actions);
- // console.log(html_beautify($('.regular.slider').html()))
- return fetchDetails(keys);
-}
-
-const settings = {
- infinite: true,
- noOfSlides: 5,
- slidesToShow: 3,
- slidesToScroll: 2,
- useCSS: false,
- speed: 0
-};
-const actions = {
- clickNext: 2,
- clickPrev: 1,
- clickSequence: ["n", "p", "n"]
-};
-const keys = {
- activeSlides: true,
- visibleSlides: true,
- allSlides: true
-};
-
-test("testing getJQuerySlickDetails utility", () => {
- const details = getJQuerySlickDetails(settings, actions, keys);
- expect(details.activeSlides).toEqual(details.visibleSlides);
-});
diff --git a/__tests__/lazyLoad.test.js b/__tests__/lazyLoad.test.js
deleted file mode 100644
index df2ca6ff4..000000000
--- a/__tests__/lazyLoad.test.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import { mount } from "enzyme";
-import assign from "object-assign";
-import { getRequiredLazySlides } from "../src/utils/innerSliderUtils";
-import {
- createInnerSliderWrapper,
- clickNext,
- clickPrev,
- tryAllConfigs
-} from "./testUtils";
-
-const testSettings = settings => {
- let slider = createInnerSliderWrapper(settings);
- for (let click = 0; click < settings.noOfSlides + 2; click++) {
- let lazyLoadedList = slider.state().lazyLoadedList;
- let expectedLazyLoadedList = getRequiredLazySlides(
- assign({}, slider.props(), slider.state())
- );
- expectedLazyLoadedList.forEach(slide => {
- expect(lazyLoadedList.indexOf(slide) >= 0).toEqual(true);
- });
- clickNext(slider);
- }
-
- slider = createInnerSliderWrapper(settings);
- for (let click = 0; click < settings.noOfSlides + 2; click++) {
- let lazyLoadedList = slider.state().lazyLoadedList;
- let expectedLazyLoadedList = getRequiredLazySlides(
- assign({}, slider.props(), slider.state())
- );
- expectedLazyLoadedList.forEach(slide => {
- expect(lazyLoadedList.indexOf(slide) >= 0).toEqual(true);
- });
- clickPrev(slider);
- }
-
- slider = createInnerSliderWrapper(settings);
- for (let click = 0; click < settings.noOfSlides + 2; click++) {
- let lazyLoadedList = slider.state().lazyLoadedList;
- lazyLoadedList.forEach(slideIndex => {
- expect(
- slider.find(`[data-index=${slideIndex}]`).props().children !== undefined
- ).toBe(true);
- });
- }
-};
-
-describe("LazyLoad test", () => {
- let settings = {
- lazyLoad: true,
- useCSS: false,
- speed: 0,
- noOfSlides: [7, 8],
- initialSlide: [0, 5],
- slidesToShow: [1, 3, 4],
- slidesToScroll: [1, 3],
- centerMode: [true, false]
- };
- let settingsList = [];
- tryAllConfigs(settings, settingsList);
- // shuffle the list
- settingsList.sort(() => 0.5 - Math.random());
- settingsList.forEach((settings, index) => {
- if (Math.random() < 0.5) {
- test(`Testing config no. ${index}`, () => testSettings(settings));
- }
- });
-});
diff --git a/__tests__/mount/centerMode.test.js b/__tests__/mount/centerMode.test.js
deleted file mode 100644
index e37db0923..000000000
--- a/__tests__/mount/centerMode.test.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import { getJQuerySlickDetails } from "../jQSlickUtils";
-import { getReactSlickDetails } from "../reactSlickUtils";
-
-let settings = {
- infinite: true,
- speed: 0,
- useCSS: false,
- noOfSlides: 5,
- slidesToShow: 3,
- slidesToScroll: 1,
- centerMode: true
-};
-let actions = {
- clickNext: 0,
- clickPrev: 0,
- clickSequence: []
-};
-let keys = {
- currentSlide: true,
- activeSlides: true,
- clonedSlides: true,
- allSlides: true
-};
-
-const testsUtil = (settings, actions, keys) => {
- const jqDetails = getJQuerySlickDetails(settings, actions, keys);
- const reactDetails = getReactSlickDetails(settings, actions, keys);
- test("checking current slide jQuery vs react", () => {
- expect(reactDetails.currentSlide).toEqual(jqDetails.currentSlide);
- });
- test("checking active slides jQuery vs react", () => {
- expect(reactDetails.activeSlides).toEqual(jqDetails.activeSlides);
- });
-
- // 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)
- );
- });
- test("checking all slides jQuery vs react", () => {
- expect(reactDetails.allSlides.map(slide => slide.index)).toEqual(
- jqDetails.allSlides.map(slide => slide.index)
- );
- });
-};
-
-describe("InnerSlider component tests: Part 1", () => {
- testsUtil(settings, actions, keys);
-});
-describe("InnerSlider component tests: Part 2", () => {
- settings.slidesToScroll = 2;
- testsUtil(settings, actions, keys);
-});
-describe("InnerSlider component tests: Part 3", () => {
- actions.clickNext = 2;
- testsUtil(settings, actions, keys);
-});
-describe("InnerSlider component tests: Part 4", () => {
- actions.clickPrev = 2;
- testsUtil(settings, actions, keys);
-});
-describe("InnerSlider component tests: Part 5", () => {
- actions.clickNext = 6;
- testsUtil(settings, actions, keys);
-});
-describe("InnerSlider component tests: Part 6", () => {
- actions.clickPrev = 6;
- testsUtil(settings, actions, keys);
-});
-describe("InnerSlider component tests: Part 7", () => {
- actions.clickSequence = ["n", "n", "n", "n", "n", "n", "p", "p", "p"];
- testsUtil(settings, actions, keys);
-});
-describe("InnerSlider component tests: Part 8", () => {
- actions.clickSequence = ["p", "p", "p", "p", "p", "p", "n", "n", "n"];
- testsUtil(settings, actions, keys);
-});
diff --git a/__tests__/mount/lazyload.test.js b/__tests__/mount/lazyload.test.js
deleted file mode 100644
index 08db3c1ab..000000000
--- a/__tests__/mount/lazyload.test.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import { getJQuerySlickDetails } from "../jQSlickUtils";
-import { getReactSlickDetails } from "../reactSlickUtils";
-
-let settings = {
- infinite: true,
- speed: 0,
- useCSS: false,
- lazyLoad: true,
- noOfSlides: 5,
- slidesToShow: 3,
- slidesToScroll: 1
-};
-let actions = {
- clickNext: 0,
- clickPrev: 0,
- clickSequence: []
-};
-let keys = {
- currentSlide: true,
- activeSlides: true,
- clonedSlides: true,
- allSlides: true
-};
-
-const testsUtil = (settings, actions, keys) => {
- const jqDetails = getJQuerySlickDetails(settings, actions, keys);
- const reactDetails = getReactSlickDetails(settings, actions, keys);
- test.skip("checking current slide jQuery vs react", () => {
- expect(reactDetails.currentSlide).toEqual(jqDetails.currentSlide);
- });
- test.skip("checking active slides jQuery vs react", () => {
- expect(reactDetails.activeSlides).toEqual(jqDetails.activeSlides);
- });
-
- // 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)
- );
- });
- test("checking all slides jQuery vs react", () => {
- expect(reactDetails.allSlides.map(slide => slide.index)).toEqual(
- jqDetails.allSlides.map(slide => slide.index)
- );
- });
-};
-
-describe("InnerSlider component tests with lazyload: Part 1", () => {
- testsUtil(settings, actions, keys);
-});
-describe("InnerSlider component tests with lazyload: Part 2", () => {
- settings.slidesToScroll = 2;
- testsUtil(settings, actions, keys);
-});
-describe("InnerSlider component tests with lazyload: Part 3", () => {
- actions.clickNext = 2;
- testsUtil(settings, actions, keys);
-});
-describe("InnerSlider component tests with lazyload: Part 4", () => {
- actions.clickPrev = 2;
- testsUtil(settings, actions, keys);
-});
-describe("InnerSlider component tests with lazyload: Part 5", () => {
- actions.clickNext = 6;
- testsUtil(settings, actions, keys);
-});
-describe("InnerSlider component tests with lazyload: Part 6", () => {
- actions.clickPrev = 6;
- testsUtil(settings, actions, keys);
-});
-describe("InnerSlider component tests with lazyload: Part 7", () => {
- actions.clickSequence = ["n", "n", "n", "n", "n", "n", "p", "p", "p"];
- testsUtil(settings, actions, keys);
-});
-describe("InnerSlider component tests with lazyload: Part 8", () => {
- actions.clickSequence = ["p", "p", "p", "p", "p", "p", "n", "n", "n"];
- testsUtil(settings, actions, keys);
-});
diff --git a/__tests__/mount/live.test.js b/__tests__/mount/live.test.js
deleted file mode 100644
index 069a457d9..000000000
--- a/__tests__/mount/live.test.js
+++ /dev/null
@@ -1,77 +0,0 @@
-import { getJQuerySlickDetails } from "../jQSlickUtils";
-import { getReactSlickDetails } from "../reactSlickUtils";
-
-describe("live testing module", () => {
- let settings = {
- infinite: true,
- speed: 0,
- useCSS: false,
- noOfSlides: 5,
- slidesToShow: 3,
- slidesToScroll: 1
- // centerMode: true,
- };
- let actions = {
- clickNext: 0,
- clickPrev: 0,
- clickSequence: []
- };
- let keys = {
- // currentSlide: true,
- // activeSlides: true,
- clonedSlides: true
- // allSlides: true,
- };
- let reactDetails = getReactSlickDetails(settings, actions, keys);
- let jqueryDetails = getJQuerySlickDetails(settings, actions, keys);
-
- // for(let noOfSlides of [5, 12]){
- // for (let slidesToShow of [1, 11, 12]){
- // for (let slidesToScroll of [1, 2, 11, 12]){
-
- // for(let noOfSlides of [2, 3, 5, 6, 12]){
- // for (let slidesToShow of [1, 2, 3, 5, 11, 12]){
- // for (let slidesToScroll of [1, 2, 3, 5, 11, 12]){
- // if(noOfSlides < slidesToShow || noOfSlides < slidesToScroll || slidesToShow < slidesToScroll){
- // continue;
- // }
- // settings.noOfSlides = noOfSlides
- // settings.slidesToShow = slidesToShow
- // settings.slidesToScroll = slidesToScroll
- // const jqueryDetails = getJQuerySlickDetails(settings, actions, keys)
- // const reactDetails = getReactSlickDetails(settings, actions, keys)
- // // test('number of cloned slides', () => {
- // // expect(jqueryDetails.clonedSlides.filter(slide => slide.index < 0).length).toEqual(
- // // noOfSlides === slidesToShow ? 0 : (settings.centerMode ? slidesToShow+1 : slidesToShow)
- // // )
- // // expect(jqueryDetails.clonedSlides.filter(slide => slide.index >= 0).length).toEqual(
- // // noOfSlides === slidesToShow ? 0 : noOfSlides
- // // )
- // // })
-
- // test('number of cloned slides, react vs jquery', () => {
- // expect(reactDetails.clonedSlides.filter(slide => slide.index < 0).length).toEqual(
- // jqueryDetails.clonedSlides.filter(slide => slide.index < 0).length
- // )
- // expect(reactDetails.clonedSlides.filter(slide => slide.index >= 0).length).toEqual(
- // jqueryDetails.clonedSlides.filter(slide => slide.index >= 0).length
- // )
- // })
-
- // // console.log(
- // // 'settings:', settings, '\n',
- // // 'pre:', jqueryDetails.clonedSlides.filter(slide => slide.index < 0).length,
- // // 'post:', jqueryDetails.clonedSlides.filter(slide => slide.index >= 0).length
- // // )
- // // console.log(
- // // 'settings2:', settings.noOfSlides, '\n',
- // // 'details2:', reactDetails.clonedSlides
- // // .filter(slide => slide.index > 0).length
- // // )
- // }
- // }
- // }
- test("fake test", () => {
- expect(1).toBe(1);
- });
-});
diff --git a/__tests__/mount/simple.test.js b/__tests__/mount/simple.test.js
deleted file mode 100644
index 06253ae52..000000000
--- a/__tests__/mount/simple.test.js
+++ /dev/null
@@ -1,77 +0,0 @@
-import { getJQuerySlickDetails } from "../jQSlickUtils";
-import { getReactSlickDetails } from "../reactSlickUtils";
-
-let settings = {
- infinite: true,
- speed: 0,
- useCSS: false,
- noOfSlides: 5,
- slidesToShow: 3,
- slidesToScroll: 1
-};
-let actions = {
- clickNext: 0,
- clickPrev: 0,
- clickSequence: []
-};
-let keys = {
- currentSlide: true,
- activeSlides: true,
- clonedSlides: true,
- allSlides: true
-};
-
-const testsUtil = (settings, actions, keys) => {
- const jqDetails = getJQuerySlickDetails(settings, actions, keys);
- const reactDetails = getReactSlickDetails(settings, actions, keys);
- test("checking current slide jQuery vs react", () => {
- expect(reactDetails.currentSlide).toEqual(jqDetails.currentSlide);
- });
- test("checking active slides jQuery vs react", () => {
- expect(reactDetails.activeSlides).toEqual(jqDetails.activeSlides);
- });
-
- // 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)
- );
- });
- test("checking all slides jQuery vs react", () => {
- expect(reactDetails.allSlides.map(slide => slide.index)).toEqual(
- jqDetails.allSlides.map(slide => slide.index)
- );
- });
-};
-
-describe("InnerSlider component tests: Part 1", () => {
- testsUtil(settings, actions, keys);
-});
-describe("InnerSlider component tests: Part 2", () => {
- settings.slidesToScroll = 2;
- testsUtil(settings, actions, keys);
-});
-describe("InnerSlider component tests: Part 3", () => {
- actions.clickNext = 2;
- testsUtil(settings, actions, keys);
-});
-describe("InnerSlider component tests: Part 4", () => {
- actions.clickPrev = 2;
- testsUtil(settings, actions, keys);
-});
-describe("InnerSlider component tests: Part 5", () => {
- actions.clickNext = 6;
- testsUtil(settings, actions, keys);
-});
-describe("InnerSlider component tests: Part 6", () => {
- actions.clickPrev = 6;
- testsUtil(settings, actions, keys);
-});
-describe("InnerSlider component tests: Part 7", () => {
- actions.clickSequence = ["n", "n", "n", "n", "n", "n", "p", "p", "p"];
- testsUtil(settings, actions, keys);
-});
-describe("InnerSlider component tests: Part 8", () => {
- actions.clickSequence = ["p", "p", "p", "p", "p", "p", "n", "n", "n"];
- testsUtil(settings, actions, keys);
-});
diff --git a/__tests__/observations.json b/__tests__/observations.json
deleted file mode 100644
index 300bdcf15..000000000
--- a/__tests__/observations.json
+++ /dev/null
@@ -1,54 +0,0 @@
-{
- "jQueryTest": [
- {
- "observation": "Clicks on arrows are not working properly",
- "possibleCause": "Animation effects are taking effects somehow",
- "solutions": [
- {
- "description": "set useCSS property to false",
- "status": "did not work"
- },
- {
- "description": "set speed property to 0",
- "status": "worked, now the clicks are working as of now"
- }
- ]
- },
- {
- "observation": "arrows are disabled when slidesToShow are equal to noOfSlides",
- "status": "causes few tests to fail"
- },
- {
- "observation": "tests are very slow",
- "possibleCause": "synchronous click event simulation and slow DOM api",
- "status": "not tried yet"
- }
- ],
- "reactTest": [
- {
- "observation": "Clicks on arrows are not working properly",
- "possibleCause": "Animation effects are taking effects somehow",
- "solutions": [
- {
- "description": "set useCSS property to false",
- "status": "worked, now the clicks are working as of now"
- }
- ]
- }
- ],
- "misc": [
- {
- "observation": "In case of reverse scrolling, slick-active class is not being assigned properly.",
- "example": {
- "settings": {
- "noOfSlides": 5,
- "slidesToShow": 2,
- "slidesToScroll": 2
- },
- "jqueryBehaviour": "after one prev click, current-slide is 5th and active-class is assigned to slide 4th and 5th while the same are displayed in frame",
- "reactBehaviour": "after one prev click, current-slide is 5th and active-class is assigned to slide 5th and 1st(cloned) while 4th and 5th are displayed in frame",
- "status": "several tests are failing due to this property"
- }
- }
- ]
-}
\ No newline at end of file
diff --git a/__tests__/reactSlickUtils.js b/__tests__/reactSlickUtils.js
deleted file mode 100644
index cf44a155b..000000000
--- a/__tests__/reactSlickUtils.js
+++ /dev/null
@@ -1,94 +0,0 @@
-import { createInnerSliderWrapper } from "./testUtils";
-
-// given slider and actions objects, and simulates given actions
-function simulateActions(slider, actions) {
- const nextArrow = slider.find(".slick-next");
- const prevArrow = slider.find(".slick-prev");
- if (actions.clickNext) {
- for (let click = 0; click < actions.clickNext; click++) {
- nextArrow.simulate("click");
- }
- }
- if (actions.clickPrev) {
- for (let click = 0; click < actions.clickPrev; click++) {
- prevArrow.simulate("click");
- }
- }
- if (actions.clickSequence) {
- for (let click of actions.clickSequence) {
- if (click === "n") {
- nextArrow.simulate("click");
- } else if (click === "p") {
- prevArrow.simulate("click");
- } else {
- // not a valid action for now
- }
- }
- }
- // console.log('after simulating actions, state of slider:', slider.state())
-}
-
-function fetchDetails(slider, keys) {
- let details = { ...fetchDOMDetails(slider, keys) };
- if (keys.currentSlide) {
- details.currentSlide = slider.state().currentSlide.toString();
- }
- return details;
-}
-
-function fetchDOMDetails(slider, keys) {
- let details = {};
- let currentSlide = null,
- activeSlides = [],
- allSlides = [],
- clonedSlides = [],
- visibleSlides = []; // currently no way to find these
- slider.find("div.slick-slide").forEach((slide, index) => {
- const slideObj = {
- index: slide.prop("data-index").toString(),
- value: slide.find("h3").length === 1 ? slide.find("h3").text() : "..."
- };
- allSlides.push(slideObj);
- if (slide.hasClass("slick-active")) {
- activeSlides.push(slideObj);
- }
- if (slide.hasClass("slick-cloned")) {
- clonedSlides.push(slideObj);
- }
- if (slide.hasClass("slick-current")) {
- currentSlide = slideObj;
- }
- });
- if (keys.currentSlide) {
- details.currentSlide = currentSlide;
- }
- if (keys.activeSlides) {
- details.activeSlides = activeSlides;
- }
- if (keys.allSlides) {
- details.allSlides = allSlides;
- }
- if (keys.clonedSlides) {
- details.clonedSlides = clonedSlides;
- }
- if (keys.visibleSlides) {
- details.visibleSlides = visibleSlides;
- }
- return details;
-}
-
-export function getReactSlickDetails(settings, actions, keys) {
- const slider = createInnerSliderWrapper(settings);
- simulateActions(slider, actions);
- return fetchDetails(slider, keys);
-}
-
-/*
-settings: [...sliderProps, noOfSlides],
-actions: [clickNext, clickPrev, clickSequence],
-keys: [currentSlide, activeSlides, clonedSlides, allSlides, visibleSlides]
-*/
-
-test("fake test", () => {
- expect(1).toBe(1);
-});
diff --git a/__tests__/sliderStyles.test.js b/__tests__/sliderStyles.test.js
deleted file mode 100644
index a34f2a705..000000000
--- a/__tests__/sliderStyles.test.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import { mount } from "enzyme";
-import assign from "object-assign";
-import { getRequiredLazySlides } from "../src/utils/innerSliderUtils";
-import {
- createInnerSliderWrapper,
- clickNext,
- clickPrev,
- tryAllConfigs,
- actualTrackLeft,
- testTrackLeft
-} from "./testUtils";
-import { getTrackLeft } from "../src/utils/innerSliderUtils";
-
-const testSettings = settings => {
- let slider = createInnerSliderWrapper(settings);
- for (let click = 0; click < settings.noOfSlides + 2; click++) {
- testTrackLeft(slider);
- clickNext(slider);
- }
- slider = createInnerSliderWrapper(settings);
- for (let click = 0; click < settings.noOfSlides + 2; click++) {
- testTrackLeft(slider);
- clickPrev(slider);
- }
-};
-
-describe("Slider Styles Tests", () => {
- let settings = {
- useCSS: false,
- speed: 0,
- centerMode: [true, false],
- noOfSlides: [7, 8],
- initialSlide: [0, 5],
- slidesToShow: [1, 3, 4]
- };
- let settingsList = [];
- tryAllConfigs(settings, settingsList);
- // shuffle the list
- settingsList.sort(() => 0.5 - Math.random());
- settingsList.forEach((settings, index) => {
- if (Math.random() < 0.5) {
- test(`Testing config no. ${index}`, () => testSettings(settings));
- }
- });
-});
diff --git a/__tests__/testUtils.js b/__tests__/testUtils.js
deleted file mode 100644
index ce4a12047..000000000
--- a/__tests__/testUtils.js
+++ /dev/null
@@ -1,171 +0,0 @@
-import React from "react";
-import $ from "jquery";
-import assign from "object-assign";
-import { mount } from "enzyme";
-import Slider from "../src/slider";
-import { InnerSlider } from "../src/inner-slider";
-import defaultProps from "../src/default-props";
-import * as slickCarousel from "slick-carousel"; // defining slick in global environment
-import { getTrackLeft } from "../src/utils/innerSliderUtils";
-
-// finds active slide number in the last transition in the forward direction
-export function activeSlideInLastTransition(
- noOfSlides,
- slidesToShow,
- slidesToScroll
-) {
- let currentSlide = 0;
- while (currentSlide < noOfSlides) {
- currentSlide += slidesToScroll;
- }
- return currentSlide - slidesToScroll;
-}
-
-// create jsx-form children for react slider
-export function createReactSliderChildren(noOfSlides) {
- return Array.from(Array(noOfSlides).keys()).map(i => (
-
-
- ));
-}
-
-// create a react-slider with given noOfSlides and other props
-// variable widths are ignored for now for simplicity
-export function createReactSlider({ noOfSlides, ...props }) {
- return {i + 1}
-${i + 1}
-
"
-`;
-
-exports[`CenterMode Tests Counting test 1`] = `
-"Center Mode
- -
-
"
-`;
-
-exports[`CenterMode Tests Positioning test 1`] = `
-"Center Mode
- -
-
"
-`;
diff --git a/examples/__tests__/__snapshots__/FocusOnSelect.test.js.snap b/examples/__tests__/__snapshots__/FocusOnSelect.test.js.snap
deleted file mode 100644
index 181930df8..000000000
--- a/examples/__tests__/__snapshots__/FocusOnSelect.test.js.snap
+++ /dev/null
@@ -1,237 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FocusOnSelect Tests Activity Test 1`] = `
-"Center Mode
- -
-
"
-`;
-
-exports[`FocusOnSelect Tests Activity Test 2`] = `
-"FocusOnSelect
-Click on any slide to select and make it current slide
-
-
-
"
-`;
diff --git a/examples/__tests__/__snapshots__/MultipleItems.test.js.snap b/examples/__tests__/__snapshots__/MultipleItems.test.js.snap
deleted file mode 100644
index 7e4aabd01..000000000
--- a/examples/__tests__/__snapshots__/MultipleItems.test.js.snap
+++ /dev/null
@@ -1,1477 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Multiple Items should have 3 active slides 1`] = `
-"FocusOnSelect
-Click on any slide to select and make it current slide
-
-
-
"
-`;
-
-exports[`Multiple Items should have 3 dots 1`] = `
-"Multiple items
- -
-
"
-`;
-
-exports[`Multiple Items should have 9 actual slides and (3(pre) + 9(post)) clone slides 1`] = `
-"Multiple items
- -
-
"
-`;
-
-exports[`Multiple Items should show first 3 slides 1`] = `
-"Multiple items
- -
-
"
-`;
-
-exports[`Multiple Items should show last 3 slides when last dot is clicked 1`] = `
-"Multiple items
- -
-
"
-`;
-
-exports[`Multiple Items should show last 3 slides when previous button is clicked 1`] = `
-"Multiple items
- -
-
"
-`;
-
-exports[`Multiple Items should show slides first 3 slides when middle dot is clicked 1`] = `
-"Multiple items
- -
-
"
-`;
-
-exports[`Multiple Items should show slides from 4 to 6 when middle dot is clicked 1`] = `
-"Multiple items
- -
-
"
-`;
-
-exports[`Multiple Items should show slides from 4 to 6 when next button is clicked 1`] = `
-"Multiple items
- -
-
"
-`;
diff --git a/examples/__tests__/__snapshots__/SimpleSlider.test.js.snap b/examples/__tests__/__snapshots__/SimpleSlider.test.js.snap
deleted file mode 100644
index 08be35767..000000000
--- a/examples/__tests__/__snapshots__/SimpleSlider.test.js.snap
+++ /dev/null
@@ -1,445 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Simple Slider Snapshots click on 3rd dot 1`] = `
-"Multiple items
- -
-
"
-`;
-
-exports[`Simple Slider Snapshots click on next button 1`] = `
-"Single Item
- -
-
"
-`;
-
-exports[`Simple Slider Snapshots click on prev button 1`] = `
-"Single Item
- -
-
"
-`;
-
-exports[`Simple Slider Snapshots slider initial state 1`] = `
-"Single Item
- -
-
"
-`;
diff --git a/examples/__tests__/__snapshots__/UnevenSets.test.js.snap b/examples/__tests__/__snapshots__/UnevenSets.test.js.snap
deleted file mode 100644
index b1dacdf75..000000000
--- a/examples/__tests__/__snapshots__/UnevenSets.test.js.snap
+++ /dev/null
@@ -1,559 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`UnevenSets Finite Activity test 1`] = `
-"Single Item
- -
-
"
-`;
-
-exports[`UnevenSets Finite Counting test 1`] = `
-"Uneven sets (finite)
- -
-
"
-`;
-
-exports[`UnevenSets Finite Positioning test 1`] = `
-"Uneven sets (finite)
- -
-
"
-`;
-
-exports[`UnevenSets Infinite Activity test 1`] = `
-"Uneven sets (finite)
- -
-
"
-`;
-
-exports[`UnevenSets Infinite Counting test 1`] = `
-"Uneven sets (infinite)
- -
-
"
-`;
-
-exports[`UnevenSets Infinite Positioning test 1`] = `
-"Uneven sets (infinite)
- -
-
"
-`;
diff --git a/examples/__tests__/sample.test.js b/examples/__tests__/sample.test.js
deleted file mode 100644
index 4a17f8ea0..000000000
--- a/examples/__tests__/sample.test.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from "react";
-import { mount } from "enzyme";
-
-export default class Counter extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- count: 0
- };
- }
- render() {
- return (
-
- );
- }
-}
-
-describe("sample counter test", function() {
- it("mutliple counts", function() {
- const wrapper = mount(Uneven sets (infinite)
- -slide1
+ slide2
+ slide3
+ slide4
+ slide1
+ slide2
+ slide3
+ slide4
+
+
+ ));
+}
+
+// create a react-slider with given noOfSlides and other props
+// variable widths are ignored for now for simplicity
+export function createReactSlider({ noOfSlides, ...props }) {
+ return {i + 1}
+${i + 1}
+
+
+
+ );
+}
+
+export default SliderComponent;
diff --git a/__test__/SliderComponent.test.js b/__test__/SliderComponent.test.js
new file mode 100644
index 000000000..b53bc9c8d
--- /dev/null
+++ b/__test__/SliderComponent.test.js
@@ -0,0 +1,292 @@
+import React from "react";
+import SliderComponent from "./SliderComponent";
+import { render, fireEvent } from "@testing-library/react";
+import {
+ getActiveSlide,
+ clickNext,
+ clickPrevious,
+ hasClass,
+ getActiveSlides,
+ getActiveSlidesCount,
+ getActiveSlidesText,
+ getButtons,
+ getButtonsListItem,
+ getCurrentSlide
+} from "../test-utils";
+
+describe("SliderComponent Tests with different settings", () => {
+ it("(SimpleSliderTest) should have 13 slides (1(preclone) + 6(actual) + 6(postclone))", function() {
+ const settings = {
+ dots: true,
+ infinite: true,
+ speed: 500,
+ slidesToShow: 1,
+ slidesToScroll: 1
+ };
+ const { container } = render(Slider
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
-
-
-
- );
- }
+function AdaptiveHeight() {
+ const settings = {
+ className: "",
+ dots: true,
+ infinite: true,
+ slidesToShow: 1,
+ slidesToScroll: 1,
+ adaptiveHeight: true
+ };
+
+ return (
+ Adaptive height
-
-
- 1
-
-
- 2
-Hello
-
-
- 3
-See ....
-Height is adaptive
-
-
- 4
-
-
- 5
-
-
- 6
-
+
+
+
+ );
+}
export default AdaptiveHeight;
diff --git a/examples/AppendDots.js b/examples/AppendDots.js
index f9001ecc5..57f8ccb39 100644
--- a/examples/AppendDots.js
+++ b/examples/AppendDots.js
@@ -1,61 +1,60 @@
-import React, { Component } from "react";
+import React from "react";
import Slider from "../src/slider";
-export default class AppendDots extends Component {
- render() {
- const settings = {
- dots: true,
- infinite: true,
- speed: 500,
- slidesToShow: 1,
- slidesToScroll: 1,
- appendDots: dots => (
- Adaptive height
+
+
+ 1
+
+
+ 2
+Hello
+
+
+ 3
+See ....
+Height is adaptive
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
-
- {dots}
+
+ ),
+ customPaging: i => (
+ - {dots}
+ {i + 1}
+
+ )
+ };
+ return (
+
+
+
Append Dots
+
+
- ),
- customPaging: i => (
- 1
- {i + 1}
+
+ );
}
+export default AppendDots;
diff --git a/examples/AsNavFor.js b/examples/AsNavFor.js
index caacb2be8..cab4c1a9a 100644
--- a/examples/AsNavFor.js
+++ b/examples/AsNavFor.js
@@ -1,78 +1,69 @@
-import React, { Component } from "react";
+import React, { useState, useEffect, useRef } from "react";
import Slider from "../src/slider";
-export default class AsNavFor extends Component {
- constructor(props) {
- super(props);
- this.state = {
- nav1: null,
- nav2: null
- };
- }
+function AsNavFor(props) {
+ const [nav1, setNav1] = useState(null);
+ const [nav2, setNav2] = useState(null);
+ let sliderRef1 = useRef(null);
+ let sliderRef2 = useRef(null);
- componentDidMount() {
- this.setState({
- nav1: this.slider1,
- nav2: this.slider2
- });
- }
-
- render() {
- return (
-
+
- )
- };
- return (
- 2
-
-
-
- );
- }
+ Append Dots
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+
+ 6
+
- (this.slider1 = slider)}
- >
-
- (this.slider2 = slider)}
- slidesToShow={3}
- swipeToSlide={true}
- focusOnSelect={true}
- >
-
-
- );
- }
+ useEffect(() => {
+ setNav1(sliderRef1);
+ setNav2(sliderRef2);
+ }, []);
+ return (
+ Slider Syncing (AsNavFor)
-First Slider
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-Second Slider
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
+ (sliderRef1 = slider)}>
+
+ (sliderRef2 = slider)}
+ slidesToShow={3}
+ swipeToSlide={true}
+ focusOnSelect={true}
+ >
+
+
+ );
}
+
+export default AsNavFor;
diff --git a/examples/AutoPlay.js b/examples/AutoPlay.js
index 73e99d577..452ea8659 100644
--- a/examples/AutoPlay.js
+++ b/examples/AutoPlay.js
@@ -1,42 +1,42 @@
-import React, { Component } from "react";
+import React from "react";
import Slider from "../src/slider";
-export default class AutoPlay extends Component {
- render() {
- const settings = {
- dots: true,
- infinite: true,
- slidesToShow: 3,
- slidesToScroll: 1,
- autoplay: true,
- speed: 2000,
- autoplaySpeed: 2000,
- cssEase: "linear"
- };
- return (
- Slider Syncing (AsNavFor)
+First Slider
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+Second Slider
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
-
-
-
- );
- }
+function AutoPlay() {
+ const settings = {
+ dots: true,
+ infinite: true,
+ slidesToShow: 3,
+ slidesToScroll: 1,
+ autoplay: true,
+ speed: 2000,
+ autoplaySpeed: 2000,
+ cssEase: "linear"
+ };
+ return (
+ Auto Play
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
+
+
+
+ );
}
+
+export default AutoPlay;
diff --git a/examples/AutoPlayMethods.js b/examples/AutoPlayMethods.js
index 0fdd86346..c6b4d635d 100644
--- a/examples/AutoPlayMethods.js
+++ b/examples/AutoPlayMethods.js
@@ -1,59 +1,55 @@
-import React, { Component } from "react";
+import React, { useRef } from "react";
import Slider from "../src/slider";
-export default class AutoPlayMethods extends Component {
- constructor(props) {
- super(props);
- this.play = this.play.bind(this);
- this.pause = this.pause.bind(this);
- }
- play() {
- this.slider.slickPlay();
- }
- pause() {
- this.slider.slickPause();
- }
- render() {
- const settings = {
- dots: true,
- infinite: true,
- slidesToShow: 3,
- slidesToScroll: 1,
- autoplay: true,
- autoplaySpeed: 2000
- };
- return (
- Auto Play
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
- (this.slider = slider)} {...settings}>
-
-
Auto Play & Pause with buttons
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
-
-
+function AutoPlayMethods(props) {
+ let sliderRef = useRef(null);
+ const play = () => {
+ sliderRef.slickPlay();
+ };
+ const pause = () => {
+ sliderRef.slickPause();
+ };
+
+ const settings = {
+ dots: true,
+ infinite: true,
+ slidesToShow: 3,
+ slidesToScroll: 1,
+ autoplay: true,
+ autoplaySpeed: 2000
+ };
+ return (
+ 
-
- );
- },
- dots: true,
- dotsClass: "slick-dots slick-thumb",
- infinite: true,
- speed: 500,
- slidesToShow: 1,
- slidesToScroll: 1
- };
- return (
-
+
+ );
+ },
+ dots: true,
+ dotsClass: "slick-dots slick-thumb",
+ infinite: true,
+ speed: 500,
+ slidesToShow: 1,
+ slidesToScroll: 1
+ };
+ return (
+
+ (sliderRef = slider)} {...settings}>
+
+
+ );
}
+export default AutoPlayMethods;
diff --git a/examples/CenterMode.js b/examples/CenterMode.js
index e67816700..101df61ca 100644
--- a/examples/CenterMode.js
+++ b/examples/CenterMode.js
@@ -1,40 +1,40 @@
import React, { Component } from "react";
import Slider from "../src/slider";
-export default class CenterMode extends Component {
- render() {
- const settings = {
- className: "center",
- centerMode: true,
- infinite: true,
- centerPadding: "60px",
- slidesToShow: 3,
- speed: 500
- };
- return (
- Auto Play {"&"} Pause with buttons
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
+
- );
- }
+
-
-
-
- );
- }
+function CenterMode() {
+ const settings = {
+ className: "center",
+ centerMode: true,
+ infinite: true,
+ centerPadding: "60px",
+ slidesToShow: 3,
+ speed: 500
+ };
+ return (
+ Center Mode
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
+
+
+
+ );
}
+
+export default CenterMode;
diff --git a/examples/CustomArrows.js b/examples/CustomArrows.js
index 8f85b86e5..fbd3582ca 100644
--- a/examples/CustomArrows.js
+++ b/examples/CustomArrows.js
@@ -23,40 +23,40 @@ function SamplePrevArrow(props) {
);
}
-export default class CustomArrows extends Component {
- render() {
- const settings = {
- dots: true,
- infinite: true,
- slidesToShow: 3,
- slidesToScroll: 1,
- nextArrow: Center Mode
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
-
-
-
- );
- }
+function CustomArrows() {
+ const settings = {
+ dots: true,
+ infinite: true,
+ slidesToShow: 3,
+ slidesToScroll: 1,
+ nextArrow: Custom Arrows
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
+
+
+
+ );
}
+
+export default CustomArrows;
diff --git a/examples/CustomPaging.js b/examples/CustomPaging.js
index 3d369689e..66e53ea72 100644
--- a/examples/CustomPaging.js
+++ b/examples/CustomPaging.js
@@ -2,41 +2,41 @@ import React, { Component } from "react";
import Slider from "../src/slider";
import { baseUrl } from "./config";
-export default class CenterMode extends Component {
- render() {
- const settings = {
- customPaging: function(i) {
- return (
-
- Custom Arrows
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
-
-
-
- );
- }
+function CustomPaging() {
+ const settings = {
+ customPaging: function(i) {
+ return (
+
+ Custom Paging
-
- 
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+ );
}
+
+export default CustomPaging;
diff --git a/examples/CustomSlides.js b/examples/CustomSlides.js
index cbf5f2c6d..da4ee51d3 100644
--- a/examples/CustomSlides.js
+++ b/examples/CustomSlides.js
@@ -1,38 +1,36 @@
import React, { Component } from "react";
import Slider from "../src/slider";
-class CustomSlide extends Component {
- render() {
- const { index, ...props } = this.props;
- return (
- Custom Paging
+
+
+
+
+
+
+
+
+
+
+
+
+
-
- );
- }
+function CustomSlide(props) {
+ const { index, ...props } = props;
+ return (
+ {index}
-
+
+ );
}
-export default class SimpleSlider extends Component {
- render() {
- const settings = {
- dots: true,
- infinite: true,
- speed: 500,
- slidesToShow: 1,
- slidesToScroll: 1
- };
- return (
- {index}
+
-
-
-
- );
- }
+function SimpleSlider() {
+ const settings = {
+ dots: true,
+ infinite: true,
+ speed: 500,
+ slidesToShow: 1,
+ slidesToScroll: 1
+ };
+ return (
+ Custom Slides
-
+
+
+
+ );
}
+
+export default SimpleSlider;
diff --git a/examples/DynamicSlides.js b/examples/DynamicSlides.js
index e0e405476..a69859fff 100644
--- a/examples/DynamicSlides.js
+++ b/examples/DynamicSlides.js
@@ -1,45 +1,45 @@
-import React, { Component } from "react";
+import React, { useState } from "react";
import Slider from "../src/slider";
-export default class DynamicSlides extends Component {
- constructor(props) {
- super(props);
- this.state = {
- slides: [1, 2, 3, 4, 5, 6]
- };
- this.click = this.click.bind(this);
- }
- click() {
- const { slides } = this.state;
- this.setState({
- slides:
- slides.length === 6 ? [1, 2, 3, 4, 5, 6, 7, 8, 9] : [1, 2, 3, 4, 5, 6]
- });
- }
- render() {
- const settings = {
- dots: true,
- infinite: true,
- speed: 500,
- slidesToShow: 3,
- slidesToScroll: 3
- };
- return (
- Custom Slides
+
-
- {this.state.slides.map(function(slide) {
- return (
-
-
+function DynamicSlides(props) {
+ const [slides, setSlides] = useState([1, 2, 3, 4, 5, 6]);
+ const handleClick = () => {
+ setSlides(
+ slides.length === 6 ? [1, 2, 3, 4, 5, 6, 7, 8, 9] : [1, 2, 3, 4, 5, 6]
);
- }
+ };
+ // click() {
+ // const { slides } = this.state;
+ // this.setState({
+ // slides:
+ // slides.length === 6 ? [1, 2, 3, 4, 5, 6, 7, 8, 9] : [1, 2, 3, 4, 5, 6]
+ // });
+ // }
+ const settings = {
+ dots: true,
+ infinite: true,
+ speed: 500,
+ slidesToShow: 3,
+ slidesToScroll: 3,
+ ...props
+ };
+ return (
+ Dynamic slides
- -
-
- );
- })}
- {slide}
-
+
+ {slides.map(slide => {
+ return (
+
+
+ );
}
+
+export default DynamicSlides;
diff --git a/examples/Fade.js b/examples/Fade.js
index e4ae2c961..ff75f45bf 100644
--- a/examples/Fade.js
+++ b/examples/Fade.js
@@ -1,36 +1,36 @@
-import React, { Component } from "react";
+import React from "react";
import Slider from "../src/slider";
import { baseUrl } from "./config";
-export default class Fade extends Component {
- render() {
- const settings = {
- dots: true,
- fade: true,
- infinite: true,
- speed: 500,
- slidesToShow: 1,
- slidesToScroll: 1,
- waitForAnimate: false
- };
- return (
- Dynamic slides
+ +
+
+ );
+ })}
+ {slide}
+
-
-
-
- );
- }
+function Fade() {
+ const settings = {
+ dots: true,
+ fade: true,
+ infinite: true,
+ speed: 500,
+ slidesToShow: 1,
+ slidesToScroll: 1,
+ waitForAnimate: false
+ };
+ return (
+ Fade
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+ );
}
+
+export default Fade;
diff --git a/examples/FocusOnSelect.js b/examples/FocusOnSelect.js
index 42eab9d60..07f8fbc72 100644
--- a/examples/FocusOnSelect.js
+++ b/examples/FocusOnSelect.js
@@ -1,40 +1,40 @@
import React, { Component } from "react";
import Slider from "../src/slider";
-export default class FocusOnSelect extends Component {
- render() {
- const settings = {
- focusOnSelect: true,
- infinite: true,
- slidesToShow: 3,
- slidesToScroll: 1,
- speed: 500
- };
- return (
- Fade
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
- );
- }
+function FocusOnSelect() {
+ const settings = {
+ focusOnSelect: true,
+ infinite: true,
+ slidesToShow: 3,
+ slidesToScroll: 1,
+ speed: 500
+ };
+ return (
+ FocusOnSelect
-Click on any slide to select and make it current slide
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
+
+
+
+ );
}
+
+export default FocusOnSelect;
diff --git a/examples/LazyLoad.js b/examples/LazyLoad.js
index d5ecfeb74..d4b80d726 100644
--- a/examples/LazyLoad.js
+++ b/examples/LazyLoad.js
@@ -2,35 +2,35 @@ import React, { Component } from "react";
import Slider from "../src/slider";
import { baseUrl } from "./config";
-export default class LazyLoad extends Component {
- render() {
- const settings = {
- dots: true,
- lazyLoad: true,
- infinite: true,
- speed: 500,
- slidesToShow: 1,
- slidesToScroll: 1,
- initialSlide: 2
- };
- return (
- FocusOnSelect
+Click on any slide to select and make it current slide
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
-
-
-
- );
- }
+function LazyLoad() {
+ const settings = {
+ dots: true,
+ lazyLoad: true,
+ infinite: true,
+ speed: 500,
+ slidesToShow: 1,
+ slidesToScroll: 1,
+ initialSlide: 2
+ };
+ return (
+ Lazy Load
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+ );
}
+
+export default LazyLoad;
diff --git a/examples/MultipleItems.js b/examples/MultipleItems.js
index a23c8793b..2634fdd93 100644
--- a/examples/MultipleItems.js
+++ b/examples/MultipleItems.js
@@ -1,48 +1,48 @@
-import React, { Component } from "react";
+import React from "react";
import Slider from "../src/slider";
-export default class MultipleItems extends Component {
- render() {
- const settings = {
- dots: true,
- infinite: true,
- speed: 500,
- slidesToShow: 3,
- slidesToScroll: 3
- };
- return (
- Lazy Load
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
- );
- }
+function MultipleItems() {
+ const settings = {
+ dots: true,
+ infinite: true,
+ speed: 500,
+ slidesToShow: 3,
+ slidesToScroll: 3
+ };
+ return (
+ Multiple items
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
+
+
+
+ );
}
+
+export default MultipleItems;
diff --git a/examples/MultipleRows.js b/examples/MultipleRows.js
index 4b56b4cbd..a36a5eb3d 100644
--- a/examples/MultipleRows.js
+++ b/examples/MultipleRows.js
@@ -1,72 +1,72 @@
-import React, { Component } from "react";
+import React from "react";
import Slider from "../src/slider";
-export default class MultipleRows extends Component {
- render() {
- const settings = {
- className: "center",
- centerMode: true,
- infinite: true,
- centerPadding: "60px",
- slidesToShow: 3,
- speed: 500,
- rows: 2,
- slidesPerRow: 2
- };
- return (
- Multiple items
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
+
+ 7
+
+
+ 8
+
+
+ 9
+
-
-
-
- );
- }
+function MultipleRows() {
+ const settings = {
+ className: "center",
+ centerMode: true,
+ infinite: true,
+ centerPadding: "60px",
+ slidesToShow: 3,
+ speed: 500,
+ rows: 2,
+ slidesPerRow: 2
+ };
+ return (
+ Multiple Rows
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
-
- 10
-
-
- 11
-
-
- 12
-
-
- 13
-
-
- 14
-
-
- 15
-
-
- 16
-
+
+
+
+ );
}
+
+export default MultipleRows;
diff --git a/examples/PauseOnHover.js b/examples/PauseOnHover.js
index 16b4d2660..97aa2dbfb 100644
--- a/examples/PauseOnHover.js
+++ b/examples/PauseOnHover.js
@@ -1,41 +1,41 @@
import React, { Component } from "react";
import Slider from "../src/slider";
-export default class PauseOnHover extends Component {
- render() {
- var settings = {
- dots: true,
- infinite: true,
- slidesToShow: 3,
- slidesToScroll: 1,
- autoplay: true,
- autoplaySpeed: 2000,
- pauseOnHover: true
- };
- return (
- Multiple Rows
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
+
+ 7
+
+
+ 8
+
+
+ 9
+
+
+ 10
+
+
+ 11
+
+
+ 12
+
+
+ 13
+
+
+ 14
+
+
+ 15
+
+
+ 16
+
-
-
-
- );
- }
+function PauseOnHover() {
+ var settings = {
+ dots: true,
+ infinite: true,
+ slidesToShow: 3,
+ slidesToScroll: 1,
+ autoplay: true,
+ autoplaySpeed: 2000,
+ pauseOnHover: true
+ };
+ return (
+ Pause On Hover
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
+
+
+
+ );
}
+
+export default PauseOnHover;
diff --git a/examples/PreviousNextMethods.js b/examples/PreviousNextMethods.js
index e3a0ead73..4d7b04913 100644
--- a/examples/PreviousNextMethods.js
+++ b/examples/PreviousNextMethods.js
@@ -1,58 +1,55 @@
-import React, { Component } from "react";
+import React, { useRef } from "react";
import Slider from "../src/slider";
-export default class PreviousNextMethods extends Component {
- constructor(props) {
- super(props);
- this.next = this.next.bind(this);
- this.previous = this.previous.bind(this);
- }
- next() {
+function PreviousNextMethods(props) {
+ const sliderRef = useRef(null);
+ const next = () => {
this.slider.slickNext();
- }
- previous() {
+ };
+ const previous = () => {
this.slider.slickPrev();
- }
- render() {
- const settings = {
- dots: true,
- infinite: true,
- speed: 500,
- slidesToShow: 1,
- slidesToScroll: 1
- };
- return (
- Pause On Hover
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
- (this.slider = c)} {...settings}>
-
-
Previous and Next methods
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
-
-
+ };
+ const settings = {
+ dots: true,
+ infinite: true,
+ speed: 500,
+ slidesToShow: 1,
+ slidesToScroll: 1,
+ ...props
+ };
+ return (
+
+ (sliderRef = slider)} {...settings}>
+
+
+ );
}
+
+export default PreviousNextMethods;
diff --git a/examples/Resizable.js b/examples/Resizable.js
index d7747fa91..e5be1bfa5 100644
--- a/examples/Resizable.js
+++ b/examples/Resizable.js
@@ -1,83 +1,61 @@
-import React, { Component } from "react";
+import React, { useState } from "react";
import Slider from "../src/slider";
-export default class Resizable extends Component {
- state = {
- display: true,
- width: 600
+function Resizable() {
+ const [display, setDisplay] = useState(true);
+ const [width, setWidth] = useState(600);
+
+ const settings = {
+ dots: true,
+ infinite: true,
+ speed: 500,
+ slidesToShow: 3,
+ slidesToScroll: 1
};
- render() {
- const settings = {
- dots: true,
- infinite: true,
- speed: 500,
- slidesToShow: 3,
- slidesToScroll: 1
- };
- return (
- Previous and Next methods
+
+
+ 1
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
+
+
- );
- }
+
-
Date: Mon, 5 Jun 2023 08:26:53 +0530
Subject: [PATCH 25/58] added node options to run docs
---
package.json | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/package.json b/package.json
index eea87e83a..6425e7f7d 100644
--- a/package.json
+++ b/package.json
@@ -8,8 +8,8 @@
"lib"
],
"scripts": {
- "start": "gulp server",
- "demo": "SINGLE_DEMO=true gulp server",
+ "start": "NODE_OPTIONS=--openssl-legacy-provider gulp server",
+ "demo": "SINGLE_DEMO=true NODE_OPTIONS=--openssl-legacy-provider gulp server",
"build-dev": "gulp clean && gulp copy && webpack",
"lib": "babel ./src --out-dir ./lib",
"build": "npm run lib && gulp dist",
From e1e766ff3b73fb26c0d8e430a7254b27d3edb6f6 Mon Sep 17 00:00:00 2001
From: akiran
Date: Mon, 5 Jun 2023 08:37:10 +0530
Subject: [PATCH 26/58] remove other changes
---
__test__/SliderComponent.js | 33 ----
__test__/SliderComponent.test.js | 292 -------------------------------
src/inner-slider.js | 1 -
3 files changed, 326 deletions(-)
delete mode 100644 __test__/SliderComponent.js
delete mode 100644 __test__/SliderComponent.test.js
diff --git a/__test__/SliderComponent.js b/__test__/SliderComponent.js
deleted file mode 100644
index 54ec971f0..000000000
--- a/__test__/SliderComponent.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from "react";
-import Slider from "../src/slider";
-
-function SliderComponent(props) {
- const { settings } = props;
- return (
-
Date: Mon, 5 Jun 2023 09:02:38 +0530
Subject: [PATCH 27/58] fixed some issues with component changes
---
examples/CustomSlides.js | 4 ++--
examples/PreviousNextMethods.js | 13 +++++++++----
examples/SlideChangeHooks.js | 8 +++-----
3 files changed, 14 insertions(+), 11 deletions(-)
diff --git a/examples/CustomSlides.js b/examples/CustomSlides.js
index da4ee51d3..07450e8b2 100644
--- a/examples/CustomSlides.js
+++ b/examples/CustomSlides.js
@@ -2,9 +2,9 @@ import React, { Component } from "react";
import Slider from "../src/slider";
function CustomSlide(props) {
- const { index, ...props } = props;
+ const { index, ...otherProps } = props;
return (
-
Resizable Collapsible
- - - -
-
-
-
+ return (
+
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
+
+ );
}
+
+export default Resizable;
diff --git a/examples/Responsive.js b/examples/Responsive.js
index efa606229..3e8abeb9c 100644
--- a/examples/Responsive.js
+++ b/examples/Responsive.js
@@ -1,72 +1,72 @@
-import React, { Component } from "react";
+import React from "react";
import Slider from "../src/slider";
-export default class Responsive extends Component {
- render() {
- var settings = {
- dots: true,
- infinite: false,
- speed: 500,
- slidesToShow: 4,
- slidesToScroll: 4,
- initialSlide: 0,
- responsive: [
- {
- breakpoint: 1024,
- settings: {
- slidesToShow: 3,
- slidesToScroll: 3,
- infinite: true,
- dots: true
- }
- },
- {
- breakpoint: 600,
- settings: {
- slidesToShow: 2,
- slidesToScroll: 2,
- initialSlide: 2
- }
- },
- {
- breakpoint: 480,
- settings: {
- slidesToShow: 1,
- slidesToScroll: 1
- }
+function Responsive() {
+ var settings = {
+ dots: true,
+ infinite: false,
+ speed: 500,
+ slidesToShow: 4,
+ slidesToScroll: 4,
+ initialSlide: 0,
+ responsive: [
+ {
+ breakpoint: 1024,
+ settings: {
+ slidesToShow: 3,
+ slidesToScroll: 3,
+ infinite: true,
+ dots: true
}
- ]
- };
- return (
- Resizable Collapsible
+ + + +
+
+
- );
- }
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
-
-
-
- );
- }
+ },
+ {
+ breakpoint: 600,
+ settings: {
+ slidesToShow: 2,
+ slidesToScroll: 2,
+ initialSlide: 2
+ }
+ },
+ {
+ breakpoint: 480,
+ settings: {
+ slidesToShow: 1,
+ slidesToScroll: 1
+ }
+ }
+ ]
+ };
+ return (
+ Responsive
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
-
- 7
-
-
- 8
-
+
+
+
+ );
}
+
+export default Responsive;
diff --git a/examples/Rtl.js b/examples/Rtl.js
index e72edc5d6..a1473bcd5 100644
--- a/examples/Rtl.js
+++ b/examples/Rtl.js
@@ -1,41 +1,41 @@
-import React, { Component } from "react";
+import React from "react";
import Slider from "../src/slider";
-export default class Rtl extends Component {
- render() {
- const settings = {
- dots: true,
- infinite: true,
- slidesToShow: 3,
- slidesToScroll: 1,
- autoplay: true,
- autoplaySpeed: 2000,
- rtl: true
- };
- return (
- Responsive
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
+
+ 7
+
+
+ 8
+
-
-
-
- );
- }
+function Rtl() {
+ const settings = {
+ dots: true,
+ infinite: true,
+ slidesToShow: 3,
+ slidesToScroll: 1,
+ autoplay: true,
+ autoplaySpeed: 2000,
+ rtl: true
+ };
+ return (
+ Right to Left
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
+
+
+
+ );
}
+
+export default Rtl;
diff --git a/examples/SimpleSlider.js b/examples/SimpleSlider.js
index 92d10fbca..ee06df7a3 100644
--- a/examples/SimpleSlider.js
+++ b/examples/SimpleSlider.js
@@ -1,40 +1,40 @@
-import React, { Component } from "react";
+import React from "react";
import Slider from "../src/slider";
-export default class SimpleSlider extends Component {
- render() {
- const settings = {
- dots: true,
- infinite: true,
- speed: 500,
- initialSlide: 2,
- slidesToShow: 1,
- slidesToScroll: 1
- };
- return (
- Right to Left
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
-
-
-
- );
- }
+function SimpleSlider(props) {
+ const settings = {
+ dots: true,
+ infinite: true,
+ speed: 500,
+ slidesToShow: 1,
+ slidesToScroll: 1,
+ ...props
+ };
+ return (
+ Single Item
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
+
+
+
+ );
}
+
+export default SimpleSlider;
diff --git a/examples/SlickGoTo.js b/examples/SlickGoTo.js
index f5c49840a..07ef3c1f9 100644
--- a/examples/SlickGoTo.js
+++ b/examples/SlickGoTo.js
@@ -1,50 +1,53 @@
-import React, { Component } from "react";
+import React, { useState, useRef } from "react";
import Slider from "../src/slider";
import { baseUrl } from "./config";
-export default class SlickGoTo extends React.Component {
- state = {
- slideIndex: 0,
- updateCount: 0
+function SlickGoTo(props) {
+ const [slideIndex, setSlideIndex] = useState(0);
+ const [updateCount, setUpdateCount] = useState(0);
+ let sliderRef = useRef(null);
+ const settings = {
+ dots: false,
+ infinite: true,
+ speed: 500,
+ slidesToShow: 1,
+ slidesToScroll: 1,
+ afterChange: () => setUpdateCount(updateCount + 1),
+ beforeChange: (current, next) => setSlideIndex(next),
+ ...props
};
-
- render() {
- const settings = {
- dots: false,
- infinite: true,
- speed: 500,
- slidesToShow: 1,
- slidesToScroll: 1,
- afterChange: () =>
- this.setState(state => ({ updateCount: state.updateCount + 1 })),
- beforeChange: (current, next) => this.setState({ slideIndex: next })
- };
- return (
- Single Item
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
- (this.slider = slider)} {...settings}>
-
-
- );
- }
+ return (
+ Slick Go To
-Total updates: {this.state.updateCount}
- this.slider.slickGoTo(e.target.value)} - value={this.state.slideIndex} - type="range" - min={0} - max={3} - /> -
-
-
-
-
-
-
-
-
-
-
-
-
+ {
+ sliderRef = slider;
+ }}
+ {...settings}
+ >
+
+
+ );
}
+
+export default SlickGoTo;
diff --git a/examples/SlideChangeHooks.js b/examples/SlideChangeHooks.js
index 9f8b31753..9e6a6a85f 100644
--- a/examples/SlideChangeHooks.js
+++ b/examples/SlideChangeHooks.js
@@ -1,56 +1,59 @@
-import React, { Component } from "react";
+import React, { useState } from "react";
import Slider from "../src/slider";
-export default class SlideChangeHooks extends Component {
- state = {
- oldSlide: 0,
- activeSlide: 0,
- activeSlide2: 0
+function SlideChangeHooks() {
+ const [oldSlide, setOldSlide] = useState(0);
+ const [activeSlide, setActiveSlide] = useState(0);
+ const [activeSlide2, setActiveSlide2] = useState(0);
+
+ const settings = {
+ dots: true,
+ infinite: true,
+ speed: 1000,
+ slidesToShow: 1,
+ slidesToScroll: 1,
+ beforeChange: (current, next) => {
+ setOldSlide(current);
+ setActiveSlide(next);
+ },
+ afterChange: current => setActiveSlide2(current)
};
- render() {
- const settings = {
- dots: true,
- infinite: true,
- speed: 1000,
- slidesToShow: 1,
- slidesToScroll: 1,
- beforeChange: (current, next) =>
- this.setState({ oldSlide: current, activeSlide: next }),
- afterChange: current => this.setState({ activeSlide2: current })
- };
- return (
- Slick Go To
+Total updates: {updateCount}
+ sliderRef.slickGoTo(e.target.value)} + value={slideIndex} + type="range" + min={0} + max={3} + /> +
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
- );
- }
+ return (
+ beforeChange and afterChange hooks
-- BeforeChange => oldSlide: {this.state.oldSlide} -
-- BeforeChange => activeSlide: {this.state.activeSlide} -
-- AfterChange => activeSlide: {this.state.activeSlide2} -
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
+
+
+
+ );
}
+
+export default SlideChangeHooks;
diff --git a/examples/SwipeToSlide.js b/examples/SwipeToSlide.js
index 2e51db349..855e4a629 100644
--- a/examples/SwipeToSlide.js
+++ b/examples/SwipeToSlide.js
@@ -1,53 +1,53 @@
import React, { Component } from "react";
import Slider from "../src/slider";
-export default class SwipeToSlide extends Component {
- render() {
- const settings = {
- className: "center",
- infinite: true,
- centerPadding: "60px",
- slidesToShow: 5,
- swipeToSlide: true,
- afterChange: function(index) {
- console.log(
- `Slider Changed to: ${index + 1}, background: #222; color: #bada55`
- );
- }
- };
- return (
- beforeChange and afterChange hooks
++ BeforeChange {"=>"} oldSlide: {this.state.oldSlide} +
++ BeforeChange {"=>"} activeSlide:{" "} + {this.state.activeSlide} +
++ AfterChange {"=>"} activeSlide:{" "} + {this.state.activeSlide2} +
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
-
-
-
- );
- }
+function SwipeToSlide() {
+ const settings = {
+ className: "center",
+ infinite: true,
+ centerPadding: "60px",
+ slidesToShow: 5,
+ swipeToSlide: true,
+ afterChange: function(index) {
+ console.log(
+ `Slider Changed to: ${index + 1}, background: #222; color: #bada55`
+ );
+ }
+ };
+ return (
+ Swipe To Slide
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
+
+
+
+ );
}
+
+export default SwipeToSlide;
diff --git a/examples/UnevenSetsFinite.js b/examples/UnevenSetsFinite.js
index d465209b6..08e574b47 100644
--- a/examples/UnevenSetsFinite.js
+++ b/examples/UnevenSetsFinite.js
@@ -1,39 +1,39 @@
-import React, { Component } from "react";
+import React from "react";
import Slider from "../src/slider";
-export default class UnevenSetsFinite extends Component {
- render() {
- var settings = {
- dots: true,
- infinite: false,
- speed: 500,
- slidesToScroll: 4,
- slidesToShow: 4
- };
- return (
- Swipe To Slide
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
+
+ 7
+
+
+ 8
+
+
+ 9
+
-
-
-
- );
- }
+function UnevenSetsFinite() {
+ var settings = {
+ dots: true,
+ infinite: false,
+ speed: 500,
+ slidesToScroll: 4,
+ slidesToShow: 4
+ };
+ return (
+ Uneven sets (finite)
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
+
+
+
+ );
}
+
+export default UnevenSetsFinite;
diff --git a/examples/UnevenSetsInfinite.js b/examples/UnevenSetsInfinite.js
index 7e00a43a7..9f7295fbe 100644
--- a/examples/UnevenSetsInfinite.js
+++ b/examples/UnevenSetsInfinite.js
@@ -1,39 +1,39 @@
-import React, { Component } from "react";
+import React from "react";
import Slider from "../src/slider";
-export default class UnevenSetsInfinite extends Component {
- render() {
- var settings = {
- dots: true,
- infinite: true,
- speed: 500,
- slidesToScroll: 4,
- slidesToShow: 4
- };
- return (
- Uneven sets (finite)
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
-
-
-
- );
- }
+function UnevenSetsInfinite() {
+ var settings = {
+ dots: true,
+ infinite: true,
+ speed: 500,
+ slidesToScroll: 4,
+ slidesToShow: 4
+ };
+ return (
+ Uneven sets (infinite)
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
+
+
+
+ );
}
+
+export default UnevenSetsInfinite;
diff --git a/examples/VariableWidth.js b/examples/VariableWidth.js
index 9289c2258..e8f7baaa0 100644
--- a/examples/VariableWidth.js
+++ b/examples/VariableWidth.js
@@ -1,41 +1,41 @@
-import React, { Component } from "react";
+import React from "react";
import Slider from "../src/slider";
-export default class VariableWidth extends Component {
- render() {
- const settings = {
- className: "slider variable-width",
- dots: true,
- infinite: true,
- centerMode: true,
- slidesToShow: 1,
- slidesToScroll: 1,
- variableWidth: true
- };
- return (
- Uneven sets (infinite)
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
-
-
-
- );
- }
+function VariableWidth() {
+ const settings = {
+ className: "slider variable-width",
+ dots: true,
+ infinite: true,
+ centerMode: true,
+ slidesToShow: 1,
+ slidesToScroll: 1,
+ variableWidth: true
+ };
+ return (
+ Variable width
-
-
- 100
-
-
- 200
-
-
- 75
-
-
- 300
-
-
- 225
-
-
- 175
-
+
+
+
+ );
}
+
+export default VariableWidth;
diff --git a/examples/VerticalMode.js b/examples/VerticalMode.js
index fc54c8585..b138a4180 100644
--- a/examples/VerticalMode.js
+++ b/examples/VerticalMode.js
@@ -1,46 +1,46 @@
import React, { Component } from "react";
import Slider from "../src/slider";
-export default class VerticalMode extends Component {
- render() {
- const settings = {
- dots: true,
- infinite: true,
- slidesToShow: 3,
- slidesToScroll: 1,
- vertical: true,
- verticalSwiping: true,
- beforeChange: function(currentSlide, nextSlide) {
- console.log("before change", currentSlide, nextSlide);
- },
- afterChange: function(currentSlide) {
- console.log("after change", currentSlide);
- }
- };
- return (
- Variable width
+
+
+ 100
+
+
+ 200
+
+
+ 75
+
+
+ 300
+
+
+ 225
+
+
+ 175
+
-
-
-
- );
- }
+function VerticalMode() {
+ const settings = {
+ dots: true,
+ infinite: true,
+ slidesToShow: 3,
+ slidesToScroll: 1,
+ vertical: true,
+ verticalSwiping: true,
+ beforeChange: function(currentSlide, nextSlide) {
+ console.log("before change", currentSlide, nextSlide);
+ },
+ afterChange: function(currentSlide) {
+ console.log("after change", currentSlide);
+ }
+ };
+ return (
+ Vertical Mode
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
+
+
+
+ );
}
+
+export default VerticalMode;
diff --git a/examples/VerticalSwipeToSlide.js b/examples/VerticalSwipeToSlide.js
index 36ed22d84..a7c8c2b3a 100644
--- a/examples/VerticalSwipeToSlide.js
+++ b/examples/VerticalSwipeToSlide.js
@@ -1,47 +1,47 @@
import React, { Component } from "react";
import Slider from "../src/slider";
-export default class VerticalSwipeToSlide extends Component {
- render() {
- const settings = {
- dots: true,
- infinite: true,
- slidesToShow: 3,
- slidesToScroll: 1,
- vertical: true,
- verticalSwiping: true,
- swipeToSlide: true,
- beforeChange: function(currentSlide, nextSlide) {
- console.log("before change", currentSlide, nextSlide);
- },
- afterChange: function(currentSlide) {
- console.log("after change", currentSlide);
- }
- };
- return (
- Vertical Mode
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
-
-
-
- );
- }
+function VerticalSwipeToSlide() {
+ const settings = {
+ dots: true,
+ infinite: true,
+ slidesToShow: 3,
+ slidesToScroll: 1,
+ vertical: true,
+ verticalSwiping: true,
+ swipeToSlide: true,
+ beforeChange: function(currentSlide, nextSlide) {
+ console.log("before change", currentSlide, nextSlide);
+ },
+ afterChange: function(currentSlide) {
+ console.log("after change", currentSlide);
+ }
+ };
+ return (
+ Vertical Mode with Swipe To Slide
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
+
+
+
+ );
}
+
+export default VerticalSwipeToSlide;
diff --git a/examples/__tests__/SimpleSlider.test.js b/examples/__tests__/SimpleSlider.test.js
index 6e5ac8540..71402cbbb 100644
--- a/examples/__tests__/SimpleSlider.test.js
+++ b/examples/__tests__/SimpleSlider.test.js
@@ -24,14 +24,14 @@ describe("SimpleSlider example", () => {
const { container } = render(Vertical Mode with Swipe To Slide
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
-
-
-
- );
-}
-
-export default SliderComponent;
diff --git a/__test__/SliderComponent.test.js b/__test__/SliderComponent.test.js
deleted file mode 100644
index b53bc9c8d..000000000
--- a/__test__/SliderComponent.test.js
+++ /dev/null
@@ -1,292 +0,0 @@
-import React from "react";
-import SliderComponent from "./SliderComponent";
-import { render, fireEvent } from "@testing-library/react";
-import {
- getActiveSlide,
- clickNext,
- clickPrevious,
- hasClass,
- getActiveSlides,
- getActiveSlidesCount,
- getActiveSlidesText,
- getButtons,
- getButtonsListItem,
- getCurrentSlide
-} from "../test-utils";
-
-describe("SliderComponent Tests with different settings", () => {
- it("(SimpleSliderTest) should have 13 slides (1(preclone) + 6(actual) + 6(postclone))", function() {
- const settings = {
- dots: true,
- infinite: true,
- speed: 500,
- slidesToShow: 1,
- slidesToScroll: 1
- };
- const { container } = render(Slider
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
+
);
diff --git a/examples/PreviousNextMethods.js b/examples/PreviousNextMethods.js
index 4d7b04913..7eeeb33e3 100644
--- a/examples/PreviousNextMethods.js
+++ b/examples/PreviousNextMethods.js
@@ -2,12 +2,12 @@ import React, { useRef } from "react";
import Slider from "../src/slider";
function PreviousNextMethods(props) {
- const sliderRef = useRef(null);
+ let sliderRef = useRef(null);
const next = () => {
- this.slider.slickNext();
+ sliderRef.slickNext();
};
const previous = () => {
- this.slider.slickPrev();
+ sliderRef.slickPrev();
};
const settings = {
dots: true,
@@ -20,7 +20,12 @@ function PreviousNextMethods(props) {
return (
(sliderRef = slider)} {...settings}>
+ {
+ sliderRef = slider;
+ }}
+ {...settings}
+ >
diff --git a/examples/SlideChangeHooks.js b/examples/SlideChangeHooks.js
index 9e6a6a85f..cf3ca7938 100644
--- a/examples/SlideChangeHooks.js
+++ b/examples/SlideChangeHooks.js
@@ -22,15 +22,13 @@ function SlideChangeHooks() {
{index}
Previous and Next methods
-1
beforeChange and afterChange hooks
- BeforeChange {"=>"} oldSlide: {this.state.oldSlide} + BeforeChange {"=>"} oldSlide: {oldSlide}
- BeforeChange {"=>"} activeSlide:{" "} - {this.state.activeSlide} + BeforeChange {"=>"} activeSlide: {activeSlide}
- AfterChange {"=>"} activeSlide:{" "} - {this.state.activeSlide2} + AfterChange {"=>"} activeSlide: {activeSlide2}
From 76b833f0b76546478a384e6cf697249896e45245 Mon Sep 17 00:00:00 2001
From: akiran
Date: Fri, 19 Jan 2024 13:43:33 +0530
Subject: [PATCH 28/58] added an empty prettierrc file to use default prettier
config
---
.prettierrc | 0
1 file changed, 0 insertions(+), 0 deletions(-)
create mode 100644 .prettierrc
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 000000000..e69de29bb
From bb355c2a97212e0954c7e624b414fd5422da3785 Mon Sep 17 00:00:00 2001
From: akiran
Date: Fri, 19 Jan 2024 22:26:42 +0530
Subject: [PATCH 29/58] added react-slick alias in webpack for examples
---
examples/AdaptiveHeight.js | 2 +-
examples/AppendDots.js | 2 +-
examples/AsNavFor.js | 2 +-
examples/AutoPlay.js | 2 +-
examples/AutoPlayMethods.js | 2 +-
examples/CenterMode.js | 2 +-
examples/CustomArrows.js | 3 ++-
examples/CustomPaging.js | 2 +-
examples/CustomSlides.js | 2 +-
examples/DynamicSlides.js | 2 +-
examples/Fade.js | 2 +-
examples/FocusOnSelect.js | 2 +-
examples/LazyLoad.js | 2 +-
examples/MultipleItems.js | 2 +-
examples/MultipleRows.js | 2 +-
examples/PauseOnHover.js | 2 +-
examples/PreviousNextMethods.js | 2 +-
examples/Resizable.js | 2 +-
examples/Responsive.js | 2 +-
examples/Rtl.js | 2 +-
examples/SimpleSlider.js | 2 +-
examples/SlickGoTo.js | 2 +-
examples/SlideChangeHooks.js | 2 +-
examples/SwipeToSlide.js | 2 +-
examples/UnevenSetsFinite.js | 2 +-
examples/UnevenSetsInfinite.js | 2 +-
examples/VariableWidth.js | 2 +-
examples/VerticalMode.js | 2 +-
examples/VerticalSwipeToSlide.js | 2 +-
webpack.config.js | 5 ++++-
30 files changed, 34 insertions(+), 30 deletions(-)
diff --git a/examples/AdaptiveHeight.js b/examples/AdaptiveHeight.js
index 4f24ca3ad..5b0faa85b 100644
--- a/examples/AdaptiveHeight.js
+++ b/examples/AdaptiveHeight.js
@@ -1,5 +1,5 @@
import React from "react";
-import Slider from "../src/slider";
+import Slider from "react-slick";
function AdaptiveHeight() {
const settings = {
diff --git a/examples/AppendDots.js b/examples/AppendDots.js
index 57f8ccb39..ab467e6bf 100644
--- a/examples/AppendDots.js
+++ b/examples/AppendDots.js
@@ -1,5 +1,5 @@
import React from "react";
-import Slider from "../src/slider";
+import Slider from "react-slick";
function AppendDots() {
const settings = {
diff --git a/examples/AsNavFor.js b/examples/AsNavFor.js
index cab4c1a9a..739b89ae8 100644
--- a/examples/AsNavFor.js
+++ b/examples/AsNavFor.js
@@ -1,5 +1,5 @@
import React, { useState, useEffect, useRef } from "react";
-import Slider from "../src/slider";
+import Slider from "react-slick";
function AsNavFor(props) {
const [nav1, setNav1] = useState(null);
diff --git a/examples/AutoPlay.js b/examples/AutoPlay.js
index 452ea8659..2cb6eb5d5 100644
--- a/examples/AutoPlay.js
+++ b/examples/AutoPlay.js
@@ -1,5 +1,5 @@
import React from "react";
-import Slider from "../src/slider";
+import Slider from "react-slick";
function AutoPlay() {
const settings = {
diff --git a/examples/AutoPlayMethods.js b/examples/AutoPlayMethods.js
index c6b4d635d..ab902f8c0 100644
--- a/examples/AutoPlayMethods.js
+++ b/examples/AutoPlayMethods.js
@@ -1,5 +1,5 @@
import React, { useRef } from "react";
-import Slider from "../src/slider";
+import Slider from "react-slick";
function AutoPlayMethods(props) {
let sliderRef = useRef(null);
diff --git a/examples/CenterMode.js b/examples/CenterMode.js
index 101df61ca..de1fd16e9 100644
--- a/examples/CenterMode.js
+++ b/examples/CenterMode.js
@@ -1,5 +1,5 @@
import React, { Component } from "react";
-import Slider from "../src/slider";
+import Slider from "react-slick";
function CenterMode() {
const settings = {
diff --git a/examples/CustomArrows.js b/examples/CustomArrows.js
index fbd3582ca..f3e0b02d4 100644
--- a/examples/CustomArrows.js
+++ b/examples/CustomArrows.js
@@ -1,7 +1,8 @@
import React, { Component } from "react";
-import Slider from "../src/slider";
+import Slider from "react-slick";
function SampleNextArrow(props) {
+ console.log(props);
const { className, style, onClick } = props;
return (
Date: Sat, 20 Jan 2024 22:27:28 +0530
Subject: [PATCH 30/58] running single demo on different port
---
gulpfile.js | 2 +-
package.json | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/gulpfile.js b/gulpfile.js
index b0351b5a4..2859e2b9f 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -9,7 +9,7 @@ var opn = require("opn");
var UglifyJsPlugin = require("uglifyjs-webpack-plugin");
-const DEV_PORT = 8080;
+const DEV_PORT = process.env.DEV_PORT || 8080;
gulp.task("clean", function() {
return del(["./build/*"]);
diff --git a/package.json b/package.json
index 6425e7f7d..8395727b9 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
],
"scripts": {
"start": "NODE_OPTIONS=--openssl-legacy-provider gulp server",
- "demo": "SINGLE_DEMO=true NODE_OPTIONS=--openssl-legacy-provider gulp server",
+ "demo": "SINGLE_DEMO=true DEV_PORT=8000 NODE_OPTIONS=--openssl-legacy-provider gulp server",
"build-dev": "gulp clean && gulp copy && webpack",
"lib": "babel ./src --out-dir ./lib",
"build": "npm run lib && gulp dist",
From 3669b0a44b0d26a97dc3612ea7ff1ed7dbcfda82 Mon Sep 17 00:00:00 2001
From: rjsdnql123
Date: Thu, 25 Jan 2024 00:41:37 +0900
Subject: [PATCH 31/58] Fix: If the element (DOM element) and the value of
'slidesToShow' are the same, and 'infinite' is set to true, swipe should be
possible.
---
src/slider.js | 2 +-
src/track.js | 5 +----
2 files changed, 2 insertions(+), 5 deletions(-)
diff --git a/src/slider.js b/src/slider.js
index 65d63a4b5..82c91a912 100644
--- a/src/slider.js
+++ b/src/slider.js
@@ -198,7 +198,7 @@ export default class Slider extends React.Component {
if (settings === "unslick") {
const className = "regular slider " + (this.props.className || "");
return
Date: Thu, 25 Jan 2024 10:03:07 +0530
Subject: [PATCH 32/58] added tests for #1813
---
{__test__ => __tests__}/SimpleSlider.test.js | 0
{__test__ => __tests__}/afterChange.test.js | 0
{__test__ => __tests__}/arrows.js | 0
{__test__ => __tests__}/beforeChange.test.js | 0
{__test__ => __tests__}/jQSlickUtils.js | 0
{__test__ => __tests__}/lazyLoad.test.js | 0
.../mount/centerMode.test.js | 0
.../mount/lazyLoad.test.js | 0
{__test__ => __tests__}/mount/live.test.js | 0
{__test__ => __tests__}/mount/simple.test.js | 0
{__test__ => __tests__}/observations.json | 0
{__test__ => __tests__}/reactSlickUtils.js | 0
__tests__/regression/fix-1813.js | 196 ++++++++++++++++++
{__test__ => __tests__}/sliderStyles.test.js | 0
{__test__ => __tests__}/testUtils.js | 0
docs/single-demo.js | 4 +-
16 files changed, 199 insertions(+), 1 deletion(-)
rename {__test__ => __tests__}/SimpleSlider.test.js (100%)
rename {__test__ => __tests__}/afterChange.test.js (100%)
rename {__test__ => __tests__}/arrows.js (100%)
rename {__test__ => __tests__}/beforeChange.test.js (100%)
rename {__test__ => __tests__}/jQSlickUtils.js (100%)
rename {__test__ => __tests__}/lazyLoad.test.js (100%)
rename {__test__ => __tests__}/mount/centerMode.test.js (100%)
rename {__test__ => __tests__}/mount/lazyLoad.test.js (100%)
rename {__test__ => __tests__}/mount/live.test.js (100%)
rename {__test__ => __tests__}/mount/simple.test.js (100%)
rename {__test__ => __tests__}/observations.json (100%)
rename {__test__ => __tests__}/reactSlickUtils.js (100%)
create mode 100644 __tests__/regression/fix-1813.js
rename {__test__ => __tests__}/sliderStyles.test.js (100%)
rename {__test__ => __tests__}/testUtils.js (100%)
diff --git a/__test__/SimpleSlider.test.js b/__tests__/SimpleSlider.test.js
similarity index 100%
rename from __test__/SimpleSlider.test.js
rename to __tests__/SimpleSlider.test.js
diff --git a/__test__/afterChange.test.js b/__tests__/afterChange.test.js
similarity index 100%
rename from __test__/afterChange.test.js
rename to __tests__/afterChange.test.js
diff --git a/__test__/arrows.js b/__tests__/arrows.js
similarity index 100%
rename from __test__/arrows.js
rename to __tests__/arrows.js
diff --git a/__test__/beforeChange.test.js b/__tests__/beforeChange.test.js
similarity index 100%
rename from __test__/beforeChange.test.js
rename to __tests__/beforeChange.test.js
diff --git a/__test__/jQSlickUtils.js b/__tests__/jQSlickUtils.js
similarity index 100%
rename from __test__/jQSlickUtils.js
rename to __tests__/jQSlickUtils.js
diff --git a/__test__/lazyLoad.test.js b/__tests__/lazyLoad.test.js
similarity index 100%
rename from __test__/lazyLoad.test.js
rename to __tests__/lazyLoad.test.js
diff --git a/__test__/mount/centerMode.test.js b/__tests__/mount/centerMode.test.js
similarity index 100%
rename from __test__/mount/centerMode.test.js
rename to __tests__/mount/centerMode.test.js
diff --git a/__test__/mount/lazyLoad.test.js b/__tests__/mount/lazyLoad.test.js
similarity index 100%
rename from __test__/mount/lazyLoad.test.js
rename to __tests__/mount/lazyLoad.test.js
diff --git a/__test__/mount/live.test.js b/__tests__/mount/live.test.js
similarity index 100%
rename from __test__/mount/live.test.js
rename to __tests__/mount/live.test.js
diff --git a/__test__/mount/simple.test.js b/__tests__/mount/simple.test.js
similarity index 100%
rename from __test__/mount/simple.test.js
rename to __tests__/mount/simple.test.js
diff --git a/__test__/observations.json b/__tests__/observations.json
similarity index 100%
rename from __test__/observations.json
rename to __tests__/observations.json
diff --git a/__test__/reactSlickUtils.js b/__tests__/reactSlickUtils.js
similarity index 100%
rename from __test__/reactSlickUtils.js
rename to __tests__/reactSlickUtils.js
diff --git a/__tests__/regression/fix-1813.js b/__tests__/regression/fix-1813.js
new file mode 100644
index 000000000..4dafd8602
--- /dev/null
+++ b/__tests__/regression/fix-1813.js
@@ -0,0 +1,196 @@
+//Test fix of #1813: In infinite mode, when slidesToShow equal to the length of slides, infinite functionality is not working.
+
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import Slider from "../../src/index";
+
+import {
+ activeSlide,
+ activeSlides,
+ clickNext,
+ clickPrevious,
+ getActiveButton,
+ getActiveSlidesCount,
+ getActiveSlidesText,
+ getButtons,
+ getButtonsLength,
+ getButtonsListItem,
+ getClonesCount,
+ getCurrentSlide,
+ getSlidesCount,
+ hasClass
+} from "../../test-utils";
+
+function MultipleItems() {
+ const settings = {
+ dots: true,
+ infinite: true,
+ speed: 500,
+ slidesToShow: 9,
+ slidesToScroll: 3
+ };
+ return (
+
Date: Thu, 25 Jan 2024 10:06:15 +0530
Subject: [PATCH 33/58] release 0.30.0
---
package.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/package.json b/package.json
index 8395727b9..9518a536e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "react-slick",
- "version": "0.29.0",
+ "version": "0.30.0",
"description": " React port of slick carousel",
"main": "./lib",
"files": [
From 891f399cbb6c86e26ca850f608313390da8cf0b6 Mon Sep 17 00:00:00 2001
From: akiran
Date: Thu, 25 Jan 2024 10:14:01 +0530
Subject: [PATCH 34/58] added node options to fix build issue
---
package.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/package.json b/package.json
index 9518a536e..c7537de36 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
"demo": "SINGLE_DEMO=true DEV_PORT=8000 NODE_OPTIONS=--openssl-legacy-provider gulp server",
"build-dev": "gulp clean && gulp copy && webpack",
"lib": "babel ./src --out-dir ./lib",
- "build": "npm run lib && gulp dist",
+ "build": "NODE_OPTIONS=--openssl-legacy-provider npm run lib && NODE_OPTIONS=--openssl-legacy-provider gulp dist",
"prepublishOnly": "npm run build",
"lint": "eslint src",
"gen": "node examples/scripts/generateExampleConfigs.js && node examples/scripts/generateExamples.js && xdg-open docs/jquery.html",
From 358d8c04740d20891e1b0bdae6a47d5022af4dc6 Mon Sep 17 00:00:00 2001
From: akiran
Date: Thu, 25 Jan 2024 14:55:36 +0530
Subject: [PATCH 35/58] created a generic slider component for tests
---
__tests__/TestComponents.js | 13 +++++++
.../{fix-1813.js => fix-1813.test.js} | 36 ++-----------------
2 files changed, 15 insertions(+), 34 deletions(-)
create mode 100644 __tests__/TestComponents.js
rename __tests__/regression/{fix-1813.js => fix-1813.test.js} (87%)
diff --git a/__tests__/TestComponents.js b/__tests__/TestComponents.js
new file mode 100644
index 000000000..ebd75589e
--- /dev/null
+++ b/__tests__/TestComponents.js
@@ -0,0 +1,13 @@
+import React from "react";
+import Slider from "../src/index";
+
+export function GenericSliderComponent({ slidesCount, settings }) {
+ const slides = [...Array(slidesCount).keys()].map(item => (
+ {slides} ;
+}
+
+test("fake test", () => {
+ expect(1).toBe(1);
+});
diff --git a/__tests__/regression/fix-1813.js b/__tests__/regression/fix-1813.test.js
similarity index 87%
rename from __tests__/regression/fix-1813.js
rename to __tests__/regression/fix-1813.test.js
index 4dafd8602..0618f8527 100644
--- a/__tests__/regression/fix-1813.js
+++ b/__tests__/regression/fix-1813.test.js
@@ -20,6 +20,7 @@ import {
getSlidesCount,
hasClass
} from "../../test-utils";
+import { GenericSliderComponent } from "../TestComponents";
function MultipleItems() {
const settings = {
@@ -29,40 +30,7 @@ function MultipleItems() {
slidesToShow: 9,
slidesToScroll: 3
};
- return (
-
Date: Thu, 25 Jan 2024 17:59:38 +0530
Subject: [PATCH 36/58] fixed #1874: slick-current is always on first slide
despite initialSlide != 0
---
__tests__/regression/fix-1813.test.js | 7 +------
__tests__/regression/fix-1874.test.js | 25 +++++++++++++++++++++++++
src/inner-slider.js | 1 +
test-utils.js | 5 +++++
4 files changed, 32 insertions(+), 6 deletions(-)
create mode 100644 __tests__/regression/fix-1874.test.js
diff --git a/__tests__/regression/fix-1813.test.js b/__tests__/regression/fix-1813.test.js
index 0618f8527..5b4722259 100644
--- a/__tests__/regression/fix-1813.test.js
+++ b/__tests__/regression/fix-1813.test.js
@@ -2,11 +2,8 @@
import React from "react";
import { render, fireEvent } from "@testing-library/react";
-import Slider from "../../src/index";
import {
- activeSlide,
- activeSlides,
clickNext,
clickPrevious,
getActiveButton,
@@ -14,11 +11,9 @@ import {
getActiveSlidesText,
getButtons,
getButtonsLength,
- getButtonsListItem,
getClonesCount,
getCurrentSlide,
- getSlidesCount,
- hasClass
+ getSlidesCount
} from "../../test-utils";
import { GenericSliderComponent } from "../TestComponents";
diff --git a/__tests__/regression/fix-1874.test.js b/__tests__/regression/fix-1874.test.js
new file mode 100644
index 000000000..67f9c1502
--- /dev/null
+++ b/__tests__/regression/fix-1874.test.js
@@ -0,0 +1,25 @@
+// Test fix of#1874: "slick-current" is always on first slide despite initialSlide != 0
+
+import React from "react";
+import { render } from "@testing-library/react";
+
+import { getCurrentSlideContent, clickNext } from "../../test-utils";
+import { GenericSliderComponent } from "../TestComponents";
+
+describe("currentSlide test with different initialSlide values", () => {
+ it("currentSlide is 0 when initialSlide is 0", function() {
+ const { container } = render(
Date: Thu, 25 Jan 2024 22:22:41 +0530
Subject: [PATCH 37/58] Fixed #2315
---
.prettierrc | 1 +
src/slider.js | 9 ++++++---
src/utils/innerSliderUtils.js | 25 ++++++++++++++++++++-----
3 files changed, 27 insertions(+), 8 deletions(-)
diff --git a/.prettierrc b/.prettierrc
index e69de29bb..cbc61f68e 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -0,0 +1 @@
+trailingComma: none
\ No newline at end of file
diff --git a/src/slider.js b/src/slider.js
index 82c91a912..36225013e 100644
--- a/src/slider.js
+++ b/src/slider.js
@@ -4,7 +4,7 @@ import React from "react";
import { InnerSlider } from "./inner-slider";
import json2mq from "json2mq";
import defaultProps from "./default-props";
-import { canUseDOM } from "./utils/innerSliderUtils";
+import { canUseDOM, filterSettings } from "./utils/innerSliderUtils";
const enquire = canUseDOM() && require("enquire.js");
export default class Slider extends React.Component {
@@ -198,14 +198,17 @@ export default class Slider extends React.Component {
if (settings === "unslick") {
const className = "regular slider " + (this.props.className || "");
return
{newChildren}
diff --git a/src/utils/innerSliderUtils.js b/src/utils/innerSliderUtils.js
index c06029d0a..98a37e917 100644
--- a/src/utils/innerSliderUtils.js
+++ b/src/utils/innerSliderUtils.js
@@ -1,4 +1,5 @@
import React from "react";
+import defaultProps from "../default-props";
export function clamp(number, lowerBound, upperBound) {
return Math.max(lowerBound, Math.min(number, upperBound));
@@ -6,10 +7,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 +387,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) {
@@ -849,3 +853,14 @@ export const canUseDOM = () =>
window.document &&
window.document.createElement
);
+
+export const validSettings = Object.keys(defaultProps);
+
+export function filterSettings(settings) {
+ return validSettings.reduce((acc, settingName) => {
+ if (settings.hasOwnProperty(settingName)) {
+ acc[settingName] = settings[settingName];
+ }
+ return acc;
+ }, {});
+}
From 27870b7d007bf6db869f14a51a0c07c254bb49b7 Mon Sep 17 00:00:00 2001
From: akiran
Date: Fri, 26 Jan 2024 18:38:53 +0530
Subject: [PATCH 38/58] Test for #2315
---
__tests__/regression/fix-2315.test.js | 35 +++++++++++++++++++++++++++
package.json | 3 ++-
2 files changed, 37 insertions(+), 1 deletion(-)
create mode 100644 __tests__/regression/fix-2315.test.js
diff --git a/__tests__/regression/fix-2315.test.js b/__tests__/regression/fix-2315.test.js
new file mode 100644
index 000000000..193cf464f
--- /dev/null
+++ b/__tests__/regression/fix-2315.test.js
@@ -0,0 +1,35 @@
+// Test fix of #2315: Slider crashing after a state change in parent component
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+
+import { getCurrentSlideContent, getSlidesCount } from "../../test-utils";
+import { GenericSliderComponent } from "../TestComponents";
+
+function TestSlider() {
+ const [count, setCount] = React.useState();
+
+ return (
+
Date: Fri, 26 Jan 2024 19:34:45 +0530
Subject: [PATCH 39/58] check of NaN in props change detection
---
src/inner-slider.js | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/src/inner-slider.js b/src/inner-slider.js
index aba39da9d..e6efb784b 100644
--- a/src/inner-slider.js
+++ b/src/inner-slider.js
@@ -134,7 +134,8 @@ export class InnerSlider extends React.Component {
}
if (
typeof prevProps[key] === "object" ||
- typeof prevProps[key] === "function"
+ typeof prevProps[key] === "function" ||
+ isNaN(prevProps[key])
) {
continue;
}
From 02629d5dbbc7c71ec8ec6a0e485137a63a652f7e Mon Sep 17 00:00:00 2001
From: akiran
Date: Fri, 26 Jan 2024 19:44:52 +0530
Subject: [PATCH 40/58] added tests for filterSettings util
---
__tests__/utils/filterSettings.test.js | 18 ++++++++++++++++++
1 file changed, 18 insertions(+)
create mode 100644 __tests__/utils/filterSettings.test.js
diff --git a/__tests__/utils/filterSettings.test.js b/__tests__/utils/filterSettings.test.js
new file mode 100644
index 000000000..fa431b195
--- /dev/null
+++ b/__tests__/utils/filterSettings.test.js
@@ -0,0 +1,18 @@
+import { filterSettings } from "../../src/utils/innerSliderUtils";
+
+describe("filterSettings", () => {
+ it("returns empty object if there are no valid settings", () => {
+ expect(filterSettings({})).toEqual({});
+ expect(filterSettings({ age: 10 })).toEqual({});
+ });
+ it("return an object with valid settings and omits extra properties", () => {
+ expect(filterSettings({ arrows: true, dots: true })).toEqual({
+ arrows: true,
+ dots: true
+ });
+ expect(filterSettings({ arrows: true, dots: true, age: 10 })).toEqual({
+ arrows: true,
+ dots: true
+ });
+ });
+});
From 250f078424f70f648a1f299b13de0689efe7f6f1 Mon Sep 17 00:00:00 2001
From: akiran
Date: Fri, 26 Jan 2024 21:42:37 +0530
Subject: [PATCH 41/58] release 0.30.1
---
package.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/package.json b/package.json
index 1f8760f50..cf3fa0548 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "react-slick",
- "version": "0.30.0",
+ "version": "0.30.1",
"description": " React port of slick carousel",
"main": "./lib",
"files": [
From 0a66bd73f0a6fa0f763a7d8be4ecdedb94a22847 Mon Sep 17 00:00:00 2001
From: akiran
Date: Fri, 26 Jan 2024 22:09:25 +0530
Subject: [PATCH 42/58] updated instructions for css loading
---
README.md | 9 ++++++++-
1 file changed, 8 insertions(+), 1 deletion(-)
diff --git a/README.md b/README.md
index c5e654e5b..d56d2ee72 100644
--- a/README.md
+++ b/README.md
@@ -28,6 +28,7 @@ npm install slick-carousel
// Import css files
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
+// Copy `slick-carousel/slick/fonts` into your static assets folder and make sure the fonts are loadable by css request
```
or add cdn link in your html
@@ -46,6 +47,13 @@ or add cdn link in your html
/>
```
+or copy `slick-carousel/slick` folder into your static assets folder and link to css
+
+```html
+
+
+```
+
### [PlayGround](https://codesandbox.io/s/ppwkk5l6xx)
### Example
@@ -111,7 +119,6 @@ open http://localhost:8080
Join our [discord channel](https://discord.gg/z7stRE4Cyb) to discuss react-slick bugs and ask for help
-
## Contributing
Please see the [contributing guidelines](./CONTRIBUTING.md)
From 1bd9c093fec4fbd133ecaeef0e476cc715910682 Mon Sep 17 00:00:00 2001
From: akiran
Date: Fri, 26 Jan 2024 22:31:07 +0530
Subject: [PATCH 43/58] updated readme
---
README.md | 1 -
1 file changed, 1 deletion(-)
diff --git a/README.md b/README.md
index d56d2ee72..4f5168d48 100644
--- a/README.md
+++ b/README.md
@@ -28,7 +28,6 @@ npm install slick-carousel
// Import css files
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
-// Copy `slick-carousel/slick/fonts` into your static assets folder and make sure the fonts are loadable by css request
```
or add cdn link in your html
From 7710dc9e44c76068b7c1a64b8e74c59cc758c085 Mon Sep 17 00:00:00 2001
From: Jorrit Schippers
Date: Fri, 2 Feb 2024 10:22:05 +0100
Subject: [PATCH 44/58] Move testing dependency to devDependencies
---
package.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/package.json b/package.json
index cf3fa0548..a17f26a3f 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
"@babel/preset-react": "^7.0.0",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.3.0",
+ "@testing-library/user-event": "^14.3.0",
"autoprefixer": "^7.1.2",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^24.8.0",
@@ -82,7 +83,6 @@
"why-did-you-update": "^0.1.1"
},
"dependencies": {
- "@testing-library/user-event": "^14.3.0",
"classnames": "^2.2.5",
"enquire.js": "^2.1.6",
"json2mq": "^0.2.0",
From 013f424e0adcef81da05af055edd6d34d3b45a23 Mon Sep 17 00:00:00 2001
From: akiran
Date: Sat, 3 Feb 2024 09:36:57 +0530
Subject: [PATCH 45/58] moved scripts from examples to docs
---
{examples => docs}/scripts/generateExampleConfigs.js | 0
{examples => docs}/scripts/generateExamples.js | 0
package.json | 2 +-
3 files changed, 1 insertion(+), 1 deletion(-)
rename {examples => docs}/scripts/generateExampleConfigs.js (100%)
rename {examples => docs}/scripts/generateExamples.js (100%)
diff --git a/examples/scripts/generateExampleConfigs.js b/docs/scripts/generateExampleConfigs.js
similarity index 100%
rename from examples/scripts/generateExampleConfigs.js
rename to docs/scripts/generateExampleConfigs.js
diff --git a/examples/scripts/generateExamples.js b/docs/scripts/generateExamples.js
similarity index 100%
rename from examples/scripts/generateExamples.js
rename to docs/scripts/generateExamples.js
diff --git a/package.json b/package.json
index a17f26a3f..6ab3c5320 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
"build": "NODE_OPTIONS=--openssl-legacy-provider npm run lib && NODE_OPTIONS=--openssl-legacy-provider gulp dist",
"prepublishOnly": "npm run build",
"lint": "eslint src",
- "gen": "node examples/scripts/generateExampleConfigs.js && node examples/scripts/generateExamples.js && xdg-open docs/jquery.html",
+ "gen": "node docs/scripts/generateExampleConfigs.js && node docs/scripts/generateExamples.js && xdg-open docs/jquery.html",
"precommit": "lint-staged",
"test": "jest",
"test-watch": "jest --watch",
From 5a99cd1a7464f221d8119c9438729c514ed42f25 Mon Sep 17 00:00:00 2001
From: akiran
Date: Sat, 3 Feb 2024 09:42:18 +0530
Subject: [PATCH 46/58] examples config to docs
---
{examples => docs}/config.js | 0
1 file changed, 0 insertions(+), 0 deletions(-)
rename {examples => docs}/config.js (100%)
diff --git a/examples/config.js b/docs/config.js
similarity index 100%
rename from examples/config.js
rename to docs/config.js
From c0fde5ee0db0d65f1e1cfe6b09ee2eb94a73e3e0 Mon Sep 17 00:00:00 2001
From: akiran
Date: Sat, 3 Feb 2024 13:37:05 +0530
Subject: [PATCH 47/58] cleanup examples
---
examples/AdaptiveHeight.js | 1 -
examples/AppendDots.js | 1 -
examples/AsNavFor.js | 2 +-
examples/AutoPlay.js | 1 -
examples/AutoPlayMethods.js | 2 +-
examples/CenterMode.js | 1 -
examples/CustomArrows.js | 2 --
examples/CustomPaging.js | 1 -
examples/CustomSlides.js | 3 +--
examples/DynamicSlides.js | 13 ++-----------
examples/Fade.js | 1 -
examples/FocusOnSelect.js | 1 -
examples/LazyLoad.js | 1 -
examples/MultipleItems.js | 1 -
examples/MultipleRows.js | 1 -
examples/PauseOnHover.js | 1 -
examples/PreviousNextMethods.js | 6 ++----
examples/Responsive.js | 1 -
examples/SimpleSlider.js | 6 ++----
examples/SlickGoTo.js | 6 ++----
examples/SwipeToSlide.js | 1 -
examples/UnevenSetsFinite.js | 1 -
examples/UnevenSetsInfinite.js | 1 -
examples/VariableWidth.js | 1 -
examples/VerticalMode.js | 1 -
examples/VerticalSwipeToSlide.js | 1 -
{docs => examples}/config.js | 0
27 files changed, 11 insertions(+), 47 deletions(-)
rename {docs => examples}/config.js (100%)
diff --git a/examples/AdaptiveHeight.js b/examples/AdaptiveHeight.js
index 5b0faa85b..e0e920aab 100644
--- a/examples/AdaptiveHeight.js
+++ b/examples/AdaptiveHeight.js
@@ -13,7 +13,6 @@ function AdaptiveHeight() {
return (
{children}
;
- } else if (newChildren.length <= settings.slidesToShow) {
+ } else if (newChildren.length <= settings.slidesToShow && !settings.infinite) {
settings.unslick = true;
}
return (
diff --git a/src/track.js b/src/track.js
index f8924c826..2378d048d 100644
--- a/src/track.js
+++ b/src/track.js
@@ -138,8 +138,7 @@ const renderSlides = spec => {
if (spec.infinite && spec.fade === false) {
let preCloneNo = childrenCount - index;
if (
- preCloneNo <= getPreClones(spec) &&
- childrenCount !== spec.slidesToShow
+ preCloneNo <= getPreClones(spec)
) {
key = -preCloneNo;
if (key >= startIndex) {
@@ -164,7 +163,6 @@ const renderSlides = spec => {
);
}
- if (childrenCount !== spec.slidesToShow) {
key = childrenCount + index;
if (key < endIndex) {
child = elem;
@@ -186,7 +184,6 @@ const renderSlides = spec => {
}
})
);
- }
}
});
From 5b2e405eb5b1efe47afadcf9fa891f8303f7ad4b Mon Sep 17 00:00:00 2001
From: akiran
+
+
+
+ );
+}
+
+describe("Multiple Items with slidesToShow = slides count in infinite mode", function() {
+ it("should have 9 actual slides and (9(pre) + 9(post)) clone slides", function() {
+ //Todo: Need to fix extra clones
+ const { container } = render(Multiple items
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
+
+ 7
+
+
+ 8
+
+
+ 9
+
-
);
}
From ff0cd50c596348bb1b424470b1b80ffd6b641562 Mon Sep 17 00:00:00 2001
From: akiran {item + 1}
+ ));
+ return
-
-
-
- );
+ return Multiple items
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-{children}
;
- } else if (newChildren.length <= settings.slidesToShow && !settings.infinite) {
+ } else if (
+ newChildren.length <= settings.slidesToShow &&
+ !settings.infinite
+ ) {
settings.unslick = true;
}
return (
+
+
+ );
+}
+
+describe("State change in parent component of slider", () => {
+ it("Slider shoud work afer clicking on Increment button", function() {
+ const { container } = render(
-
Adaptive height
1
diff --git a/examples/AppendDots.js b/examples/AppendDots.js index ab467e6bf..192f9613d 100644 --- a/examples/AppendDots.js +++ b/examples/AppendDots.js @@ -33,7 +33,6 @@ function AppendDots() { }; return (
-
Append Dots
1
diff --git a/examples/AsNavFor.js b/examples/AsNavFor.js index 739b89ae8..0676e39d5 100644 --- a/examples/AsNavFor.js +++ b/examples/AsNavFor.js @@ -1,7 +1,7 @@ import React, { useState, useEffect, useRef } from "react"; import Slider from "react-slick"; -function AsNavFor(props) { +function AsNavFor() { const [nav1, setNav1] = useState(null); const [nav2, setNav2] = useState(null); let sliderRef1 = useRef(null); diff --git a/examples/AutoPlay.js b/examples/AutoPlay.js index 2cb6eb5d5..b2f1601f7 100644 --- a/examples/AutoPlay.js +++ b/examples/AutoPlay.js @@ -14,7 +14,6 @@ function AutoPlay() { }; return (
-
Auto Play
1
diff --git a/examples/AutoPlayMethods.js b/examples/AutoPlayMethods.js index ab902f8c0..ddfd9d08f 100644 --- a/examples/AutoPlayMethods.js +++ b/examples/AutoPlayMethods.js @@ -1,7 +1,7 @@ import React, { useRef } from "react"; import Slider from "react-slick"; -function AutoPlayMethods(props) { +function AutoPlayMethods() { let sliderRef = useRef(null); const play = () => { sliderRef.slickPlay(); diff --git a/examples/CenterMode.js b/examples/CenterMode.js index de1fd16e9..5ec5e5aee 100644 --- a/examples/CenterMode.js +++ b/examples/CenterMode.js @@ -12,7 +12,6 @@ function CenterMode() { }; return (
-
Center Mode
1
diff --git a/examples/CustomArrows.js b/examples/CustomArrows.js index f3e0b02d4..343b8f2db 100644 --- a/examples/CustomArrows.js +++ b/examples/CustomArrows.js @@ -2,7 +2,6 @@ import React, { Component } from "react"; import Slider from "react-slick"; function SampleNextArrow(props) { - console.log(props); const { className, style, onClick } = props; return (
-
Custom Arrows
1
diff --git a/examples/CustomPaging.js b/examples/CustomPaging.js index f594d0732..038428fe6 100644 --- a/examples/CustomPaging.js +++ b/examples/CustomPaging.js @@ -20,7 +20,6 @@ function CustomPaging() { }; return (
-
diff --git a/examples/CustomSlides.js b/examples/CustomSlides.js
index 87e09d966..ada9f1048 100644
--- a/examples/CustomSlides.js
+++ b/examples/CustomSlides.js
@@ -10,7 +10,7 @@ function CustomSlide(props) {
);
}
-function SimpleSlider() {
+function CustomSlides() {
const settings = {
dots: true,
infinite: true,
@@ -20,7 +20,6 @@ function SimpleSlider() {
};
return (
Custom Paging
-
Custom Slides
-
Dynamic slides
diff --git a/examples/Fade.js b/examples/Fade.js index 9835e5b2a..185ef54f2 100644 --- a/examples/Fade.js +++ b/examples/Fade.js @@ -14,7 +14,6 @@ function Fade() { }; return (
-
diff --git a/examples/FocusOnSelect.js b/examples/FocusOnSelect.js
index b9a3cd506..da8236c16 100644
--- a/examples/FocusOnSelect.js
+++ b/examples/FocusOnSelect.js
@@ -11,7 +11,6 @@ function FocusOnSelect() {
};
return (
Fade
-
FocusOnSelect
Click on any slide to select and make it current slide
diff --git a/examples/LazyLoad.js b/examples/LazyLoad.js
index a2f0e3f84..51dde030d 100644
--- a/examples/LazyLoad.js
+++ b/examples/LazyLoad.js
@@ -14,7 +14,6 @@ function LazyLoad() {
};
return (
-
diff --git a/examples/MultipleItems.js b/examples/MultipleItems.js
index 2a88a6991..f68457ca5 100644
--- a/examples/MultipleItems.js
+++ b/examples/MultipleItems.js
@@ -11,7 +11,6 @@ function MultipleItems() {
};
return (
Lazy Load
-
Multiple items
1
diff --git a/examples/MultipleRows.js b/examples/MultipleRows.js index 4145db102..c61561136 100644 --- a/examples/MultipleRows.js +++ b/examples/MultipleRows.js @@ -14,7 +14,6 @@ function MultipleRows() { }; return (
-
Multiple Rows
1
diff --git a/examples/PauseOnHover.js b/examples/PauseOnHover.js index cc633d6ce..b95e848a8 100644 --- a/examples/PauseOnHover.js +++ b/examples/PauseOnHover.js @@ -13,7 +13,6 @@ function PauseOnHover() { }; return (
-
Pause On Hover
1
diff --git a/examples/PreviousNextMethods.js b/examples/PreviousNextMethods.js index 263749cdd..661135602 100644 --- a/examples/PreviousNextMethods.js +++ b/examples/PreviousNextMethods.js @@ -1,7 +1,7 @@ import React, { useRef } from "react"; import Slider from "react-slick"; -function PreviousNextMethods(props) { +function PreviousNextMethods() { let sliderRef = useRef(null); const next = () => { sliderRef.slickNext(); @@ -14,12 +14,10 @@ function PreviousNextMethods(props) { infinite: true, speed: 500, slidesToShow: 1, - slidesToScroll: 1, - ...props + slidesToScroll: 1 }; return (
- {
sliderRef = slider;
diff --git a/examples/Responsive.js b/examples/Responsive.js
index 0f06a9d22..7ace6acee 100644
--- a/examples/Responsive.js
+++ b/examples/Responsive.js
@@ -38,7 +38,6 @@ function Responsive() {
};
return (
Previous and Next methods
-
Responsive
1
diff --git a/examples/SimpleSlider.js b/examples/SimpleSlider.js index 9b982d42b..80c20e8bc 100644 --- a/examples/SimpleSlider.js +++ b/examples/SimpleSlider.js @@ -1,18 +1,16 @@ import React from "react"; import Slider from "react-slick"; -function SimpleSlider(props) { +function SimpleSlider() { const settings = { dots: true, infinite: true, speed: 500, slidesToShow: 1, - slidesToScroll: 1, - ...props + slidesToScroll: 1 }; return (
-
Single Item
1
diff --git a/examples/SlickGoTo.js b/examples/SlickGoTo.js index 73944963f..8d01ac86b 100644 --- a/examples/SlickGoTo.js +++ b/examples/SlickGoTo.js @@ -2,7 +2,7 @@ import React, { useState, useRef } from "react"; import Slider from "react-slick"; import { baseUrl } from "./config"; -function SlickGoTo(props) { +function SlickGoTo() { const [slideIndex, setSlideIndex] = useState(0); const [updateCount, setUpdateCount] = useState(0); let sliderRef = useRef(null); @@ -13,12 +13,10 @@ function SlickGoTo(props) { slidesToShow: 1, slidesToScroll: 1, afterChange: () => setUpdateCount(updateCount + 1), - beforeChange: (current, next) => setSlideIndex(next), - ...props + beforeChange: (current, next) => setSlideIndex(next) }; return (
-
Slick Go To
Total updates: {updateCount}
sliderRef.slickGoTo(e.target.value)} diff --git a/examples/SwipeToSlide.js b/examples/SwipeToSlide.js index 345ee926e..61ab07b90 100644 --- a/examples/SwipeToSlide.js +++ b/examples/SwipeToSlide.js @@ -16,7 +16,6 @@ function SwipeToSlide() { }; return (
-
Swipe To Slide
1
diff --git a/examples/UnevenSetsFinite.js b/examples/UnevenSetsFinite.js index 9a59abc20..ad43d2e92 100644 --- a/examples/UnevenSetsFinite.js +++ b/examples/UnevenSetsFinite.js @@ -11,7 +11,6 @@ function UnevenSetsFinite() { }; return (
-
Uneven sets (finite)
1
diff --git a/examples/UnevenSetsInfinite.js b/examples/UnevenSetsInfinite.js index ae48ec86c..91cb5a295 100644 --- a/examples/UnevenSetsInfinite.js +++ b/examples/UnevenSetsInfinite.js @@ -11,7 +11,6 @@ function UnevenSetsInfinite() { }; return (
-
Uneven sets (infinite)
1
diff --git a/examples/VariableWidth.js b/examples/VariableWidth.js index 81a040a1c..b15728ff0 100644 --- a/examples/VariableWidth.js +++ b/examples/VariableWidth.js @@ -13,7 +13,6 @@ function VariableWidth() { }; return (
-
Variable width
100
diff --git a/examples/VerticalMode.js b/examples/VerticalMode.js index 82d756c84..894f53b73 100644 --- a/examples/VerticalMode.js +++ b/examples/VerticalMode.js @@ -18,7 +18,6 @@ function VerticalMode() { }; return (
-
Vertical Mode
1
diff --git a/examples/VerticalSwipeToSlide.js b/examples/VerticalSwipeToSlide.js index 96c21efeb..9f7977307 100644 --- a/examples/VerticalSwipeToSlide.js +++ b/examples/VerticalSwipeToSlide.js @@ -19,7 +19,6 @@ function VerticalSwipeToSlide() { }; return (
-
Date: Mon, 5 Feb 2024 20:13:19 +0530
Subject: [PATCH 48/58] Added slider-container class to examples
---
examples/AdaptiveHeight.js | 2 +-
examples/AppendDots.js | 2 +-
examples/AsNavFor.js | 2 +-
examples/AutoPlay.js | 2 +-
examples/AutoPlayMethods.js | 2 +-
examples/CenterMode.js | 2 +-
examples/CustomArrows.js | 2 +-
examples/CustomPaging.js | 2 +-
examples/CustomSlides.js | 4 ++--
examples/DynamicSlides.js | 2 +-
examples/Fade.js | 2 +-
examples/FocusOnSelect.js | 2 +-
examples/LazyLoad.js | 2 +-
examples/MultipleItems.js | 2 +-
examples/MultipleRows.js | 2 +-
examples/PauseOnHover.js | 2 +-
examples/PreviousNextMethods.js | 2 +-
examples/Resizable.js | 2 +-
examples/Responsive.js | 2 +-
examples/Rtl.js | 2 +-
examples/SimpleSlider.js | 2 +-
examples/SlickGoTo.js | 2 +-
examples/SlideChangeHooks.js | 2 +-
examples/SwipeToSlide.js | 2 +-
examples/UnevenSetsFinite.js | 2 +-
examples/UnevenSetsInfinite.js | 2 +-
examples/VariableWidth.js | 2 +-
examples/VerticalMode.js | 2 +-
examples/VerticalSwipeToSlide.js | 2 +-
examples/config.js | 10 ++++++----
30 files changed, 36 insertions(+), 34 deletions(-)
diff --git a/examples/AdaptiveHeight.js b/examples/AdaptiveHeight.js
index e0e920aab..665c6c12c 100644
--- a/examples/AdaptiveHeight.js
+++ b/examples/AdaptiveHeight.js
@@ -12,7 +12,7 @@ function AdaptiveHeight() {
};
return (
-
Vertical Mode with Swipe To Slide
1
diff --git a/docs/config.js b/examples/config.js similarity index 100% rename from docs/config.js rename to examples/config.js From e06967c8b11851a4970915c64df6f78964ed94ab Mon Sep 17 00:00:00 2001 From: akiran
+
1
diff --git a/examples/AppendDots.js b/examples/AppendDots.js index 192f9613d..91f285b52 100644 --- a/examples/AppendDots.js +++ b/examples/AppendDots.js @@ -32,7 +32,7 @@ function AppendDots() { ) }; return ( -
+
1
diff --git a/examples/AsNavFor.js b/examples/AsNavFor.js index 0676e39d5..18cf09847 100644 --- a/examples/AsNavFor.js +++ b/examples/AsNavFor.js @@ -12,7 +12,7 @@ function AsNavFor() { setNav2(sliderRef2); }, []); return ( -
+
(sliderRef1 = slider)}>
diff --git a/examples/AutoPlay.js b/examples/AutoPlay.js
index b2f1601f7..32520d0cc 100644
--- a/examples/AutoPlay.js
+++ b/examples/AutoPlay.js
@@ -13,7 +13,7 @@ function AutoPlay() {
cssEase: "linear"
};
return (
-
Slider Syncing (AsNavFor)
First Slider
+
1
diff --git a/examples/AutoPlayMethods.js b/examples/AutoPlayMethods.js index ddfd9d08f..573c8d5a9 100644 --- a/examples/AutoPlayMethods.js +++ b/examples/AutoPlayMethods.js @@ -19,7 +19,7 @@ function AutoPlayMethods() { autoplaySpeed: 2000 }; return ( -
+
(sliderRef = slider)} {...settings}>
Auto Play {"&"} Pause with buttons
diff --git a/examples/CenterMode.js b/examples/CenterMode.js
index 5ec5e5aee..291abafc9 100644
--- a/examples/CenterMode.js
+++ b/examples/CenterMode.js
@@ -11,7 +11,7 @@ function CenterMode() {
speed: 500
};
return (
-
+
1
diff --git a/examples/CustomArrows.js b/examples/CustomArrows.js index 343b8f2db..d32dfec60 100644 --- a/examples/CustomArrows.js +++ b/examples/CustomArrows.js @@ -33,7 +33,7 @@ function CustomArrows() { prevArrow:
+
1
diff --git a/examples/CustomPaging.js b/examples/CustomPaging.js index 038428fe6..01a5d2b4a 100644 --- a/examples/CustomPaging.js +++ b/examples/CustomPaging.js @@ -19,7 +19,7 @@ function CustomPaging() { slidesToScroll: 1 }; return ( -
+
diff --git a/examples/CustomSlides.js b/examples/CustomSlides.js
index ada9f1048..01d67c883 100644
--- a/examples/CustomSlides.js
+++ b/examples/CustomSlides.js
@@ -19,7 +19,7 @@ function CustomSlides() {
slidesToScroll: 1
};
return (
-
+
+
diff --git a/examples/Fade.js b/examples/Fade.js
index 185ef54f2..a932c0766 100644
--- a/examples/Fade.js
+++ b/examples/Fade.js
@@ -13,7 +13,7 @@ function Fade() {
waitForAnimate: false
};
return (
-
+
diff --git a/examples/FocusOnSelect.js b/examples/FocusOnSelect.js
index da8236c16..d75964608 100644
--- a/examples/FocusOnSelect.js
+++ b/examples/FocusOnSelect.js
@@ -10,7 +10,7 @@ function FocusOnSelect() {
speed: 500
};
return (
-
+
Click on any slide to select and make it current slide
diff --git a/examples/LazyLoad.js b/examples/LazyLoad.js
index 51dde030d..19c62ce9b 100644
--- a/examples/LazyLoad.js
+++ b/examples/LazyLoad.js
@@ -13,7 +13,7 @@ function LazyLoad() {
initialSlide: 2
};
return (
-
+
diff --git a/examples/MultipleItems.js b/examples/MultipleItems.js
index f68457ca5..138c48b3f 100644
--- a/examples/MultipleItems.js
+++ b/examples/MultipleItems.js
@@ -10,7 +10,7 @@ function MultipleItems() {
slidesToScroll: 3
};
return (
-
+
1
diff --git a/examples/MultipleRows.js b/examples/MultipleRows.js index c61561136..833ccd5e7 100644 --- a/examples/MultipleRows.js +++ b/examples/MultipleRows.js @@ -13,7 +13,7 @@ function MultipleRows() { slidesPerRow: 2 }; return ( -
+
1
diff --git a/examples/PauseOnHover.js b/examples/PauseOnHover.js index b95e848a8..11ca6d656 100644 --- a/examples/PauseOnHover.js +++ b/examples/PauseOnHover.js @@ -12,7 +12,7 @@ function PauseOnHover() { pauseOnHover: true }; return ( -
+
1
diff --git a/examples/PreviousNextMethods.js b/examples/PreviousNextMethods.js index 661135602..e0ab6093f 100644 --- a/examples/PreviousNextMethods.js +++ b/examples/PreviousNextMethods.js @@ -17,7 +17,7 @@ function PreviousNextMethods() { slidesToScroll: 1 }; return ( -
+
{
sliderRef = slider;
diff --git a/examples/Resizable.js b/examples/Resizable.js
index 1c3553912..24029b21d 100644
--- a/examples/Resizable.js
+++ b/examples/Resizable.js
@@ -13,7 +13,7 @@ function Resizable() {
slidesToScroll: 1
};
return (
-
+