Repository: akiran/react-slick Branch: master Commit: 97442318e9a4 Files: 101 Total size: 190.1 KB Directory structure: gitextract_zvxyx7ut/ ├── .babelrc ├── .eslintrc ├── .github/ │ ├── FUNDING.yml │ └── ISSUE_TEMPLATE.md ├── .gitignore ├── .npmignore ├── .prettierrc ├── .travis.yml ├── CHANGELOG.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── __tests__/ │ ├── SimpleSlider.test.js │ ├── TestComponents.js │ ├── afterChange.test.js │ ├── arrows.js │ ├── beforeChange.test.js │ ├── lazyLoad.test.js │ ├── observations.json │ ├── regression/ │ │ ├── fix-1813.test.js │ │ ├── fix-1874.test.js │ │ ├── fix-2315.test.js │ │ └── fix-2414.test.js │ ├── sliderStyles.test.js │ ├── testUtils.js │ └── utils/ │ └── filterSettings.test.js ├── docs/ │ ├── api.md │ ├── common.md │ ├── demos.js │ ├── docs.css │ ├── docs.js │ ├── index.html │ ├── index.js │ ├── routes.js │ ├── scripts/ │ │ ├── generateExampleConfigs.js │ │ └── generateExamples.js │ ├── single-demo.js │ ├── slick-theme.css │ └── slick.css ├── examples/ │ ├── AdaptiveHeight.js │ ├── AppendDots.js │ ├── AsNavFor.js │ ├── AutoPlay.js │ ├── AutoPlayMethods.js │ ├── CenterMode.js │ ├── CustomArrows.js │ ├── CustomPaging.js │ ├── CustomSlides.js │ ├── DynamicSlides.js │ ├── Fade.js │ ├── FocusOnSelect.js │ ├── LazyLoad.js │ ├── MultipleItems.js │ ├── MultipleRows.js │ ├── PauseOnHover.js │ ├── PreviousNextMethods.js │ ├── Resizable.js │ ├── Responsive.js │ ├── Rtl.js │ ├── SimpleSlider.js │ ├── SlickGoTo.js │ ├── SlideChangeHooks.js │ ├── SwipeToSlide.js │ ├── UnevenSetsFinite.js │ ├── UnevenSetsInfinite.js │ ├── VariableWidth.js │ ├── VerticalMode.js │ ├── VerticalSwipeToSlide.js │ ├── __tests__/ │ │ ├── CentreMode.test.js │ │ ├── Fade.js │ │ ├── FocusOnSelect.test.js │ │ ├── MultipleItems.test.js │ │ ├── SimpleSlider.test.js │ │ ├── SlickGoTo.test.js │ │ └── UnevenSets.test.js │ └── config.js ├── gulpfile.js ├── jest.config.js ├── package.json ├── playwright/ │ ├── index.html │ └── index.jsx ├── playwright-ct.config.js ├── playwright-tests/ │ ├── features/ │ │ └── responsive/ │ │ ├── responsive.spec.tsx │ │ └── responsive.story.tsx │ ├── regression/ │ │ └── fix-1930/ │ │ ├── fix-1930.spec.tsx │ │ └── fix-1930.story.tsx │ └── sample/ │ ├── sample.spec.tsx │ └── sample.story.tsx ├── src/ │ ├── arrows.js │ ├── default-props.js │ ├── dots.js │ ├── index.js │ ├── initial-state.js │ ├── inner-slider.js │ ├── slider.js │ ├── track.js │ └── utils/ │ └── innerSliderUtils.js ├── test-setup.js ├── test-utils.js ├── webpack.config.dist.js └── webpack.config.js ================================================ FILE CONTENTS ================================================ ================================================ FILE: .babelrc ================================================ { "presets": [ "@babel/preset-env", "@babel/preset-react" ], "plugins": [ "@babel/plugin-proposal-class-properties" ] } ================================================ FILE: .eslintrc ================================================ { "rules": { "no-extra-parens": 0, "react/jsx-uses-vars": 1, "strict": 0, "no-underscore-dangle": 0, "space-infix-ops": 0, "no-alert": 0, "react/prop-types": 0, "react/no-find-dom-node": 0, "react/display-name": 0, "no-console": 0, "no-prototype-builtins": 0 }, "env": { "node": true, "browser": true, "es6": true, "jasmine": true }, "parser": "@babel/eslint-parser", "parserOptions": { "requireConfigFile": false }, "plugins": [ "react", "import" ], "extends": [ "eslint:recommended", "plugin:import/errors", "plugin:react/recommended" ] } ================================================ FILE: .github/FUNDING.yml ================================================ github: akiran open_collective: react-slick ================================================ FILE: .github/ISSUE_TEMPLATE.md ================================================ ### Guidelines for posting a new issue * Please replicate your issue with this [CodeSandBox](https://codesandbox.io/s/ppwkk5l6xx) and provide a link to it along with the issue description ================================================ FILE: .gitignore ================================================ node_modules bower_components .sass-cache build demos/* demos1 TODO.md npm-debug.log lib *.sublime-* .idea dist yarn.lock .vscode exampleslib examples/scripts/configs.json jquery.html docs/fonts/ docs/ajax-loader.gif package-lock.json .DS_Store /test-results/ /playwright-report/ /blob-report/ /playwright/.cache/ src-jsx ================================================ FILE: .npmignore ================================================ bower_components .sass-cache build demos demos1 TODO.md test testlib bower.json gulpfile.js karma.conf.js LICENSE webpack.config.dist.js webpack.config.js ISSUE_TEMPLATE.md ================================================ FILE: .prettierrc ================================================ trailingComma: none ================================================ FILE: .travis.yml ================================================ language: node_js node_js: - "stable" ================================================ FILE: CHANGELOG.md ================================================ # Change Log ## [Unreleased](https://github.com/akiran/react-slick/tree/HEAD) ## 0.22.0 **Release Changes** - Internal Changes - converted InnerSlider from createReactClass object to ES6 class - removed all the mixins, created classMethods and pure utility functions instead - changed autoplay from setTimeout to setInterval - added images onload handlers to update dynamically - added autoplaying state for the betterment of autoplay and pause - removed usage of assign or Object.assign, using object spreading instead - implemented effects of touchMove props - fixed transition in opposite direction in case of continuous scrolling - added separate onclick event listener for images - added missing classes `regular` and `slider` - renamed events - edgeEvent => onEdge - init => onInit - reInit => onReInit - implemented `pauseOnDotsHover` property - implemented Progressive LazyLoad property, lazyLoad is now ondemand/progressive - implemented lazyloadError event - implemented useTransform property - implemented pauseOnFocus property - added resize observer to update on slider resize - Bug Fixes - dynamic track updates on image load - fixed slickPause and autoPlay issues (paused slider would resume autoplay sometime) - fixed trackStyle update on window resize - fixed NodeList forEach problem for chrome 51 or below - fixed bugs due to uncleared callback timers - fixed update issues on just slider resize ## 0.21.0 **Release Changes** - Fixed issues - dataset undefined error in case of swipeToSlide but finite slides - slideWidth issue by transform scale - variableWidth + finite alignment problems - wrapper direction rtl issues - added onload update handler for images - fixed breaking of animation on setState - Mixins to Pure Functions - getWidth, getHeight - swipeDirection - initialize, update - Other Changes - removed sass, using pure CSS instead - enforced dir='ltr' in the slider, so dir='rtl' in wrapper doesn't break the slider - corrected up/down direction conventions - added more tests along with snapshots ## 0.20.0 **Release Changes** - handled responsive breakpoint collision - renamed autoPlayTimer to autoplayTimer and removed it from state - changed es5 module.exports with es6 export default in src/index - implemented slider syncing with asNavFor prop - made all the slides untabbable - implemented getSlick method as in slick - implemented slickGetOption method - implemented lazyLoaded event - implemented reInit event - implemented onSwipe event and documented edgeEvent ## 0.19.0 **Release Changes** Following are the changes to be mentioned: - fixed slideWidth calculation approximation - fixed unusual scrolls in focusOnSelect mode - added appendDots method for customization of dots - modified logic for handling odd/even cases where there were unusual scrolls in opposite direction - implemented unslick feature properly - fixed variableWidth issues like blank spaces at edges, improper alignment - handling focus loss in case of fade=true - responsive lazyloading bug fixed - increased verticalswiping resistance from 4 to 10 ## 0.18.0 **Major Changes:** - `centerPadding` prop now accepts % value as well - Fixed dots count in certain cases, where it was wrong - Fixed fade property mess-up on click - Fixed invisibility issue when fade & vertical are true - Modified logic for updating lazyLoadedList, earlier there were some whitespaces at ends, now they're gone - Fixed getTrackLeft issue for slideCount=1 ## 0.17.1 **Major Changes** * Enforced some settings in specific configurations like: - `slidesToScroll = 1` *when fade is true* - `slidesToScroll = 1` *when centerMode is true* - `slidesToShow = 1` *when fade is true* * Changed the number of clones (preclones and postclones), that fixed couple of issues like blank spaces after last slide and/or before first slide which occurred in several cases. **Minor Changes** - Rich amount of tests and test-utilities added - Additional documentation comments added - Refactored small snippets for betterment - Fixed several lazyload and centerMode bugs ================================================ FILE: CONTRIBUTING.md ================================================ # Contribute ## Introduction First, thank you for considering contributing to react-slick! It's people like you that make the open source community such a great community! 😊 We welcome any type of contribution, not only code. You can help with - **QA**: file bug reports, the more details you can give the better (e.g. screenshots with the console open) - **Marketing**: writing blog posts, howto's, printing stickers, ... - **Community**: presenting the project at meetups, organizing a dedicated meetup for the local community, ... - **Code**: take a look at the [open issues](https://github.com/akiran/react-slick/issues). Even if you can't write code, commenting on them, showing that you care about a given issue matters. It helps us triage them. To get started you can also [sign up to triage react-slick issues on CodeTriage](https://www.codetriage.com/akiran/react-slick). - **Money**: we welcome financial contributions in full transparency on our [open collective](https://opencollective.com/react-slick). ## Your First Contribution Working on your first Pull Request? You can learn how from this *free* series, [How to Contribute to an Open Source Project on GitHub](https://app.egghead.io/playlists/how-to-contribute-to-an-open-source-project-on-github). ## Submitting code Any code change should be submitted as a pull request. The description should explain what the code does and give steps to execute it. The pull request should also contain tests. ## Code review process The bigger the pull request, the longer it will take to review and merge. Try to break down large pull requests in smaller chunks that are easier to review and merge. It is also always helpful to have some context for your pull request. What was the purpose? Why does it matter to you? ## Financial contributions We also welcome financial contributions in full transparency on our [open collective](https://opencollective.com/react-slick). Anyone can file an expense. If the expense makes sense for the development of the community, it will be "merged" in the ledger of our open collective by the core contributors and the person who filed the expense will be reimbursed. ## Questions If you have any questions, create an [issue](https://github.com/akiran/react-slick/issues) (protip: do a quick search first to see if someone else didn't ask the same question before!). You can also reach us at hello@react-slick.opencollective.com. ## Credits ### Contributors Thank you to all the people who have already contributed to react-slick! ### Backers Thank you to all our backers! [[Become a backer](https://opencollective.com/react-slick#backer)] ### Sponsors Thank you to all our sponsors! (please ask your company to also support this open source project by [becoming a sponsor](https://opencollective.com/react-slick#sponsor)) ================================================ FILE: LICENSE ================================================ The MIT License (MIT) Copyright (c) 2014 Kiran Abburi Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: README.md ================================================ ### react-slick [![Backers on Open Collective](https://opencollective.com/react-slick/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/react-slick/sponsors/badge.svg)](#sponsors) ##### Carousel component built with React. It is a react port of [slick carousel](http://kenwheeler.github.io/slick/) ## [Documentation](http://react-slick.neostack.com) ### Installation **npm** ```bash npm install react-slick --save ``` **yarn** ```bash yarn add react-slick ``` **Also install slick-carousel for css and font** ```bash npm install slick-carousel // Import css files import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; ``` or add cdn link in your html ```html ``` ### [PlayGround](https://stackblitz.com/edit/vitejs-vite-ownrun?file=src%2FImageSlider.jsx) ### Example ```js import React from "react"; import Slider from "react-slick"; export default function SimpleSlider() { var settings = { dots: true, infinite: true, speed: 500, slidesToShow: 1, slidesToScroll: 1 }; return (

1

2

3

4

5

6

 ); } ``` ### Props For all available props, go [here](https://react-slick.neostack.com/docs/api/). ### Methods For all available methods, go [here](https://react-slick.neostack.com/docs/api#methods) ### Development Want to run demos locally ```bash git clone https://github.com/akiran/react-slick cd react-slick npm install npm start open http://localhost:8080 ``` ## Community 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) ================================================ FILE: __tests__/SimpleSlider.test.js ================================================ // includes tests of // SimpleSlider, MultipleItems import { testSlider } from "./testUtils"; describe("SimpleSlider with combinations of possibilities", function() { // try around several possibilities let _noOfSlides = [2, 5, 12]; let _slidesToShow = [2, 5, 10]; let _slidesToScroll = [1, 2, 3, 10]; if (true) { // for switching real quick to lesser/easier tests for simplicity _noOfSlides = [5]; _slidesToShow = [2]; _slidesToScroll = [1, 2]; } for (let noOfSlides of _noOfSlides) { for (let slidesToShow of _slidesToShow) { for (let slidesToScroll of _slidesToScroll) { // following restrictions may not be 100% correct, and there may be more restrictions if (slidesToShow > noOfSlides || slidesToScroll > slidesToShow) { continue; } if (noOfSlides === slidesToShow) { // temporary, jquery slick disables arrows in this case, so the tests fail continue; } if (slidesToShow === slidesToScroll) { // temporary, active-class is not being assigned properly, so tests fail continue; } const settings1 = { infinite: true, speed: 0, noOfSlides, slidesToShow, slidesToScroll, useCSS: false }; test(`Test with settings => noOfSlides: ${noOfSlides}, slidesToShow: ${slidesToShow}, slidesToScroll: ${slidesToScroll}`, function() { testSlider(settings1); }); } } } }); ================================================ FILE: __tests__/TestComponents.js ================================================ import React from "react"; import Slider from "../src/index"; export function GenericSliderComponent({ slidesCount, settings }) { const slides = [...Array(slidesCount).keys()].map(item => (
{item + 1}
)); return {slides}; } test("fake test", () => { expect(1).toBe(1); }); ================================================ FILE: __tests__/afterChange.test.js ================================================ import React from "react"; import { render, fireEvent } from "@testing-library/react"; import Slider from "../src/index"; import { getActiveSlide, clickNext, clickPrevious, getCurrentSlide } from "../test-utils"; class SliderWithAfterChange extends React.Component { constructor(props) { super(props); this.state = { currentSlide: null }; this.afterChange = this.afterChange.bind(this); } afterChange(currentSlide) { console.log(currentSlide, "afterChange"); this.setState({ currentSlide }); } render() { return (
slide1
slide2
slide3
slide4
 ); } } describe("After change Slider", function() { it("should render", function() { const { container } = render(); clickNext(container); setTimeout(() => { expect(getActiveSlide(container).textContent).toEqual("slide2"); }, 1000); clickNext(container); setTimeout(() => { expect(getActiveSlide(container).textContent).toEqual("slide3"); }, 1000); clickPrevious(container); setTimeout(() => { expect(getActiveSlide(container).textContent).toEqual("slide2"); }, 1000); }); }); ================================================ FILE: __tests__/arrows.js ================================================ /** * Arrow component tests */ sinon.stub(console, "error"); import { render } from "@testing-library/react"; import React from "react"; import sinon from "sinon"; import { NextArrow, PrevArrow } from "../src/arrows"; function CustomArrow(props) { return ( ); } describe("Previous arrows", () => { it("should render arrow", () => { const { container } = render(); expect(Array.from(container.getElementsByTagName("button"))).toHaveLength( 1 ); }); it("should not result in errors", () => { render(); expect(console.error.called).toBe(false); }); // it('should pass slide data to custom arrow', () => { // let elAttributes; // let arr = // const {container}= render(); // elAttributes =x=> container.querySelectorAll('.sample')[0].getAttribute(x); // expect(elAttributes('data-currentslide')).toBe('3'); // expect(elAttributes('data-slidecount')).toBe('5'); // }); }); describe("Next arrows", () => { it("should render arrow", () => { const { container } = render(); expect(Array.from(container.getElementsByTagName("button"))).toHaveLength( 1 ); }); // it('should not result in errors', () => { // render(); // expect(console.error.called).toBe(false); // }); // it('should pass slide data to custom arrow', () => { // let elAttributes; // let arr = // const {container} = render(); // elAttributes =(x)=> container.querySelectorAll('.sample')[0].getAttribute(x); // expect(elAttributes('data-currentslide')).toBe('6'); // expect(elAttributes('data-slidecount')).toBe('9'); // }); }); ================================================ FILE: __tests__/beforeChange.test.js ================================================ import React from "react"; import { render } from "@testing-library/react"; import Slider from "../src/index"; import { getActiveSlide, clickNext, clickPrevious, getCurrentSlide } from "../test-utils"; class SliderWithBeforeChange extends React.Component { constructor(props) { super(props); this.state = { currentSlide: null, nextSlide: null }; this.beforeChange = this.beforeChange.bind(this); } beforeChange(currentSlide, nextSlide) { this.setState({ currentSlide, nextSlide }); } render() { return (
slide1
slide2
slide3
slide4
 ); } } describe("Slider", function() { it("should render", function() { const { container } = render(); clickNext(container); expect(getActiveSlide(container).textContent).toEqual("slide2"); clickNext(container); expect(getActiveSlide(container).textContent).toEqual("slide3"); clickPrevious(container); expect(getActiveSlide(container).textContent).toEqual("slide2"); }); }); ================================================ FILE: __tests__/lazyLoad.test.js ================================================ import { render } from "@testing-library/react"; import assign from "object-assign"; import { getRequiredLazySlides } from "../src/utils/innerSliderUtils"; import { createInnerSliderWrapper, clickNext, clickPrev, tryAllConfigs } from "./testUtils"; // const testSettings = settings => { // let {container} = 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)); // } // }); // }); ================================================ FILE: __tests__/observations.json ================================================ { "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" } } ] } ================================================ FILE: __tests__/regression/fix-1813.test.js ================================================ //Test fix of #1813: In infinite mode, when slidesToShow equal to the length of slides, infinite functionality is not working. // Reversed the fix for #1813 to match the slick carousel functionality. When slides <= slidesToShow, unslick will be activated import React from "react"; import { render, fireEvent } from "@testing-library/react"; import { clickNext, clickPrevious, getActiveButton, getActiveSlidesCount, getActiveSlidesText, getButtons, getButtonsLength, getClonesCount, getCurrentSlide, getSlidesCount, hasArrows, hasDots } from "../../test-utils"; import { GenericSliderComponent } from "../TestComponents"; function MultipleItems() { const settings = { dots: true, infinite: true, speed: 500, slidesToShow: 9, slidesToScroll: 3 }; return ; } describe("Multiple Items with slidesToShow = slides count in infinite mode", function() { it("should have 9 active slides", function() { const { container } = render(); expect(getActiveSlidesCount(container)).toEqual(9); }); it("should show first 9 slides", function() { const { container } = render(); //expect(getActiveButton(container)).toEqual(["1"]); expect(getActiveSlidesText(container)).toEqual([ "1", "2", "3", "4", "5", "6", "7", "8", "9" ]); }); it("shouldn't have any arrows", () => { const { container } = render(); expect(hasArrows(container)).toEqual(false); }); it("shouldn't have any dots", () => { const { container } = render(); expect(hasDots(container)).toEqual(false); }); // it("should have 0 dots", function() { // const { container } = render(); // expect(getButtonsLength(container)).toEqual(0); // }); // it("should show slides from 4 when next button is clicked", function() { // const { container } = render(); // clickNext(container); // expect(getActiveButton(container)).toEqual(["2"]); // expect(getActiveSlidesText(container)).toEqual([ // "4", // "5", // "6", // "7", // "8", // "9", // "1", // "2", // "3" // ]); // }); // it("should show slides from 7 when previous button is clicked", function() { // const { container } = render(); // clickPrevious(container); // expect(getActiveButton(container)).toEqual(["3"]); // expect(getActiveSlidesText(container)).toEqual([ // "7", // "8", // "9", // "1", // "2", // "3", // "4", // "5", // "6" // ]); // }); // it("should show slides first 9 slides when first dot is clicked", function() { // const { container } = render(); // fireEvent( // getButtons(container)[0], // new MouseEvent("click", { // bubbles: true, // cancelable: true // }) // ); // expect(getActiveButton(container)).toEqual(["1"]); // expect(getActiveSlidesText(container)).toEqual([ // "1", // "2", // "3", // "4", // "5", // "6", // "7", // "8", // "9" // ]); // }); // it("should show slides from 4 when middle dot is clicked", function() { // const { container } = render(); // fireEvent( // getButtons(container)[1], // new MouseEvent("click", { // bubbles: true, // cancelable: true // }) // ); // expect(getActiveButton(container)).toEqual(["2"]); // expect(getActiveSlidesText(container)).toEqual([ // "4", // "5", // "6", // "7", // "8", // "9", // "1", // "2", // "3" // ]); // }); // it("should show slides from 7 when last dot is clicked", function() { // const { container } = render(); // fireEvent( // getButtons(container)[2], // new MouseEvent("click", { // bubbles: true, // cancelable: true // }) // ); // expect(getActiveButton(container)).toEqual(["3"]); // expect(getActiveSlidesText(container)).toEqual([ // "7", // "8", // "9", // "1", // "2", // "3", // "4", // "5", // "6" // ]); // }); }); ================================================ FILE: __tests__/regression/fix-1874.test.js ================================================ // 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(); expect(getCurrentSlideContent(container)).toEqual("1"); clickNext(container); expect(getCurrentSlideContent(container)).toEqual("2"); }); it("currentSlide is 2 when initialSlide is 2", function() { const { container } = render( ); expect(getCurrentSlideContent(container)).toEqual("3"); clickNext(container); expect(getCurrentSlideContent(container)).toEqual("4"); }); }); ================================================ FILE: __tests__/regression/fix-2315.test.js ================================================ // 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 (
); } describe("State change in parent component of slider", () => { it("Slider shoud work afer clicking on Increment button", function() { const { container } = render(); fireEvent( container.getElementsByClassName("increment-button")[0], new MouseEvent("click", { bubbles: true, cancelable: true }) ); // Throws an error "Maximum update depth exceeded." if the bug exists expect(getCurrentSlideContent(container)).toEqual("1"); expect(getSlidesCount(container)).toEqual(8); }); }); ================================================ FILE: __tests__/regression/fix-2414.test.js ================================================ // Test fix of #2414: Extra clones in infinite mode when there is only one slide or unslick is true import React from "react"; import { render, fireEvent } from "@testing-library/react"; import { getCurrentSlideContent, getSlidesCount, getActiveSlidesCount, getClonesCount, hasArrows, hasDots } from "../../test-utils"; import { GenericSliderComponent } from "../TestComponents"; function SliderWithOneSlide() { const settings = { dots: true, infinite: true }; return ; } function SliderWithUnslick() { const settings = { dots: true, infinite: true, unslick: true }; return ; } describe("Slider with one slide", function() { it("should have 1 active slide", function() { const { container } = render(); expect(getActiveSlidesCount(container)).toEqual(1); }); it("should not have any clones", function() { const { container } = render(); expect(getClonesCount(container)).toEqual(0); }); it("should no have dots and arrows", function() { const { container } = render(); expect(hasArrows(container)).toEqual(false); expect(hasDots(container)).toEqual(false); }); }); describe("Slider with unslick=true", function() { it("should have one active slide", function() { const { container } = render(); expect(getActiveSlidesCount(container)).toEqual(1); }); it("should not have any clones", function() { const { container } = render(); expect(getClonesCount(container)).toEqual(0); }); it("should no have dots and arrows", function() { const { container } = render(); expect(hasArrows(container)).toEqual(false); expect(hasDots(container)).toEqual(false); }); }); ================================================ FILE: __tests__/sliderStyles.test.js ================================================ 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)); // } }); }); ================================================ FILE: __tests__/testUtils.js ================================================ import React from "react"; import $ from "jquery"; import assign from "object-assign"; import { render } from "@testing-library/react"; 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"; import { getActiveSlides, getActiveSlidesCount, clickNext, clickPrevious } from "../test-utils"; // 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 => (

{i + 1}

)); } // create a react-slider with given noOfSlides and other props // variable widths are ignored for now for simplicity export function createReactSlider({ noOfSlides, ...props }) { return {createReactSliderChildren(noOfSlides)}; } // create a react inner-slider with given noOfSlides and other props // performs most operations like the ones when mounted inside Slider component export function createInnerSlider({ noOfSlides, ...settings }) { if (settings.centerMode) { settings.slidesToScroll = 1; // always scroll by one when centerMode is enabled } settings = assign({}, defaultProps, settings); const children = React.Children.toArray( createReactSliderChildren(noOfSlides) ); return {children}; } export function createInnerSliderWrapper(settings) { return render(createInnerSlider(settings)).container; } // creates a dom string, containing children of slick children export function createJQuerySliderChildren(noOfSlides) { let children = []; for (let i = 0; i < noOfSlides; i++) { children.push(`

${i + 1}

`); } return children.join(""); } // performs the very basic tests while clicking next or prev export function testSliderScroll({ direction, ...settings }) { const { noOfSlides, slidesToShow, slidesToScroll, initialSlide } = settings; // initialize react slider const { container } = render(createReactSlider(settings)); // initialize jquery slider document.body.innerHTML = `
${createJQuerySliderChildren(noOfSlides)}
`; $(".regular.slider").slick({ ...settings }); // console.log('setings:', settings) let expectedSlideIndex = initialSlide || 0; for (let click = 0; click < 2 * noOfSlides + 2; click++) { let activeslides = getActiveSlides(container); let $activeSlides = $(".regular.slider").find("div.slick-active"); expect(getActiveSlidesCount(container)).toEqual(slidesToShow || 1); expect($activeSlides.length).toEqual(slidesToShow || 1); let firstActiveSlide = activeslides[0]; let $firstActiveSlide = $activeSlides.first(); // console.log('classes', $firstActiveSlide.attr('data-slick-index')) // console.warn('currentSlide:', firstActiveSlide.prop('data-index'), 'expected slide', expectedSlideIndex) expect(parseInt(firstActiveSlide.getAttribute("data-index"))).toEqual( expectedSlideIndex % noOfSlides ); expect(parseInt($firstActiveSlide.attr("data-slick-index"))).toEqual( expectedSlideIndex % noOfSlides ); if (direction === "next") { // click the next arrow button clickNext(container); $("button.slick-next").click(); expectedSlideIndex += slidesToScroll || 1; if (expectedSlideIndex >= noOfSlides) { expectedSlideIndex = 0; } } else { // click on the prev arrow button clickPrevious(container); $("button.slick-prev").click(); expectedSlideIndex -= slidesToScroll || 1; if (expectedSlideIndex < 0) { expectedSlideIndex = activeSlideInLastTransition( noOfSlides, slidesToShow, slidesToScroll ); } } } } // function to run tests on a slider, // scrolls slider to the right by clicking right arrow several times // scrolls slider to the left by clicking left arrow several times export function testSlider(settings) { const settings1 = { direction: "next", ...settings }; const settings2 = { direction: "prev", ...settings }; testSliderScroll(settings1); testSliderScroll(settings2); } export const tryAllConfigs = (settings, settingsList) => { let leaf = true; for (let key of Object.keys(settings)) { if (Array.isArray(settings[key])) { leaf = false; for (let val of settings[key]) { tryAllConfigs({ ...settings, [key]: val }, settingsList); } } } if (leaf) { if ( settingsList .map(setting => JSON.stringify(setting)) .indexOf(JSON.stringify(settings)) < 0 ) { settingsList.push(settings); } } }; export const actualTrackLeft = container => container .querySelector(".slick-track") .style.transform.match(/translate3d\((\d+)px/i)[1]; export const testTrackLeft = container => { let trackLeft = parseInt(actualTrackLeft(container)); let spec = assign({}, wrapper.props(), wrapper.state(), { slideIndex: wrapper.state().currentSlide, trackRef: null }); let expectedTrackLeft = getTrackLeft(spec); expect(trackLeft).toEqual(parseInt(expectedTrackLeft)); }; test("fake test", () => { expect(1).toBe(1); }); ================================================ FILE: __tests__/utils/filterSettings.test.js ================================================ 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 }); }); }); ================================================ FILE: docs/api.md ================================================ ### Methods | Name | Arguments | Description | | ------------ | ------------------ | --------------------------- | | `slickPrev` | None | go to previous slide | | `slickNext` | None | go to next slide | | `slickGoTo` | index, dontAnimate | go to the given slide index | | `slickPause` | None | pause the autoplay | | `slickPlay` | None | start the autoplay | #### Followings are not going to be implemented | Name | type | Reason | | ------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `unslick` | method | same functionality can be achieved with `unslick` prop | | `slickSetOption` | method | same functionality can be achieved via props and managing state for them in wrapper | | `slickFilter` | method | same functionality can be achieved as with dynamic slides, look at dynamic slides [example](https://github.com/akiran/react-slick/blob/master/examples/DynamicSlides.js) | | `slickUnfilter` | method | same functionality can be achieved as with dynamic slides, look at dynamic slides [example](https://github.com/akiran/react-slick/blob/master/examples/DynamicSlides.js) | | `slickAdd` | method | same functionality can be achieved as with dynamic slides, look at dynamic slides [example](https://github.com/akiran/react-slick/blob/master/examples/DynamicSlides.js) | | `slickRemove` | method | same functionality can be achieved as with dynamic slides, look at dynamic slides [example](https://github.com/akiran/react-slick/blob/master/examples/DynamicSlides.js) | | `slickCurrentSlide` | method | same functionality can be achieved with `beforeChange hook` | | `slickGetOption` | method | manage wrapper state for desired options | | `getSlick` | method | a simple ref will do | ================================================ FILE: docs/common.md ================================================ #### `responsive` property Array of objects in the form of `{ breakpoint: int, settings: { ... } }` The breakpoint _int_ is the `maxWidth` so the settings will be applied when resolution is below this value. Breakpoints in the array should be ordered from smallest to greatest. Use 'unslick' in place of the settings object to disable rendering the carousel at that breakpoint. Example: `[ { breakpoint: 768, settings: { slidesToShow: 3 } }, { breakpoint: 1024, settings: { slidesToShow: 5 } }, { breakpoint: 100000, settings: 'unslick' } ]` ### Custom next/prev arrows To customize the next/prev arrow elements, simply create new React components and set them as the values of nextArrow and prevArrow. ```js class LeftNavButton extends React.Component { render() { return ; } } ``` Important: be sure that you pass your component's props to your clickable element like the example above. If you don't, your custom component won't trigger the click handler. You can also set `onClick={this.props.onClick}` if you only want to set the click handler. ### Flexbox support If you have flex property on container div of slider, add below css ```css * { min-height: 0; min-width: 0; } ``` ### Test Setup If you try to run tests with jest in a project that uses react-slick, you may run into this error ``` matchMedia not present, legacy browsers require a polyfill ``` To fix this issue add below snippet in test-setup.js ```js window.matchMedia = window.matchMedia || function() { return { matches: false, addListener: function() {}, removeListener: function() {} }; }; ``` and add below jest config in package.json ```json "jest": { "setupFiles": ["test-setup.js"] } ``` ### Polyfills for old IE support `matchMedia` support from [media-match](https://github.com/weblinc/media-match) ================================================ FILE: docs/demos.js ================================================ "use strict"; import React from "react"; import Slider from "../src/slider"; import SimpleSlider from "../examples/SimpleSlider"; import SlideChangeHooks from "../examples/SlideChangeHooks"; import MultipleItems from "../examples/MultipleItems"; import MultipleRows from "../examples/MultipleRows"; import Responsive from "../examples/Responsive"; import Resizable from "../examples/Resizable"; import UnevenSetsInfinite from "../examples/UnevenSetsInfinite"; import UnevenSetsFinite from "../examples/UnevenSetsFinite"; import CenterMode from "../examples/CenterMode"; import FocusOnSelect from "../examples/FocusOnSelect"; import AutoPlay from "../examples/AutoPlay"; import AutoPlayMethods from "../examples/AutoPlayMethods"; import PauseOnHover from "../examples/PauseOnHover"; import Rtl from "../examples/Rtl"; import VariableWidth from "../examples/VariableWidth"; import AdaptiveHeight from "../examples/AdaptiveHeight"; import LazyLoad from "../examples/LazyLoad"; import Fade from "../examples/Fade"; import SlickGoTo from "../examples/SlickGoTo"; import CustomArrows from "../examples/CustomArrows"; import PreviousNextMethods from "../examples/PreviousNextMethods"; import DynamicSlides from "../examples/DynamicSlides"; import VerticalMode from "../examples/VerticalMode"; import SwipeToSlide from "../examples/SwipeToSlide"; import VerticalSwipeToSlide from "../examples/VerticalSwipeToSlide"; import CustomPaging from "../examples/CustomPaging"; import CustomSlides from "../examples/CustomSlides"; import AsNavFor from "../examples/AsNavFor"; import AppendDots from "../examples/AppendDots"; export default class App extends React.Component { render() { return (
); } } ================================================ FILE: docs/docs.css ================================================ h3 { background: #00558B; color: #fff; font-size: 36px; line-height: 100px; margin: 10px; padding: 2%; position: relative; text-align: center; } .variable-width .slick-slide p { background: #00558B; height: 100px; color: #fff; margin: 5px; line-height: 100px; text-align: center; } .center .slick-center h3 { color: #e67e22; opacity: 1; transform: scale(1.08); } .center h3{ opacity: 0.8; transition: all 300ms ease; } .content { padding: 20px; margin: auto; } @media (min-width: 701px) { .content { width: 80%; } } @media (max-width: 700px) { .content { width: 70%; } } .slick-slide .image { padding: 10px; } .slick-slide img { border: 5px solid #FFF; display: block; margin: auto; max-width: 80%; } .slick-slide img.slick-loading { border: 0 } .slick-slider { margin: 30px auto 50px; } .slick-dots { margin-left: 0; } .slick-thumb { bottom: -45px; } .slick-thumb li { width: 60px; height: 45px; } .slick-thumb li img { width: 100%; height: 100%; filter: grayscale(100%); } .slick-thumb li.slick-active img{ filter: grayscale(0%); } @media (max-width: 768px) { h3 { font-size:24px; } .center { margin-left: -40px; margin-right: -40px; } .center .slick-center h3 { color: #e67e22; opacity: 1; transform: scale(1); } .center h3 { opacity: 0.8; transform: scale(0.95); transition: all 300ms ease; } } .slick-vertical .slick-slide { height: 180px; } .slick-arrow { background-color: grey; } .slick-arrow:hover { background-color: grey; } .slick-arrow:focus { background-color: grey; } .button { background-color: #00558B; padding: 10px 20px; margin: 0px 20px; border: none; color: white; font-size: 20px; border-radius: 5px; min-height: 45px } ================================================ FILE: docs/docs.js ================================================ "use strict"; import React from "react"; import Demos from "./demos"; export default class Docs extends React.Component { render() { return (
React Slick
); } } ================================================ FILE: docs/index.html ================================================
================================================ FILE: docs/index.js ================================================ "use strict"; import React from "react"; import { createRoot } from "react-dom/client"; import Docs from "./docs"; const container = document.getElementById("rapp"); const root = createRoot(container); React.initializeTouchEvents && React.initializeTouchEvents(true); root.render( ); ================================================ FILE: docs/routes.js ================================================ "use strict"; var React = require("react"); var Router = require("react-router"); var Route = Router.Route; var Docs = require("./docs"); var path = process.env.NODE_ENV === "dev_docs" ? "/" : "/opensource/react-slick"; var routes = ; module.exports = routes; ================================================ FILE: docs/scripts/generateExampleConfigs.js ================================================ const React = require("react"); const fs = require("fs"); const babel = require("babel-core"); const ReactDOMServer = require("react-dom/server"); let configsObject; if (fs.existsSync("./configs.json")) { configsObject = require("./configs.json"); } else { configsObject = {}; } const fetchExampleString = exampleName => { const exampleString = fs.readFileSync(`examples/${exampleName}.js`, "utf-8"); return exampleString; }; const extractConfig = exampleString => { const pattern = /(var|const)\s+settings\s*=\s*(\{(.|\n)+?\n\s*\};)/; let extraction = exampleString.match(pattern); if (extraction) extraction = extraction[2]; else return null; const propPattern = /(\w+)\:((?:.|\n)+?)(?=(,\n)|(\n\s*};))/g; let match; let matchObject = {}; do { match = propPattern.exec(extraction); if (!match) break; if (!matchObject[match[1]]) { matchObject[match[1]] = match[2].trim(); } } while (match); return matchObject; }; const extractChildren = exampleString => { const pattern = /\((.|\n)*?)\<\/Slider\>/; return exampleString.match(pattern)[1]; }; const transpile = exampleString => babel.transform(exampleString, { plugins: [ "transform-react-jsx", "babel-plugin-transform-object-rest-spread", "babel-plugin-transform-class-properties", "babel-plugin-transform-es2015-arrow-functions" ] }).code; const fetchExampleConfigs = (fileName, index) => { const exampleName = fileName.substring(0, fileName.length - 3); const exampleString = fetchExampleString(exampleName); const transformedString = transpile(exampleString); let childrenString = extractChildren(exampleString.replace(/\=\>/g, "$$$")); // jsx type string try { // react string without jsx childrenString = eval( transpile( `
` + childrenString + "
" ).replace(/baseUrl/g, "'./img/react-slick'") ); console.log("success"); } catch (error) { childrenString = ""; console.error("children error:", fileName); } childrenString = ReactDOMServer.renderToString(childrenString); // pure html string let config = extractConfig(transformedString); if (config) { configsObject[exampleName] = { props: config, children: childrenString }; } else { console.log("config error:", fileName); } }; const exampleFiles = fs .readdirSync("examples") .filter(file => file.endsWith(".js") && file[0] === file[0].toUpperCase()) .forEach((fileName, index) => fetchExampleConfigs(fileName, index)); fs.writeFileSync( "examples/scripts/configs.json", JSON.stringify(configsObject, null, 4) ); ================================================ FILE: docs/scripts/generateExamples.js ================================================ const fs = require("fs"); const exampleConfigs = require("./configs.json"); const exec = require("child_process").exec; var procCode = exec( "cp -r node_modules/slick-carousel/slick/fonts node_modules/slick-carousel/slick/ajax-loader.gif docs/" ); const toString = obj => { let ret = "{\n"; Object.keys(obj).forEach(key => { if ( obj[key].match("function") || obj[key].match("React.createElement" || obj[key].match("\n")) ) { return; } if ( key.match("style") || key.match("src") || key.match("border") || key.match("settings") || key.match("responsive") ) return; ret += "\t" + key + ": " + obj[key] + ",\n"; }); ret += "}\n"; return ret; }; let bodyHTML = ""; let bodyScript = ""; Object.keys(exampleConfigs).forEach(key => { const props = exampleConfigs[key]["props"]; const children = exampleConfigs[key]["children"]; if (!props || !children) return; bodyHTML += `

${key}

${children}
`; bodyScript += ` $('[name="${key}"').slick(${toString(props)}) `; }); let HTMLString = `
${bodyHTML}
`; fs.writeFileSync("docs/jquery.html", HTMLString); ================================================ FILE: docs/single-demo.js ================================================ "use strict"; import React from "react"; import { createRoot } from "react-dom/client"; import Slider from "../src/slider"; import MultipleItems from "../examples/MultipleItems"; import SimpleSlider from "../examples/SimpleSlider"; import CenterMode from "../examples/CenterMode"; import UnevenSetsInfinite from "../examples/UnevenSetsInfinite"; // function SimpleSlider() { // const settings = { // dots: true, // infinite: true, // speed: 500, // slidesToShow: 1, // slidesToScroll: 1 // }; // return ( //
//

Single Item

// //
//

1

//
//
//

2

//
//
//

3

//
//
//

4

//
//
//

5

//
//
//

6

//
// //
// ); // } function App() { return (
{/* */} {/* */} {/* */}
); } const container = document.getElementById("rapp"); const root = createRoot(container); React.initializeTouchEvents && React.initializeTouchEvents(true); root.render( ); ================================================ FILE: docs/slick-theme.css ================================================ @charset 'UTF-8'; /* Slider */ .slick-loading .slick-list { background: #fff url('./ajax-loader.gif') center center no-repeat; } /* Icons */ @font-face { font-family: 'slick'; font-weight: normal; font-style: normal; src: url('./fonts/slick.eot'); src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg'); } /* Arrows */ .slick-prev, .slick-next { font-size: 0; line-height: 0; position: absolute; top: 50%; display: block; width: 20px; height: 20px; padding: 0; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); cursor: pointer; color: transparent; border: none; outline: none; background: transparent; } .slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { color: transparent; outline: none; background: transparent; } .slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; } .slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: .25; } .slick-prev:before, .slick-next:before { font-family: 'slick'; font-size: 20px; line-height: 1; opacity: .75; color: white; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-prev { left: -25px; } [dir='rtl'] .slick-prev { right: -25px; left: auto; } .slick-prev:before { content: '←'; } [dir='rtl'] .slick-prev:before { content: '→'; } .slick-next { right: -25px; } [dir='rtl'] .slick-next { right: auto; left: -25px; } .slick-next:before { content: '→'; } [dir='rtl'] .slick-next:before { content: '←'; } /* Dots */ .slick-dotted.slick-slider { margin-bottom: 30px; } .slick-dots { position: absolute; bottom: -25px; display: block; width: 100%; padding: 0; margin: 0; list-style: none; text-align: center; } .slick-dots li { position: relative; display: inline-block; width: 20px; height: 20px; margin: 0 5px; padding: 0; cursor: pointer; } .slick-dots li button { font-size: 0; line-height: 0; display: block; width: 20px; height: 20px; padding: 5px; cursor: pointer; color: transparent; border: 0; outline: none; background: transparent; } .slick-dots li button:hover, .slick-dots li button:focus { outline: none; } .slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; } .slick-dots li button:before { font-family: 'slick'; font-size: 6px; line-height: 20px; position: absolute; top: 0; left: 0; width: 20px; height: 20px; content: '•'; text-align: center; opacity: .25; color: black; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-dots li.slick-active button:before { opacity: .75; color: black; } ================================================ FILE: docs/slick.css ================================================ /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } ================================================ FILE: examples/AdaptiveHeight.js ================================================ import React from "react"; import Slider from "react-slick"; function AdaptiveHeight() { const settings = { className: "", dots: true, infinite: true, slidesToShow: 1, slidesToScroll: 1, adaptiveHeight: true }; return (

1

2

Hello

3

See ....

Height is adaptive

4

5

6
); } export default AdaptiveHeight; ================================================ FILE: examples/AppendDots.js ================================================ import React from "react"; import Slider from "react-slick"; function AppendDots() { const settings = { dots: true, infinite: true, speed: 500, slidesToShow: 1, slidesToScroll: 1, appendDots: dots => (
    {dots}
), customPaging: i => (
{i + 1}
) }; return (

1

2

3

4

5

6
); } export default AppendDots; ================================================ FILE: examples/AsNavFor.js ================================================ import React, { useState, useEffect, useRef } from "react"; import Slider from "react-slick"; function AsNavFor() { const [nav1, setNav1] = useState(null); const [nav2, setNav2] = useState(null); let sliderRef1 = useRef(null); let sliderRef2 = useRef(null); useEffect(() => { setNav1(sliderRef1); setNav2(sliderRef2); }, []); return (

Slider Syncing (AsNavFor)

First Slider

(sliderRef1 = slider)}>

1

2

3

4

5

6

Second Slider

(sliderRef2 = slider)} slidesToShow={3} swipeToSlide={true} focusOnSelect={true} >

1

2

3

4

5

6
); } export default AsNavFor; ================================================ FILE: examples/AutoPlay.js ================================================ import React from "react"; import Slider from "react-slick"; function AutoPlay() { const settings = { dots: true, infinite: true, slidesToShow: 3, slidesToScroll: 1, autoplay: true, speed: 2000, autoplaySpeed: 2000, cssEase: "linear" }; return (

1

2

3

4

5

6
); } export default AutoPlay; ================================================ FILE: examples/AutoPlayMethods.js ================================================ import React, { useRef } from "react"; import Slider from "react-slick"; function AutoPlayMethods() { 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 (

Auto Play {"&"} Pause with buttons

(sliderRef = slider)} {...settings}>

1

2

3

4

5

6
); } export default AutoPlayMethods; ================================================ FILE: examples/CenterMode.js ================================================ import React, { Component } from "react"; import Slider from "react-slick"; function CenterMode() { const settings = { className: "center", centerMode: true, infinite: true, centerPadding: "60px", slidesToShow: 3, speed: 500 }; return (

1

2

3

4

5

6
); } export default CenterMode; ================================================ FILE: examples/CustomArrows.js ================================================ import React, { Component } from "react"; import Slider from "react-slick"; function SampleNextArrow(props) { const { className, style, onClick } = props; return (
); } function SamplePrevArrow(props) { const { className, style, onClick } = props; return (
); } function CustomArrows() { const settings = { dots: true, infinite: true, slidesToShow: 3, slidesToScroll: 1, nextArrow: , prevArrow: }; return (

1

2

3

4

5

6
); } export default CustomArrows; ================================================ FILE: examples/CustomPaging.js ================================================ import React, { Component } from "react"; import Slider from "react-slick"; import { baseUrl } from "./config"; function CustomPaging() { const settings = { customPaging: function(i) { return ( ); }, dots: true, dotsClass: "slick-dots slick-thumb", infinite: true, speed: 500, slidesToShow: 1, slidesToScroll: 1 }; return (
); } export default CustomPaging; ================================================ FILE: examples/CustomSlides.js ================================================ import React, { Component } from "react"; import Slider from "react-slick"; function CustomSlide(props) { const { index, ...otherProps } = props; return (

{index}

); } function CustomSlides() { const settings = { dots: true, infinite: true, speed: 500, slidesToShow: 1, slidesToScroll: 1 }; return (
); } export default CustomSlides; ================================================ FILE: examples/DynamicSlides.js ================================================ import React, { useState } from "react"; import Slider from "react-slick"; function DynamicSlides() { 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] ); }; const settings = { dots: true, infinite: true, speed: 500, slidesToShow: 3, slidesToScroll: 3 }; return (
{slides.map(slide => { return (

{slide}

); })}
); } export default DynamicSlides; ================================================ FILE: examples/Fade.js ================================================ import React from "react"; import Slider from "react-slick"; import { baseUrl } from "./config"; function Fade() { const settings = { dots: true, fade: true, infinite: true, speed: 500, slidesToShow: 1, slidesToScroll: 1, waitForAnimate: false }; return (
); } export default Fade; ================================================ FILE: examples/FocusOnSelect.js ================================================ import React, { Component } from "react"; import Slider from "react-slick"; function FocusOnSelect() { const settings = { focusOnSelect: true, infinite: true, slidesToShow: 3, slidesToScroll: 1, speed: 500 }; return (
Click on any slide to select and make it current slide

1

2

3

4

5

6
); } export default FocusOnSelect; ================================================ FILE: examples/LazyLoad.js ================================================ import React, { Component } from "react"; import Slider from "react-slick"; import { baseUrl } from "./config"; function LazyLoad() { const settings = { dots: true, lazyLoad: true, infinite: true, speed: 500, slidesToShow: 1, slidesToScroll: 1, initialSlide: 2 }; return (
); } export default LazyLoad; ================================================ FILE: examples/MultipleItems.js ================================================ import React from "react"; import Slider from "react-slick"; function MultipleItems() { const settings = { dots: true, infinite: true, speed: 500, slidesToShow: 3, slidesToScroll: 3 }; return (

1

2

3

4

5

6

7

8

9
); } export default MultipleItems; ================================================ FILE: examples/MultipleRows.js ================================================ import React from "react"; import Slider from "react-slick"; function MultipleRows() { const settings = { className: "center", centerMode: true, infinite: true, centerPadding: "60px", slidesToShow: 3, speed: 500, rows: 2, slidesPerRow: 2 }; return (

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16
); } export default MultipleRows; ================================================ FILE: examples/PauseOnHover.js ================================================ import React, { Component } from "react"; import Slider from "react-slick"; function PauseOnHover() { var settings = { dots: true, infinite: true, slidesToShow: 3, slidesToScroll: 1, autoplay: true, autoplaySpeed: 2000, pauseOnHover: true }; return (

1

2

3

4

5

6
); } export default PauseOnHover; ================================================ FILE: examples/PreviousNextMethods.js ================================================ import React, { useRef } from "react"; import Slider from "react-slick"; function PreviousNextMethods() { let sliderRef = useRef(null); const next = () => { sliderRef.slickNext(); }; const previous = () => { sliderRef.slickPrev(); }; const settings = { dots: true, infinite: true, speed: 500, slidesToShow: 1, slidesToScroll: 1 }; return (
{ sliderRef = slider; }} {...settings} >

1

2

3

4

5

6
); } export default PreviousNextMethods; ================================================ FILE: examples/Resizable.js ================================================ import React, { useState } from "react"; import Slider from "react-slick"; function Resizable() { const [display, setDisplay] = useState(true); const [width, setWidth] = useState(600); const settings = { dots: true, infinite: true, speed: 500, slidesToShow: 3, slidesToScroll: 1 }; return (

Resizable Collapsible

1

2

3

4

5

6
); } export default Resizable; ================================================ FILE: examples/Responsive.js ================================================ import React from "react"; import Slider from "react-slick"; 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 } }, { breakpoint: 600, settings: { slidesToShow: 2, slidesToScroll: 2, initialSlide: 2 } }, { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1 } } ] }; return (

1

2

3

4

5

6

7

8
); } export default Responsive; ================================================ FILE: examples/Rtl.js ================================================ import React from "react"; import Slider from "react-slick"; 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; ================================================ FILE: examples/SimpleSlider.js ================================================ import React from "react"; import Slider from "react-slick"; function SimpleSlider() { const settings = { dots: true, infinite: true, speed: 500, slidesToShow: 1, slidesToScroll: 1 }; return (

1

2

3

4

5

6
); } export default SimpleSlider; ================================================ FILE: examples/SlickGoTo.js ================================================ import React, { useState, useRef } from "react"; import Slider from "react-slick"; import { baseUrl } from "./config"; function SlickGoTo() { 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) }; return (

Total updates: {updateCount}

sliderRef.slickGoTo(e.target.value)} value={slideIndex} type="range" min={0} max={3} /> { sliderRef = slider; }} {...settings} >
); } export default SlickGoTo; ================================================ FILE: examples/SlideChangeHooks.js ================================================ import React, { useState } from "react"; import Slider from "react-slick"; 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) }; return (

beforeChange and afterChange hooks

BeforeChange {"=>"} oldSlide: {oldSlide}

BeforeChange {"=>"} activeSlide: {activeSlide}

AfterChange {"=>"} activeSlide: {activeSlide2}

1

2

3

4

5

6
); } export default SlideChangeHooks; ================================================ FILE: examples/SwipeToSlide.js ================================================ import React, { Component } from "react"; import Slider from "react-slick"; 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 (

1

2

3

4

5

6

7

8

9
); } export default SwipeToSlide; ================================================ FILE: examples/UnevenSetsFinite.js ================================================ import React from "react"; import Slider from "react-slick"; function UnevenSetsFinite() { var settings = { dots: true, infinite: false, speed: 500, slidesToScroll: 4, slidesToShow: 4 }; return (

1

2

3

4

5

6
); } export default UnevenSetsFinite; ================================================ FILE: examples/UnevenSetsInfinite.js ================================================ import React from "react"; import Slider from "react-slick"; function UnevenSetsInfinite() { var settings = { dots: true, infinite: true, speed: 500, slidesToScroll: 4, slidesToShow: 4 }; return (

1

2

3

4

5

6
); } export default UnevenSetsInfinite; ================================================ FILE: examples/VariableWidth.js ================================================ import React from "react"; import Slider from "react-slick"; function VariableWidth() { const settings = { className: "slider variable-width", dots: true, infinite: true, centerMode: true, slidesToShow: 1, slidesToScroll: 1, variableWidth: true }; return (

100

200

75

300

225

175
); } export default VariableWidth; ================================================ FILE: examples/VerticalMode.js ================================================ import React, { Component } from "react"; import Slider from "react-slick"; 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 (

1

2

3

4

5

6
); } export default VerticalMode; ================================================ FILE: examples/VerticalSwipeToSlide.js ================================================ import React, { Component } from "react"; import Slider from "react-slick"; 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 (

1

2

3

4

5

6
); } export default VerticalSwipeToSlide; ================================================ FILE: examples/__tests__/CentreMode.test.js ================================================ import React from "react"; import CenterMode from "../CenterMode"; import { render } from "@testing-library/react"; import { html as beautify_html } from "js-beautify"; import { getActiveSlides, getActiveSlidesCount, getClonesCount, getCurrentSlide, getSlidesCount, clickNext } from "../../test-utils"; describe("CenterMode Tests", () => { test("Counting test", () => { const { container } = render(); let totalSlides = getSlidesCount(container); let clonedSlides = getClonesCount(container); let activeSlides = getActiveSlidesCount(container); expect(totalSlides).toEqual(14); expect(clonedSlides).toEqual(8); expect(activeSlides).toEqual(3); //expect(beautify_html(toString(container))).toMatchSnapshot(); }); test("Positioning test", () => { const { container } = render(); let currentSlide = getCurrentSlide(container); let activeslides = getActiveSlides(container); expect(parseInt(currentSlide.getAttribute("data-index"))).toEqual(0); expect( Array.from(activeslides).map(e => parseInt(e.getAttribute("data-index"))) ).toEqual([-1, 0, 1]); //expect(beautify_html(toString(container))).toMatchSnapshot(); }); test("Activity test", () => { const { container } = render(); let currentSlide = getCurrentSlide(container); let activeslides = getActiveSlides(container); expect(parseInt(currentSlide.getAttribute("data-index"))).toEqual(0); expect( Array.from(activeslides).map(e => parseInt(e.getAttribute("data-index"))) ).toEqual([-1, 0, 1]); clickNext(container); currentSlide = getCurrentSlide(container); activeslides = getActiveSlides(container); expect(parseInt(currentSlide.getAttribute("data-index"))).toEqual(1); expect( Array.from(activeslides).map(e => parseInt(e.getAttribute("data-index"))) ).toEqual([0, 1, 2]); // expect(beautify_html(toString(container))).toMatchSnapshot(); }); }); ================================================ FILE: examples/__tests__/Fade.js ================================================ import React from "react"; import { render } from "@testing-library/react"; import Fade from "../Fade"; import { getActiveSlide, clickNext, clickPrevious } from "../../test-utils"; describe("Fade", () => { it("should change slides when clicked on next & prev buttons", () => { const { container } = render(); let activeslide = getActiveSlide(container); expect(parseInt(activeslide.getAttribute("data-index"))).toEqual(0); clickNext(container); activeslide = getActiveSlide(container); expect(parseInt(activeslide.getAttribute("data-index"))).toEqual(1); clickPrevious(container); activeslide = getActiveSlide(container); expect(parseInt(activeslide.getAttribute("data-index"))).toEqual(0); }); }); ================================================ FILE: examples/__tests__/FocusOnSelect.test.js ================================================ import React from "react"; import { render, fireEvent } from "@testing-library/react"; import { html as beautify_html } from "js-beautify"; import { activeSlide, clickNext, clickPrevious, getButtons, getCurrentSlide } from "../../test-utils"; import FocusOnSelect from "../FocusOnSelect"; describe("FocusOnSelect Tests", () => { test("Activity Test", () => { const { container } = render(); expect( parseInt(getCurrentSlide(container).getAttribute("data-index")) ).toEqual(0); // expect(beautify_html(toString(container))).toMatchSnapshot(); Array.from(container.getElementsByClassName("slick-slide")).map(e => e.getAttribute("data-index") == "2" ? fireEvent( e, new MouseEvent("click", { bubbles: true, cancelable: true }) ) : null ); expect( parseInt(getCurrentSlide(container).getAttribute("data-index")) ).toEqual(2); //expect(beautify_html(toString(container))).toMatchSnapshot(); }); }); ================================================ FILE: examples/__tests__/MultipleItems.test.js ================================================ import React from "react"; import { render, fireEvent } from "@testing-library/react"; import { html as beautify_html } from "js-beautify"; import { activeSlide, activeSlides, clickNext, clickPrevious, getActiveButton, getActiveSlidesCount, getActiveSlidesText, getButtons, getButtonsLength, getButtonsListItem, getClonesCount, getCurrentSlide, getSlidesCount, hasClass } from "../../test-utils"; import MultipleItems from "../MultipleItems"; describe("Multiple Items", function() { it("should have 9 actual slides and (3(pre) + 3(post)) clone slides", function() { const { container } = render(); expect(getSlidesCount(container)).toEqual(15); expect(getClonesCount(container)).toEqual(6); //expect(beautify_html(toString(container))).toMatchSnapshot(); }); it("should have 3 active slides", function() { const { container } = render(); expect(getActiveSlidesCount(container)).toEqual(3); // expect(beautify_html(toString(container))).toMatchSnapshot(); }); it("should have 3 dots", function() { const { container } = render(); expect(getButtonsLength(container)).toEqual(3); // expect(beautify_html(toString(container))).toMatchSnapshot(); }); it("should show first 3 slides", function() { const { container } = render(); expect(getActiveButton(container)).toEqual(["1"]); expect(getActiveSlidesText(container)).toEqual(["1", "2", "3"]); // expect(beautify_html(toString(container))).toMatchSnapshot(); }); it("should show slides from 4 to 6 when next button is clicked", function() { const { container } = render(); clickNext(container); // Array.from(container.querySelectorAll(".slick-current")).map(e=>console.log(e.textContent)) expect(getActiveButton(container)).toEqual(["2"]); expect(getActiveSlidesText(container)).toEqual(["4", "5", "6"]); // expect(beautify_html(toString(container))).toMatchSnapshot(); }); it("should show last 3 slides when previous button is clicked", function() { const { container } = render(); clickPrevious(container); expect(getActiveButton(container)).toEqual(["3"]); expect(getActiveSlidesText(container)).toEqual(["7", "8", "9"]); // expect(beautify_html(toString(container))).toMatchSnapshot(); }); it("should show slides first 3 slides when first dot is clicked", function() { const { container } = render(); fireEvent( getButtons(container)[0], new MouseEvent("click", { bubbles: true, cancelable: true }) ); expect(getActiveButton(container)).toEqual(["1"]); expect(getActiveSlidesText(container)).toEqual(["1", "2", "3"]); // expect(beautify_html(toString(container))).toMatchSnapshot(); }); it("should show slides from 4 to 6 when middle dot is clicked", function() { const { container } = render(); fireEvent( getButtons(container)[1], new MouseEvent("click", { bubbles: true, cancelable: true }) ); expect(getActiveButton(container)).toEqual(["2"]); expect(getActiveSlidesText(container)).toEqual(["4", "5", "6"]); // expect(beautify_html(toString(container))).toMatchSnapshot(); }); it("should show last 3 slides when last dot is clicked", function() { const { container } = render(); fireEvent( getButtons(container)[2], new MouseEvent("click", { bubbles: true, cancelable: true }) ); expect(getActiveButton(container)).toEqual(["3"]); expect(getActiveSlidesText(container)).toEqual(["7", "8", "9"]); // expect(beautify_html(toString(container))).toMatchSnapshot(); }); }); ================================================ FILE: examples/__tests__/SimpleSlider.test.js ================================================ import React from "react"; import SimpleSlider from "../SimpleSlider"; import { render, fireEvent, waitFor, screen } from "@testing-library/react"; import { html as beautify_html } from "js-beautify"; import { getActiveSlide, clickNext, clickPrevious, hasClass, getActiveSlides, getActiveSlidesCount, getActiveSlidesText, getButtons, getButtonsListItem, getCurrentSlide } from "../../test-utils"; describe("SimpleSlider example", () => { it("should have 13 slides (1(preclone) + 6(actual) + 1(postclone))", function() { const { container } = render(); expect(container.getElementsByClassName("slick-slide").length).toBe(8); }); it("should have 7 clone slides", function() { const { container } = render(); expect(container.getElementsByClassName("slick-cloned").length).toBe(2); }); it("should have 1 current slide", function() { const { container } = render(); expect( container.querySelectorAll(".slick-slide.slick-current").length ).toBe(1); expect(parseInt(getCurrentSlide(container).textContent) - 1).toBe(0); }); it("should have 1 active slide", function() { const { container } = render(); expect(container.querySelectorAll(".slick-slide.slick-active").length).toBe( 1 ); expect( Array.from(getActiveSlide(container).children).map( e => parseInt(e.textContent) - 1 )[0] ).toBe(0); }); it("should have 6 dots", function() { const { container } = render(); expect( container.getElementsByClassName("slick-dots")[0].children.length ).toBe(6); }); it("should have 1 active dot", function() { const { container } = render(); expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe( 1 ); }); it("should have a prev arrow", function() { const { container } = render(); expect(container.getElementsByClassName("slick-prev").length).toBe(1); }); it("should have a next arrow", function() { const { container } = render(); expect(container.getElementsByClassName("slick-next").length).toBe(1); }); it("should got to next slide when next button is clicked", function() { const { container } = render(); clickNext(container); expect( container.querySelectorAll(".slick-slide.slick-active")[0].textContent ).toBe("2"); expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe( 1 ); expect( container.querySelectorAll(".slick-dots")[0].children[1] ).toHaveClass("slick-active"); }); it("should goto previous slide when prev button is clicked", function() { const { container } = render(); clickPrevious(container); expect( container.querySelectorAll(".slick-slide.slick-active")[0].textContent ).toBe("6"); expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe( 1 ); expect( container.querySelectorAll(".slick-dots")[0].children[5] ).toHaveClass("slick-active"); }); it("should goto 4th slide when 4th dot is clicked", function() { const { container } = render(); fireEvent( container.querySelectorAll(".slick-dots button")[3], new MouseEvent("click", { bubbles: true, cancelable: true }) ); expect(getActiveSlidesText(container)[0]).toEqual("4"); expect(getActiveSlidesCount(container)).toEqual(1); expect(hasClass(getButtonsListItem(container)[3], "slick-active")).toEqual( true ); }); }); describe("Simple Slider Snapshots", function() { it("slider initial state", function() { const { container } = render(); // expect(beautify_html(toString(container))).toMatchSnapshot(); }); it("click on next button", function() { const { container } = render(); clickNext(container); //expect(beautify_html(toString(container))).toMatchSnapshot(); }); it("click on prev button", function() { const { container } = render(); clickPrevious(container); // expect(beautify_html(toString(container))).toMatchSnapshot(); }); it("click on 3rd dot", function() { const { container } = render(); fireEvent( getButtons(container)[2], new MouseEvent("click", { bubbles: true, cancelable: true }) ); // expect(beautify_html(toString(container))).toMatchSnapshot(); }); }); ================================================ FILE: examples/__tests__/SlickGoTo.test.js ================================================ import React from "react"; import { fireEvent, getRoles, render } from "@testing-library/react"; import SlickGoTo from "../SlickGoTo"; import { activeSlide, getActiveSlides, getSlidesCount } from "../../test-utils"; describe.skip("SlickGoTo", () => { it("should goto 2nd slide", () => { const { container } = render(); fireEvent.change(container.getElementsByTagName("input")[0], { target: { value: 1 } }); let currentImg = Array.from( getActiveSlide(container).getElementsByTagName("img") )[0]; expect(currentImg.getAttribute("src")).toEqual( "/img/react-slick/abstract02.jpg" ); }); it("should goto 2nd slide, even if input is number in string format", () => { const { container } = render(); fireEvent.change(container.getElementsByTagName("input")[0], { target: { value: "1" } }); let currentImg = Array.from( getActiveSlide(container).getElementsByTagName("img") )[0]; expect(currentImg.getAttribute("src")).toEqual( "/img/react-slick/abstract02.jpg" ); }); it("should remain at 1st slide", () => { const { container } = render(); fireEvent.change(container.getElementsByTagName("input")[0], { target: { value: 0 } }); let currentImg = Array.from( getActiveSlide(container).getElementsByTagName("img") )[0]; expect(currentImg.getAttribute("src")).toEqual( "/img/react-slick/abstract01.jpg" ); }); it.skip("should go to 1st slide from another 3rd slide", () => { // skipped because two simultaneous clicks dont' work with css and speed>0 const wrapper = render(); wrapper.find("input").simulate("change", { target: { value: 3 } }); wrapper.find("input").simulate("change", { target: { value: 0 } }); expect(wrapper.find(".slick-slide.slick-active img").props().src).toEqual( "/img/react-slick/abstract01.jpg" ); }); }); ================================================ FILE: examples/__tests__/UnevenSets.test.js ================================================ import React from "react"; import { render, fireEvent } from "@testing-library/react"; import UnevenSetsFinite from "../UnevenSetsFinite"; import UnevenSetsInfinite from "../UnevenSetsInfinite"; import { html as beautify_html } from "js-beautify"; import { getActiveSlides, clickNext, getActiveSlidesCount, getButtonsLength, getClonesCount, getCurrentSlide, getSlidesCount } from "../../test-utils"; describe("UnevenSets Finite", () => { test("Counting test", () => { const { container } = render(); let totalSlides = getSlidesCount(container); let clonedSlides = getClonesCount(container); let activeSlides = getActiveSlidesCount(container); let dots = getButtonsLength(container); expect(totalSlides).toEqual(6); expect(clonedSlides).toEqual(0); expect(activeSlides).toEqual(4); expect(dots).toEqual(2); // expect(beautify_html(toString(container))).toMatchSnapshot(); }); test("Positioning test", () => { const { container } = render(); let currentSlide = getCurrentSlide(container); let activeslides = getActiveSlides(container); expect(parseInt(currentSlide.getAttribute("data-index"))).toEqual(0); expect( Array.from(activeslides).map(slide => parseInt(slide.getAttribute("data-index")) ) ).toEqual([0, 1, 2, 3]); //expect(beautify_html(toString(container))).toMatchSnapshot(); }); test("Activity test", () => { const { container } = render(); let currentSlide = getCurrentSlide(container); let activeslides = getActiveSlides(container); expect(parseInt(currentSlide.getAttribute("data-index"))).toEqual(0); expect( Array.from(activeslides).map(slide => parseInt(slide.getAttribute("data-index")) ) ).toEqual([0, 1, 2, 3]); clickNext(container); currentSlide = getCurrentSlide(container); activeslides = getActiveSlides(container); expect(parseInt(currentSlide.getAttribute("data-index"))).toEqual(4); expect( Array.from(activeslides).map(slide => parseInt(slide.getAttribute("data-index")) ) ).toEqual([2, 3, 4, 5]); clickNext(container); currentSlide = getCurrentSlide(container); activeslides = getActiveSlides(container); expect(parseInt(currentSlide.getAttribute("data-index"))).toEqual(4); expect( Array.from(activeslides).map(slide => parseInt(slide.getAttribute("data-index")) ) ).toEqual([2, 3, 4, 5]); // expect(beautify_html(toString(container))).toMatchSnapshot(); }); }); describe("UnevenSets Infinite", () => { test("Counting test", () => { const { container } = render(); let totalSlides = getSlidesCount(container); let clonedSlides = getClonesCount(container); let activeSlides = getActiveSlidesCount(container); let dots = getButtonsLength(container); expect(totalSlides).toEqual(14); expect(clonedSlides).toEqual(8); expect(activeSlides).toEqual(4); expect(dots).toEqual(2); // expect(beautify_html(toString(container))).toMatchSnapshot(); }); test("Positioning test", () => { const { container } = render(); let currentSlide = getCurrentSlide(container); let activeslides = getActiveSlides(container); expect(parseInt(currentSlide.getAttribute("data-index"))).toEqual(0); expect( Array.from(activeslides).map(slide => parseInt(slide.getAttribute("data-index")) ) ).toEqual([0, 1, 2, 3]); // expect(beautify_html(toString(container))).toMatchSnapshot(); }); test("Activity test", () => { const { container } = render(); let currentSlide = getCurrentSlide(container); let activeslides = getActiveSlides(container); expect(parseInt(currentSlide.getAttribute("data-index"))).toEqual(0); expect( Array.from(activeslides).map(slide => parseInt(slide.getAttribute("data-index")) ) ).toEqual([0, 1, 2, 3]); clickNext(container); currentSlide = getCurrentSlide(container); activeslides = getActiveSlides(container); expect(parseInt(currentSlide.getAttribute("data-index"))).toEqual(4); expect( Array.from(activeslides).map(slide => parseInt(slide.getAttribute("data-index")) ) ).toEqual([4, 5, 6, 7]); // expect(beautify_html(toString(container))).toMatchSnapshot(); }); }); ================================================ FILE: examples/config.js ================================================ // export const baseUrl = // process.env.NODE_ENV === "production" // ? "https://s3.amazonaws.com/static.neostack.com/img/react-slick" // : "/img/react-slick"; export const baseUrl = "/img/react-slick"; ================================================ FILE: gulpfile.js ================================================ "use strict"; var gulp = require("gulp"); var del = require("del"); var rename = require("gulp-rename"); var webpack = require("webpack"); var WebpackDevServer = require("webpack-dev-server"); var assign = require("object-assign"); var opn = require("opn"); var UglifyJsPlugin = require("uglifyjs-webpack-plugin"); const DEV_PORT = process.env.DEV_PORT || 8080; gulp.task("clean", function() { return del(["./build/*"]); }); gulp.task("copy", function() { gulp.src("./docs/index.html").pipe(gulp.dest("./build")); gulp.src("./docs/docs.css").pipe(gulp.dest("./build")); gulp.src("./docs/slick.css").pipe(gulp.dest("./build")); gulp.src("./docs/slick-theme.css").pipe(gulp.dest("./build")); gulp.src("./docs/img/**/*").pipe(gulp.dest("./build/img")); gulp .src("./node_modules/slick-carousel/slick/fonts/*") .pipe(gulp.dest("./build/fonts")); return gulp .src("./node_modules/slick-carousel/slick/ajax-loader.gif") .pipe(gulp.dest("./build")); }); gulp.task("prepare-playwright", function() { // Copy files to src-jsx directory with jsx extension return gulp .src("./src/**/*.js") .pipe(rename({ extname: ".jsx" })) .pipe(gulp.dest("./src-jsx")); }); gulp.task( "watch", gulp.series(["copy"], function(done) { gulp.watch(["./docs/index.html"], gulp.parallel(["copy"])); gulp.watch(["./docs/docs.css"], gulp.parallel(["copy"])); gulp.watch(["./docs/slick.css"], gulp.parallel(["copy"])); gulp.watch(["./docs/slick-theme.css"], gulp.parallel(["copy"])); done(); }) ); gulp.task( "server", gulp.series(["watch", "copy"], function() { console.log("Start"); var myConfig = require("./webpack.config"); if (process.env.SINGLE_DEMO) { myConfig.entry = { "docs.js": "./docs/single-demo.js" }; } myConfig.plugins = myConfig.plugins.concat( new webpack.DefinePlugin({ "process.env": { NODE_ENV: JSON.stringify("dev_docs") } }) ); new WebpackDevServer(webpack(myConfig), { contentBase: "./build", hot: true, stats: { colors: true } }).listen(DEV_PORT, "0.0.0.0", function(err, result) { if (err) { console.log(err); } else { const server_url = `http://0.0.0.0:${DEV_PORT}`; console.log(`> Dev Server started at ${server_url}`); opn(server_url); } }); }) ); // gulp tasks for building dist files gulp.task("dist-clean", function() { return del(["./dist/*"]); }); var distConfig = require("./webpack.config.dist.js"); gulp.task("dist-unmin", function(cb) { var unminConfig = assign({}, distConfig); unminConfig.output.filename = "react-slick.js"; unminConfig.mode = "none"; return webpack(unminConfig, function(err, stat) { console.error(err); cb(); }); }); gulp.task("dist-min", function(cb) { var minConfig = assign({}, distConfig); minConfig.output.filename = "react-slick.min.js"; minConfig.plugins = minConfig.plugins.concat( new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: true, uglifyOptions: { warnings: false } }) ); return webpack(minConfig, function(err, stat) { console.error(err); cb(); }); }); gulp.task( "dist", gulp.series(["dist-clean", "dist-unmin", "dist-min"], function(done) { done(); }) ); gulp.task("default", gulp.series(["watch", "server"])); ================================================ FILE: jest.config.js ================================================ module.exports = { testEnvironment: "jsdom", setupFilesAfterEnv: ["/test-setup.js"], testPathIgnorePatterns: ["/node_modules/", "playwright-tests"], moduleNameMapper: { "react-slick": "/src/index.js" } }; ================================================ FILE: package.json ================================================ { "name": "react-slick", "version": "0.31.0", "description": " React port of slick carousel", "main": "./lib", "files": [ "dist", "lib" ], "scripts": { "start": "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": "NODE_OPTIONS=--openssl-legacy-provider npm run lib && NODE_OPTIONS=--openssl-legacy-provider gulp dist", "prepublishOnly": "npm run build", "lint": "eslint src", "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", "clear-jest": "jest --clearCache", "test-ct": "npm run prepare-playwright && playwright test -c playwright-ct.config.js", "test-clear": "jest --clearCache && rm -rf ./playwright/.cache", "prepare-playwright": "rm -rf ./src-jsx && gulp prepare-playwright" }, "author": "Kiran Abburi", "license": "MIT", "repository": { "type": "git", "url": "git+https://github.com/akiran/react-slick.git" }, "keywords": [ "slick", "carousel", "Image slider", "orbit", "slider", "react-component" ], "devDependencies": { "@babel/cli": "^7.0.0", "@babel/core": "^7.16.0", "@babel/eslint-parser": "^7.16.3", "@babel/plugin-proposal-class-properties": "^7.1.0", "@babel/polyfill": "^7.0.0", "@babel/preset-env": "^7.1.0", "@babel/preset-react": "^7.0.0", "@playwright/experimental-ct-react": "^1.49.1", "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^16.1.0", "@testing-library/user-event": "^14.3.0", "@types/node": "^22.10.2", "autoprefixer": "^7.1.2", "babel-core": "^7.0.0-bridge.0", "babel-jest": "^24.8.0", "babel-loader": "^8.0.4", "babel-preset-airbnb": "^2.1.1", "css-loader": "^2.1.1", "deepmerge": "^1.1.0", "del": "^2.2.2", "es5-shim": "^4.5.9", "eslint": "^8.4.1", "eslint-plugin-import": "^2.25.3", "eslint-plugin-react": "^7.27.1", "express": "^4.14.0", "foundation-apps": "^1.2.0", "gulp": "^4.0.0", "gulp-rename": "^2.0.0", "husky": "^0.14.3", "jest": "^28.1.3", "jest-environment-jsdom": "^28.1.3", "js-beautify": "^1.7.5", "json-loader": "^0.5.4", "lint-staged": "^12.1.2", "opn": "^5.4.0", "postcss-loader": "^1.3.3", "prettier": "^1.14.3", "raf": "^3.4.0", "react": "^19.0.0", "react-dom": "^19.0.0", "regenerator-runtime": "^0.14.1", "sinon": "^2.1.0", "slick-carousel": "^1.8.1", "style-loader": "^0.16.1", "uglifyjs-webpack-plugin": "^2.0.1", "webpack": "^4.21.0", "webpack-cli": "^3.1.2", "webpack-dev-server": "^3.1.9", "why-did-you-update": "^0.1.1" }, "dependencies": { "classnames": "^2.2.5", "json2mq": "^0.2.0", "lodash.debounce": "^4.0.8", "resize-observer-polyfill": "^1.5.0" }, "peerDependencies": { "react": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" }, "lint-staged": { "*.{js,json,md}": [ "prettier --write", "git add" ] }, "npmName": "react-slick", "npmFileMap": [ { "basePath": "/dist/", "files": [ "*.js" ] } ], "bugs": { "url": "https://github.com/akiran/react-slick/issues" }, "homepage": "https://react-slick.neostack.com", "collective": { "type": "opencollective", "url": "https://opencollective.com/react-slick", "logo": "https://opencollective.com/opencollective/logo.txt" } } ================================================ FILE: playwright/index.html ================================================ Testing Page
================================================ FILE: playwright/index.jsx ================================================ // Import styles, initialize component theme here. // import '../src/common.css'; ================================================ FILE: playwright-ct.config.js ================================================ // @ts-check const { defineConfig, devices } = require("@playwright/experimental-ct-react"); /** * @see https://playwright.dev/docs/test-configuration */ module.exports = defineConfig({ testDir: "./playwright-tests", // testDir: "./tests-out", /* The base directory, relative to the config file, for snapshot files created with toMatchSnapshot and toHaveScreenshot. */ snapshotDir: "./__snapshots__", /* Maximum time one test can run for. */ timeout: 10 * 1000, /* Run tests in files in parallel */ fullyParallel: true, /* Fail the build on CI if you accidentally left test.only in the source code. */ forbidOnly: !!process.env.CI, /* Retry on CI only */ retries: process.env.CI ? 2 : 0, /* Opt out of parallel tests on CI. */ workers: process.env.CI ? 1 : undefined, /* Reporter to use. See https://playwright.dev/docs/test-reporters */ reporter: "html", /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ use: { /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ trace: "on-first-retry", /* Port to use for Playwright component endpoint. */ ctPort: 3100 }, /* Configure projects for major browsers */ projects: [ { name: "chromium", use: { ...devices["Desktop Chrome"] } } // { // name: "firefox", // use: { ...devices["Desktop Firefox"] } // }, // { // name: "webkit", // use: { ...devices["Desktop Safari"] } // } ] }); ================================================ FILE: playwright-tests/features/responsive/responsive.spec.tsx ================================================ import { test, expect } from "@playwright/experimental-ct-react"; import Responsive from "./responsive.story"; test.use({ viewport: { width: 1200, height: 500 } }); async function activeSlidesCount(component) { return await component.locator(".slick-slide.slick-active").count(); } test("Responsive settings", async ({ mount, page }) => { const component = await mount(); await expect(await activeSlidesCount(component)).toEqual(4); await page.setViewportSize({ width: 1000, height: 500 }); await page.waitForTimeout(100); await expect(await activeSlidesCount(component)).toEqual(3); await page.setViewportSize({ width: 600, height: 500 }); await page.waitForTimeout(100); await expect(await activeSlidesCount(component)).toEqual(2); await page.setViewportSize({ width: 400, height: 500 }); await page.waitForTimeout(100); await expect(await activeSlidesCount(component)).toEqual(1); await page.setViewportSize({ width: 600, height: 500 }); await page.waitForTimeout(100); await expect(await activeSlidesCount(component)).toEqual(2); await page.setViewportSize({ width: 1000, height: 500 }); await page.waitForTimeout(100); await expect(await activeSlidesCount(component)).toEqual(3); await page.setViewportSize({ width: 1500, height: 500 }); await page.waitForTimeout(100); await expect(await activeSlidesCount(component)).toEqual(4); }); ================================================ FILE: playwright-tests/features/responsive/responsive.story.tsx ================================================ import React from "react"; import Slider from "../../../src-jsx"; 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 } }, { breakpoint: 600, settings: { slidesToShow: 2, slidesToScroll: 2, initialSlide: 2 } }, { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1 } } ] }; return (

1

2

3

4

5

6

7

8
); } export default Responsive; ================================================ FILE: playwright-tests/regression/fix-1930/fix-1930.spec.tsx ================================================ // Test fix of #1930: Extra height of slider in vertical mode when number of slides is less than or equal to slidesToShow import { test, expect } from "@playwright/experimental-ct-react"; import { VerticalModeFinite, VerticalModeInfinite } from "./fix-1930.story"; test.use({ viewport: { width: 500, height: 500 } }); test("height check in vertical mode when slides < slidesToShow and finite", async ({ mount }) => { const component = await mount(); const track = component.locator(".slick-track").first(); const box = await track.boundingBox(); await expect(box.height).toEqual(200); }); test("height check in vertical mode when slides < slidesToShow and infinite", async ({ mount }) => { const component = await mount(); const track = component.locator(".slick-track").first(); const box = await track.boundingBox(); await expect(box.height).toEqual(200); }); ================================================ FILE: playwright-tests/regression/fix-1930/fix-1930.story.tsx ================================================ import Slider from "../../../src-jsx"; import React from "react"; export function VerticalModeFinite() { const settings = { dots: true, infinite: false, vertical: true, slidesToShow: 3 }; return (
1
2
 ); } export function VerticalModeInfinite() { const settings = { dots: true, infinite: true, vertical: true, slidesToShow: 3 }; return (
1
2
 ); } ================================================ FILE: playwright-tests/sample/sample.spec.tsx ================================================ //Imports the test and expect functions from the Playwright ct-react module import { test, expect } from "@playwright/experimental-ct-react"; //Imports the App component to test from the relative ../App path import App from "./sample.story"; //Configures the viewport to a 500x500 size test.use({ viewport: { width: 500, height: 500 } }); //Starts a test case named "should work" which will run asynchronously, //mount function binding is destructured from test parameter test("Sample playwright test", async ({ mount }) => { //Uses mount() to instantiate the component in isolation const component = await mount(); //Asserts that component contains expected "Learn React" text on it verifying basic render. await expect(component).toContainText("Learn React"); }); ================================================ FILE: playwright-tests/sample/sample.story.tsx ================================================ import React from "react"; export default function App() { return
Learn React
; } ================================================ FILE: src/arrows.js ================================================ "use strict"; import React from "react"; import classnames from "classnames"; import { canGoNext } from "./utils/innerSliderUtils"; export class PrevArrow extends React.PureComponent { clickHandler(options, e) { if (e) { e.preventDefault(); } this.props.clickHandler(options, e); } render() { let prevClasses = { "slick-arrow": true, "slick-prev": true }; let prevHandler = this.clickHandler.bind(this, { message: "previous" }); if ( !this.props.infinite && (this.props.currentSlide === 0 || this.props.slideCount <= this.props.slidesToShow) ) { prevClasses["slick-disabled"] = true; prevHandler = null; } let prevArrowProps = { key: "0", "data-role": "none", className: classnames(prevClasses), style: { display: "block" }, onClick: prevHandler }; let customProps = { currentSlide: this.props.currentSlide, slideCount: this.props.slideCount }; let prevArrow; if (this.props.prevArrow) { prevArrow = React.cloneElement(this.props.prevArrow, { ...prevArrowProps, ...customProps }); } else { prevArrow = ( ); } return prevArrow; } } export class NextArrow extends React.PureComponent { clickHandler(options, e) { if (e) { e.preventDefault(); } this.props.clickHandler(options, e); } render() { let nextClasses = { "slick-arrow": true, "slick-next": true }; let nextHandler = this.clickHandler.bind(this, { message: "next" }); if (!canGoNext(this.props)) { nextClasses["slick-disabled"] = true; nextHandler = null; } let nextArrowProps = { key: "1", "data-role": "none", className: classnames(nextClasses), style: { display: "block" }, onClick: nextHandler }; let customProps = { currentSlide: this.props.currentSlide, slideCount: this.props.slideCount }; let nextArrow; if (this.props.nextArrow) { nextArrow = React.cloneElement(this.props.nextArrow, { ...nextArrowProps, ...customProps }); } else { nextArrow = ( ); } return nextArrow; } } ================================================ FILE: src/default-props.js ================================================ import React from "react"; let defaultProps = { accessibility: true, adaptiveHeight: false, afterChange: null, appendDots: dots =>
    {dots}
, arrows: true, autoplay: false, autoplaySpeed: 3000, beforeChange: null, centerMode: false, centerPadding: "50px", className: "", cssEase: "ease", customPaging: i => , dots: false, dotsClass: "slick-dots", draggable: true, easing: "linear", edgeFriction: 0.35, fade: false, focusOnSelect: false, infinite: true, initialSlide: 0, lazyLoad: null, nextArrow: null, onEdge: null, onInit: null, onLazyLoadError: null, onReInit: null, pauseOnDotsHover: false, pauseOnFocus: false, pauseOnHover: true, prevArrow: null, responsive: null, rows: 1, rtl: false, slide: "div", slidesPerRow: 1, slidesToScroll: 1, slidesToShow: 1, speed: 500, swipe: true, swipeEvent: null, swipeToSlide: false, touchMove: true, touchThreshold: 5, useCSS: true, useTransform: true, variableWidth: false, vertical: false, verticalSwiping: false, waitForAnimate: true, asNavFor: null, unslick: false }; export default defaultProps; ================================================ FILE: src/dots.js ================================================ "use strict"; import React from "react"; import classnames from "classnames"; import { clamp } from "./utils/innerSliderUtils"; const getDotCount = spec => { let dots; if (spec.infinite) { dots = Math.ceil(spec.slideCount / spec.slidesToScroll); } else { dots = Math.ceil((spec.slideCount - spec.slidesToShow) / spec.slidesToScroll) + 1; } return dots; }; export class Dots extends React.PureComponent { clickHandler(options, e) { // In Autoplay the focus stays on clicked button even after transition // to next slide. That only goes away by click somewhere outside e.preventDefault(); this.props.clickHandler(options); } render() { const { onMouseEnter, onMouseOver, onMouseLeave, infinite, slidesToScroll, slidesToShow, slideCount, currentSlide } = this.props; let dotCount = getDotCount({ slideCount, slidesToScroll, slidesToShow, infinite }); const mouseEvents = { onMouseEnter, onMouseOver, onMouseLeave }; let dots = []; for (let i = 0; i < dotCount; i++) { let _rightBound = (i + 1) * slidesToScroll - 1; let rightBound = infinite ? _rightBound : clamp(_rightBound, 0, slideCount - 1); let _leftBound = rightBound - (slidesToScroll - 1); let leftBound = infinite ? _leftBound : clamp(_leftBound, 0, slideCount - 1); let className = classnames({ "slick-active": infinite ? currentSlide >= leftBound && currentSlide <= rightBound : currentSlide === leftBound }); let dotOptions = { message: "dots", index: i, slidesToScroll, currentSlide }; let onClick = this.clickHandler.bind(this, dotOptions); dots = dots.concat(
  • {React.cloneElement(this.props.customPaging(i), { onClick })}
    • ); } return React.cloneElement(this.props.appendDots(dots), { className: this.props.dotsClass, ...mouseEvents }); } } ================================================ FILE: src/index.js ================================================ import Slider from "./slider"; export default Slider; ================================================ FILE: src/initial-state.js ================================================ const initialState = { animating: false, autoplaying: null, currentDirection: 0, currentLeft: null, currentSlide: 0, direction: 1, dragging: false, edgeDragged: false, initialized: false, lazyLoadedList: [], listHeight: null, listWidth: null, scrolling: false, slideCount: null, slideHeight: null, slideWidth: null, swipeLeft: null, swiped: false, // used by swipeEvent. differentites between touch and swipe. swiping: false, touchObject: { startX: 0, startY: 0, curX: 0, curY: 0 }, trackStyle: {}, trackWidth: 0, targetSlide: 0 }; export default initialState; ================================================ FILE: src/inner-slider.js ================================================ "use strict"; import React from "react"; import initialState from "./initial-state"; import debounce from "lodash.debounce"; import classnames from "classnames"; import { getOnDemandLazySlides, extractObject, initializedState, getHeight, canGoNext, slideHandler, changeSlide, keyHandler, swipeStart, swipeMove, swipeEnd, getPreClones, getPostClones, getTrackLeft, getTrackCSS } from "./utils/innerSliderUtils"; import { Track } from "./track"; import { Dots } from "./dots"; import { PrevArrow, NextArrow } from "./arrows"; import ResizeObserver from "resize-observer-polyfill"; export class InnerSlider extends React.Component { constructor(props) { super(props); this.list = null; this.track = null; this.state = { ...initialState, currentSlide: this.props.initialSlide, targetSlide: this.props.initialSlide ? this.props.initialSlide : 0, slideCount: React.Children.count(this.props.children) }; this.callbackTimers = []; this.clickable = true; this.debouncedResize = null; const ssrState = this.ssrInit(); this.state = { ...this.state, ...ssrState }; } listRefHandler = ref => (this.list = ref); trackRefHandler = ref => (this.track = ref); adaptHeight = () => { if (this.props.adaptiveHeight && this.list) { const elem = this.list.querySelector( `[data-index="${this.state.currentSlide}"]` ); this.list.style.height = getHeight(elem) + "px"; } }; componentDidMount = () => { this.props.onInit && this.props.onInit(); if (this.props.lazyLoad) { let slidesToLoad = getOnDemandLazySlides({ ...this.props, ...this.state }); if (slidesToLoad.length > 0) { this.setState(prevState => ({ lazyLoadedList: prevState.lazyLoadedList.concat(slidesToLoad) })); if (this.props.onLazyLoad) { this.props.onLazyLoad(slidesToLoad); } } } let spec = { listRef: this.list, trackRef: this.track, ...this.props }; this.updateState(spec, true, () => { this.adaptHeight(); this.props.autoplay && this.autoPlay("update"); }); if (this.props.lazyLoad === "progressive") { this.lazyLoadTimer = setInterval(this.progressiveLazyLoad, 1000); } this.ro = new ResizeObserver(() => { if (this.state.animating) { this.onWindowResized(false); // don't set trackStyle hence don't break animation this.callbackTimers.push( setTimeout(() => this.onWindowResized(), this.props.speed) ); } else { this.onWindowResized(); } }); this.ro.observe(this.list); document.querySelectorAll && Array.prototype.forEach.call( document.querySelectorAll(".slick-slide"), slide => { slide.onfocus = this.props.pauseOnFocus ? this.onSlideFocus : null; slide.onblur = this.props.pauseOnFocus ? this.onSlideBlur : null; } ); if (window.addEventListener) { window.addEventListener("resize", this.onWindowResized); } else { window.attachEvent("onresize", this.onWindowResized); } }; componentWillUnmount = () => { if (this.animationEndCallback) { clearTimeout(this.animationEndCallback); } if (this.lazyLoadTimer) { clearInterval(this.lazyLoadTimer); } if (this.callbackTimers.length) { this.callbackTimers.forEach(timer => clearTimeout(timer)); this.callbackTimers = []; } if (window.addEventListener) { window.removeEventListener("resize", this.onWindowResized); } else { window.detachEvent("onresize", this.onWindowResized); } if (this.autoplayTimer) { clearInterval(this.autoplayTimer); } this.ro.disconnect(); }; didPropsChange(prevProps) { let setTrackStyle = false; for (let key of Object.keys(this.props)) { if (!prevProps.hasOwnProperty(key)) { setTrackStyle = true; break; } if ( typeof prevProps[key] === "object" || typeof prevProps[key] === "function" || isNaN(prevProps[key]) ) { continue; } if (prevProps[key] !== this.props[key]) { setTrackStyle = true; break; } } return ( setTrackStyle || React.Children.count(this.props.children) !== React.Children.count(prevProps.children) ); } componentDidUpdate = prevProps => { this.checkImagesLoad(); this.props.onReInit && this.props.onReInit(); if (this.props.lazyLoad) { let slidesToLoad = getOnDemandLazySlides({ ...this.props, ...this.state }); if (slidesToLoad.length > 0) { this.setState(prevState => ({ lazyLoadedList: prevState.lazyLoadedList.concat(slidesToLoad) })); if (this.props.onLazyLoad) { this.props.onLazyLoad(slidesToLoad); } } } // if (this.props.onLazyLoad) { // this.props.onLazyLoad([leftMostSlide]) // } this.adaptHeight(); let spec = { listRef: this.list, trackRef: this.track, ...this.props, ...this.state }; const setTrackStyle = this.didPropsChange(prevProps); setTrackStyle && this.updateState(spec, setTrackStyle, () => { if ( this.state.currentSlide >= React.Children.count(this.props.children) ) { this.changeSlide({ message: "index", index: React.Children.count(this.props.children) - this.props.slidesToShow, currentSlide: this.state.currentSlide }); } if (this.props.autoplay) { this.autoPlay("update"); } else { this.pause("paused"); } }); }; onWindowResized = setTrackStyle => { if (this.debouncedResize) this.debouncedResize.cancel(); this.debouncedResize = debounce(() => this.resizeWindow(setTrackStyle), 50); this.debouncedResize(); }; resizeWindow = (setTrackStyle = true) => { const isTrackMounted = Boolean(this.track && this.track.node); // prevent warning: setting state on unmounted component (server side rendering) if (!isTrackMounted) return; let spec = { listRef: this.list, trackRef: this.track, ...this.props, ...this.state }; this.updateState(spec, setTrackStyle, () => { if (this.props.autoplay) this.autoPlay("update"); else this.pause("paused"); }); // animating state should be cleared while resizing, otherwise autoplay stops working this.setState({ animating: false }); clearTimeout(this.animationEndCallback); delete this.animationEndCallback; }; updateState = (spec, setTrackStyle, callback) => { let updatedState = initializedState(spec); spec = { ...spec, ...updatedState, slideIndex: updatedState.currentSlide }; let targetLeft = getTrackLeft(spec); spec = { ...spec, left: targetLeft }; let trackStyle = getTrackCSS(spec); if ( setTrackStyle || React.Children.count(this.props.children) !== React.Children.count(spec.children) ) { updatedState["trackStyle"] = trackStyle; } this.setState(updatedState, callback); }; ssrInit = () => { if (this.props.variableWidth) { let trackWidth = 0, trackLeft = 0; let childrenWidths = []; let preClones = getPreClones({ ...this.props, ...this.state, slideCount: this.props.children.length }); let postClones = getPostClones({ ...this.props, ...this.state, slideCount: this.props.children.length }); this.props.children.forEach(child => { childrenWidths.push(child.props.style.width); trackWidth += child.props.style.width; }); for (let i = 0; i < preClones; i++) { trackLeft += childrenWidths[childrenWidths.length - 1 - i]; trackWidth += childrenWidths[childrenWidths.length - 1 - i]; } for (let i = 0; i < postClones; i++) { trackWidth += childrenWidths[i]; } for (let i = 0; i < this.state.currentSlide; i++) { trackLeft += childrenWidths[i]; } let trackStyle = { width: trackWidth + "px", left: -trackLeft + "px" }; if (this.props.centerMode) { let currentWidth = `${childrenWidths[this.state.currentSlide]}px`; trackStyle.left = `calc(${trackStyle.left} + (100% - ${currentWidth}) / 2 ) `; } return { trackStyle }; } let childrenCount = React.Children.count(this.props.children); const spec = { ...this.props, ...this.state, slideCount: childrenCount }; let slideCount = getPreClones(spec) + getPostClones(spec) + childrenCount; let trackWidth = (100 / this.props.slidesToShow) * slideCount; let slideWidth = 100 / slideCount; let trackLeft = (-slideWidth * (getPreClones(spec) + this.state.currentSlide) * trackWidth) / 100; if (this.props.centerMode) { trackLeft += (100 - (slideWidth * trackWidth) / 100) / 2; } let trackStyle = { width: trackWidth + "%", left: trackLeft + "%" }; return { slideWidth: slideWidth + "%", trackStyle: trackStyle }; }; checkImagesLoad = () => { let images = (this.list && this.list.querySelectorAll && this.list.querySelectorAll(".slick-slide img")) || []; let imagesCount = images.length, loadedCount = 0; Array.prototype.forEach.call(images, image => { const handler = () => ++loadedCount && loadedCount >= imagesCount && this.onWindowResized(); if (!image.onclick) { image.onclick = () => image.parentNode.focus(); } else { const prevClickHandler = image.onclick; image.onclick = e => { prevClickHandler(e); image.parentNode.focus(); }; } if (!image.onload) { if (this.props.lazyLoad) { image.onload = () => { this.adaptHeight(); this.callbackTimers.push( setTimeout(this.onWindowResized, this.props.speed) ); }; } else { image.onload = handler; image.onerror = () => { handler(); this.props.onLazyLoadError && this.props.onLazyLoadError(); }; } } }); }; progressiveLazyLoad = () => { let slidesToLoad = []; const spec = { ...this.props, ...this.state }; for ( let index = this.state.currentSlide; index < this.state.slideCount + getPostClones(spec); index++ ) { if (this.state.lazyLoadedList.indexOf(index) < 0) { slidesToLoad.push(index); break; } } for ( let index = this.state.currentSlide - 1; index >= -getPreClones(spec); index-- ) { if (this.state.lazyLoadedList.indexOf(index) < 0) { slidesToLoad.push(index); break; } } if (slidesToLoad.length > 0) { this.setState(state => ({ lazyLoadedList: state.lazyLoadedList.concat(slidesToLoad) })); if (this.props.onLazyLoad) { this.props.onLazyLoad(slidesToLoad); } } else { if (this.lazyLoadTimer) { clearInterval(this.lazyLoadTimer); delete this.lazyLoadTimer; } } }; slideHandler = (index, dontAnimate = false) => { const { asNavFor, beforeChange, onLazyLoad, speed, afterChange } = this.props; // capture currentslide before state is updated const currentSlide = this.state.currentSlide; let { state, nextState } = slideHandler({ index, ...this.props, ...this.state, trackRef: this.track, useCSS: this.props.useCSS && !dontAnimate }); if (!state) return; beforeChange && beforeChange(currentSlide, state.currentSlide); let slidesToLoad = state.lazyLoadedList.filter( value => this.state.lazyLoadedList.indexOf(value) < 0 ); onLazyLoad && slidesToLoad.length > 0 && onLazyLoad(slidesToLoad); if (!this.props.waitForAnimate && this.animationEndCallback) { clearTimeout(this.animationEndCallback); afterChange && afterChange(currentSlide); delete this.animationEndCallback; } this.setState(state, () => { // asNavForIndex check is to avoid recursive calls of slideHandler in waitForAnimate=false mode if (asNavFor && this.asNavForIndex !== index) { this.asNavForIndex = index; asNavFor.innerSlider.slideHandler(index); } if (!nextState) return; this.animationEndCallback = setTimeout(() => { const { animating, ...firstBatch } = nextState; this.setState(firstBatch, () => { this.callbackTimers.push( setTimeout(() => this.setState({ animating }), 10) ); afterChange && afterChange(state.currentSlide); delete this.animationEndCallback; }); }, speed); }); }; changeSlide = (options, dontAnimate = false) => { const spec = { ...this.props, ...this.state }; let targetSlide = changeSlide(spec, options); if (targetSlide !== 0 && !targetSlide) return; if (dontAnimate === true) { this.slideHandler(targetSlide, dontAnimate); } else { this.slideHandler(targetSlide); } this.props.autoplay && this.autoPlay("update"); if (this.props.focusOnSelect) { const nodes = this.list.querySelectorAll(".slick-current"); nodes[0] && nodes[0].focus(); } }; clickHandler = e => { if (this.clickable === false) { e.stopPropagation(); e.preventDefault(); } this.clickable = true; }; keyHandler = e => { let dir = keyHandler(e, this.props.accessibility, this.props.rtl); dir !== "" && this.changeSlide({ message: dir }); }; selectHandler = options => { this.changeSlide(options); }; disableBodyScroll = () => { const preventDefault = e => { e = e || window.event; if (e.preventDefault) e.preventDefault(); e.returnValue = false; }; window.ontouchmove = preventDefault; }; enableBodyScroll = () => { window.ontouchmove = null; }; swipeStart = e => { if (this.props.verticalSwiping) { this.disableBodyScroll(); } let state = swipeStart(e, this.props.swipe, this.props.draggable); state !== "" && this.setState(state); }; swipeMove = e => { let state = swipeMove(e, { ...this.props, ...this.state, trackRef: this.track, listRef: this.list, slideIndex: this.state.currentSlide }); if (!state) return; if (state["swiping"]) { this.clickable = false; } this.setState(state); }; swipeEnd = e => { let state = swipeEnd(e, { ...this.props, ...this.state, trackRef: this.track, listRef: this.list, slideIndex: this.state.currentSlide }); if (!state) return; let triggerSlideHandler = state["triggerSlideHandler"]; delete state["triggerSlideHandler"]; this.setState(state); if (triggerSlideHandler === undefined) return; this.slideHandler(triggerSlideHandler); if (this.props.verticalSwiping) { this.enableBodyScroll(); } }; touchEnd = e => { this.swipeEnd(e); this.clickable = true; }; slickPrev = () => { // this and fellow methods are wrapped in setTimeout // to make sure initialize setState has happened before // any of such methods are called this.callbackTimers.push( setTimeout(() => this.changeSlide({ message: "previous" }), 0) ); }; slickNext = () => { this.callbackTimers.push( setTimeout(() => this.changeSlide({ message: "next" }), 0) ); }; slickGoTo = (slide, dontAnimate = false) => { slide = Number(slide); if (isNaN(slide)) return ""; this.callbackTimers.push( setTimeout( () => this.changeSlide( { message: "index", index: slide, currentSlide: this.state.currentSlide }, dontAnimate ), 0 ) ); }; play = () => { var nextIndex; if (this.props.rtl) { nextIndex = this.state.currentSlide - this.props.slidesToScroll; } else { if (canGoNext({ ...this.props, ...this.state })) { nextIndex = this.state.currentSlide + this.props.slidesToScroll; } else { return false; } } this.slideHandler(nextIndex); }; autoPlay = playType => { if (this.autoplayTimer) { clearInterval(this.autoplayTimer); } const autoplaying = this.state.autoplaying; if (playType === "update") { if ( autoplaying === "hovered" || autoplaying === "focused" || autoplaying === "paused" ) { return; } } else if (playType === "leave") { if (autoplaying === "paused" || autoplaying === "focused") { return; } } else if (playType === "blur") { if (autoplaying === "paused" || autoplaying === "hovered") { return; } } this.autoplayTimer = setInterval(this.play, this.props.autoplaySpeed + 50); this.setState({ autoplaying: "playing" }); }; pause = pauseType => { if (this.autoplayTimer) { clearInterval(this.autoplayTimer); this.autoplayTimer = null; } const autoplaying = this.state.autoplaying; if (pauseType === "paused") { this.setState({ autoplaying: "paused" }); } else if (pauseType === "focused") { if (autoplaying === "hovered" || autoplaying === "playing") { this.setState({ autoplaying: "focused" }); } } else { // pauseType is 'hovered' if (autoplaying === "playing") { this.setState({ autoplaying: "hovered" }); } } }; onDotsOver = () => this.props.autoplay && this.pause("hovered"); onDotsLeave = () => this.props.autoplay && this.state.autoplaying === "hovered" && this.autoPlay("leave"); onTrackOver = () => this.props.autoplay && this.pause("hovered"); onTrackLeave = () => this.props.autoplay && this.state.autoplaying === "hovered" && this.autoPlay("leave"); onSlideFocus = () => this.props.autoplay && this.pause("focused"); onSlideBlur = () => this.props.autoplay && this.state.autoplaying === "focused" && this.autoPlay("blur"); render = () => { var className = classnames("slick-slider", this.props.className, { "slick-vertical": this.props.vertical, "slick-initialized": true }); let spec = { ...this.props, ...this.state }; let trackProps = extractObject(spec, [ "fade", "cssEase", "speed", "infinite", "centerMode", "focusOnSelect", "currentSlide", "lazyLoad", "lazyLoadedList", "rtl", "slideWidth", "slideHeight", "listHeight", "vertical", "slidesToShow", "slidesToScroll", "slideCount", "trackStyle", "variableWidth", "unslick", "centerPadding", "targetSlide", "useCSS" ]); const { pauseOnHover } = this.props; trackProps = { ...trackProps, onMouseEnter: pauseOnHover ? this.onTrackOver : null, onMouseLeave: pauseOnHover ? this.onTrackLeave : null, onMouseOver: pauseOnHover ? this.onTrackOver : null, focusOnSelect: this.props.focusOnSelect && this.clickable ? this.selectHandler : null }; var dots; if ( this.props.dots === true && this.state.slideCount >= this.props.slidesToShow ) { let dotProps = extractObject(spec, [ "dotsClass", "slideCount", "slidesToShow", "currentSlide", "slidesToScroll", "clickHandler", "children", "customPaging", "infinite", "appendDots" ]); const { pauseOnDotsHover } = this.props; dotProps = { ...dotProps, clickHandler: this.changeSlide, onMouseEnter: pauseOnDotsHover ? this.onDotsLeave : null, onMouseOver: pauseOnDotsHover ? this.onDotsOver : null, onMouseLeave: pauseOnDotsHover ? this.onDotsLeave : null }; dots = ; } var prevArrow, nextArrow; let arrowProps = extractObject(spec, [ "infinite", "centerMode", "currentSlide", "slideCount", "slidesToShow", "prevArrow", "nextArrow" ]); arrowProps.clickHandler = this.changeSlide; if (this.props.arrows) { prevArrow = ; nextArrow = ; } var verticalHeightStyle = null; if (this.props.vertical) { verticalHeightStyle = { height: this.state.listHeight }; } var centerPaddingStyle = null; if (this.props.vertical === false) { if (this.props.centerMode === true) { centerPaddingStyle = { padding: "0px " + this.props.centerPadding }; } } else { if (this.props.centerMode === true) { centerPaddingStyle = { padding: this.props.centerPadding + " 0px" }; } } const listStyle = { ...verticalHeightStyle, ...centerPaddingStyle }; const touchMove = this.props.touchMove; let listProps = { className: "slick-list", style: listStyle, onClick: this.clickHandler, onMouseDown: touchMove ? this.swipeStart : null, onMouseMove: this.state.dragging && touchMove ? this.swipeMove : null, onMouseUp: touchMove ? this.swipeEnd : null, onMouseLeave: this.state.dragging && touchMove ? this.swipeEnd : null, onTouchStart: touchMove ? this.swipeStart : null, onTouchMove: this.state.dragging && touchMove ? this.swipeMove : null, onTouchEnd: touchMove ? this.touchEnd : null, onTouchCancel: this.state.dragging && touchMove ? this.swipeEnd : null, onKeyDown: this.props.accessibility ? this.keyHandler : null }; let innerSliderProps = { className: className, dir: "ltr", style: this.props.style }; if (this.props.unslick) { listProps = { className: "slick-list" }; innerSliderProps = { className, style: this.props.style }; } return (
    {!this.props.unslick ? prevArrow : ""}
    {this.props.children}
    {!this.props.unslick ? nextArrow : ""} {!this.props.unslick ? dots : ""}
    ); }; } ================================================ FILE: src/slider.js ================================================ "use strict"; import React from "react"; import { InnerSlider } from "./inner-slider"; import json2mq from "json2mq"; import defaultProps from "./default-props"; import { canUseDOM, filterSettings } from "./utils/innerSliderUtils"; export default class Slider extends React.Component { constructor(props) { super(props); this.state = { breakpoint: null }; this._responsiveMediaHandlers = []; } innerSliderRefHandler = ref => (this.innerSlider = ref); media(query, handler) { // javascript handler for css media query const mql = window.matchMedia(query); const listener = ({ matches }) => { if (matches) { handler(); } }; mql.addListener(listener); this._responsiveMediaHandlers.push({ mql, query, listener }); } // handles responsive breakpoints componentDidMount() { // performance monitoring //if (process.env.NODE_ENV !== 'production') { //const { whyDidYouUpdate } = require('why-did-you-update') //whyDidYouUpdate(React) //} if (this.props.responsive) { let breakpoints = this.props.responsive.map( breakpt => breakpt.breakpoint ); // sort them in increasing order of their numerical value breakpoints.sort((x, y) => x - y); breakpoints.forEach((breakpoint, index) => { // media query for each breakpoint let bQuery; if (index === 0) { bQuery = json2mq({ minWidth: 0, maxWidth: breakpoint }); } else { bQuery = json2mq({ minWidth: breakpoints[index - 1] + 1, maxWidth: breakpoint }); } // when not using server side rendering canUseDOM() && this.media(bQuery, () => { this.setState({ breakpoint: breakpoint }); }); }); // Register media query for full screen. Need to support resize from small to large // convert javascript object to media query string let query = json2mq({ minWidth: breakpoints.slice(-1)[0] }); canUseDOM() && this.media(query, () => { this.setState({ breakpoint: null }); }); } } componentWillUnmount() { this._responsiveMediaHandlers.forEach(function(obj) { obj.mql.removeListener(obj.listener); }); } slickPrev = () => this.innerSlider.slickPrev(); slickNext = () => this.innerSlider.slickNext(); slickGoTo = (slide, dontAnimate = false) => this.innerSlider.slickGoTo(slide, dontAnimate); slickPause = () => this.innerSlider.pause("paused"); slickPlay = () => this.innerSlider.autoPlay("play"); render() { var settings; var newProps; if (this.state.breakpoint) { newProps = this.props.responsive.filter( resp => resp.breakpoint === this.state.breakpoint ); settings = newProps[0].settings === "unslick" ? "unslick" : { ...defaultProps, ...this.props, ...newProps[0].settings }; } else { settings = { ...defaultProps, ...this.props }; } // force scrolling by one if centerMode is on if (settings.centerMode) { if ( settings.slidesToScroll > 1 && process.env.NODE_ENV !== "production" ) { console.warn( `slidesToScroll should be equal to 1 in centerMode, you are using ${settings.slidesToScroll}` ); } settings.slidesToScroll = 1; } // force showing one slide and scrolling by one if the fade mode is on if (settings.fade) { if (settings.slidesToShow > 1 && process.env.NODE_ENV !== "production") { console.warn( `slidesToShow should be equal to 1 when fade is true, you're using ${settings.slidesToShow}` ); } if ( settings.slidesToScroll > 1 && process.env.NODE_ENV !== "production" ) { console.warn( `slidesToScroll should be equal to 1 when fade is true, you're using ${settings.slidesToScroll}` ); } settings.slidesToShow = 1; settings.slidesToScroll = 1; } // makes sure that children is an array, even when there is only 1 child let children = React.Children.toArray(this.props.children); // Children may contain false or null, so we should filter them // children may also contain string filled with spaces (in certain cases where we use jsx strings) children = children.filter(child => { if (typeof child === "string") { return !!child.trim(); } return !!child; }); // rows and slidesPerRow logic is handled here if ( settings.variableWidth && (settings.rows > 1 || settings.slidesPerRow > 1) ) { console.warn( `variableWidth is not supported in case of rows > 1 or slidesPerRow > 1` ); settings.variableWidth = false; } let newChildren = []; let currentWidth = null; for ( let i = 0; i < children.length; i += settings.rows * settings.slidesPerRow ) { let newSlide = []; for ( let j = i; j < i + settings.rows * settings.slidesPerRow; j += settings.slidesPerRow ) { let row = []; for (let k = j; k < j + settings.slidesPerRow; k += 1) { if (settings.variableWidth && children[k].props.style) { currentWidth = children[k].props.style.width; } if (k >= children.length) break; row.push( React.cloneElement(children[k], { key: 100 * i + 10 * j + k, tabIndex: -1, style: { width: `${100 / settings.slidesPerRow}%`, display: "inline-block" } }) ); } newSlide.push(
    {row}
    ); } if (settings.variableWidth) { newChildren.push(
    {newSlide}
    ); } else { newChildren.push(
    {newSlide}
    ); } } if (settings === "unslick") { const className = "regular slider " + (this.props.className || ""); return
    {children}
    ; } else if (newChildren.length <= settings.slidesToShow) { settings.unslick = true; } return ( {newChildren} ); } } ================================================ FILE: src/track.js ================================================ "use strict"; import React from "react"; import classnames from "classnames"; import { lazyStartIndex, lazyEndIndex, getPreClones, getPostClones } from "./utils/innerSliderUtils"; // given specifications/props for a slide, fetch all the classes that need to be applied to the slide const getSlideClasses = spec => { let slickActive, slickCenter, slickCloned; let centerOffset, index; if (spec.rtl) { index = spec.slideCount - 1 - spec.index; } else { index = spec.index; } slickCloned = index < 0 || index >= spec.slideCount; if (spec.centerMode) { centerOffset = Math.floor(spec.slidesToShow / 2); slickCenter = (index - spec.currentSlide) % spec.slideCount === 0; if ( index > spec.currentSlide - centerOffset - 1 && index <= spec.currentSlide + centerOffset ) { slickActive = true; } } else { slickActive = spec.currentSlide <= index && index < spec.currentSlide + spec.slidesToShow; } let focusedSlide; if (spec.targetSlide < 0) { focusedSlide = spec.targetSlide + spec.slideCount; } else if (spec.targetSlide >= spec.slideCount) { focusedSlide = spec.targetSlide - spec.slideCount; } else { focusedSlide = spec.targetSlide; } let slickCurrent = index === focusedSlide; return { "slick-slide": true, "slick-active": slickActive, "slick-center": slickCenter, "slick-cloned": slickCloned, "slick-current": slickCurrent // dubious in case of RTL }; }; const getSlideStyle = spec => { let style = {}; if (spec.variableWidth === undefined || spec.variableWidth === false) { style.width = spec.slideWidth; } if (spec.fade) { style.position = "relative"; if (spec.vertical) { style.top = -spec.index * parseInt(spec.slideHeight); } else { style.left = -spec.index * parseInt(spec.slideWidth); } style.opacity = spec.currentSlide === spec.index ? 1 : 0; style.zIndex = spec.currentSlide === spec.index ? 999 : 998; if (spec.useCSS) { style.transition = "opacity " + spec.speed + "ms " + spec.cssEase + ", " + "visibility " + spec.speed + "ms " + spec.cssEase; } } return style; }; const getKey = (child, fallbackKey) => child.key || fallbackKey; const renderSlides = spec => { let key; let slides = []; let preCloneSlides = []; let postCloneSlides = []; let childrenCount = React.Children.count(spec.children); let startIndex = lazyStartIndex(spec); let endIndex = lazyEndIndex(spec); React.Children.forEach(spec.children, (elem, index) => { let child; let childOnClickOptions = { message: "children", index: index, slidesToScroll: spec.slidesToScroll, currentSlide: spec.currentSlide }; // in case of lazyLoad, whether or not we want to fetch the slide if ( !spec.lazyLoad || (spec.lazyLoad && spec.lazyLoadedList.indexOf(index) >= 0) ) { child = elem; } else { child =
    ; } let childStyle = getSlideStyle({ ...spec, index }); let slideClass = child.props.className || ""; let slideClasses = getSlideClasses({ ...spec, index }); // push a cloned element of the desired slide slides.push( React.cloneElement(child, { key: "original" + getKey(child, index), "data-index": index, className: classnames(slideClasses, slideClass), tabIndex: "-1", "aria-hidden": !slideClasses["slick-active"], style: { outline: "none", ...(child.props.style || {}), ...childStyle }, onClick: e => { child.props && child.props.onClick && child.props.onClick(e); if (spec.focusOnSelect) { spec.focusOnSelect(childOnClickOptions); } } }) ); // if slide needs to be precloned or postcloned if ( spec.infinite && childrenCount > 1 && spec.fade === false && !spec.unslick ) { let preCloneNo = childrenCount - index; if (preCloneNo <= getPreClones(spec)) { key = -preCloneNo; if (key >= startIndex) { child = elem; } slideClasses = getSlideClasses({ ...spec, index: key }); preCloneSlides.push( React.cloneElement(child, { key: "precloned" + getKey(child, key), "data-index": key, tabIndex: "-1", className: classnames(slideClasses, slideClass), "aria-hidden": !slideClasses["slick-active"], style: { ...(child.props.style || {}), ...childStyle }, onClick: e => { child.props && child.props.onClick && child.props.onClick(e); if (spec.focusOnSelect) { spec.focusOnSelect(childOnClickOptions); } } }) ); } if (index < getPostClones(spec)) { key = childrenCount + index; if (key < endIndex) { child = elem; } slideClasses = getSlideClasses({ ...spec, index: key }); postCloneSlides.push( React.cloneElement(child, { key: "postcloned" + getKey(child, key), "data-index": key, tabIndex: "-1", className: classnames(slideClasses, slideClass), "aria-hidden": !slideClasses["slick-active"], style: { ...(child.props.style || {}), ...childStyle }, onClick: e => { child.props && child.props.onClick && child.props.onClick(e); if (spec.focusOnSelect) { spec.focusOnSelect(childOnClickOptions); } } }) ); } } }); if (spec.rtl) { return preCloneSlides.concat(slides, postCloneSlides).reverse(); } else { return preCloneSlides.concat(slides, postCloneSlides); } }; export class Track extends React.PureComponent { node = null; handleRef = ref => { this.node = ref; }; render() { const slides = renderSlides(this.props); const { onMouseEnter, onMouseOver, onMouseLeave } = this.props; const mouseEvents = { onMouseEnter, onMouseOver, onMouseLeave }; return (
    {slides}
    ); } } ================================================ FILE: src/utils/innerSliderUtils.js ================================================ import React from "react"; import defaultProps from "../default-props"; export function clamp(number, lowerBound, upperBound) { return Math.max(lowerBound, Math.min(number, upperBound)); } export const safePreventDefault = event => { const passiveEvents = ["onTouchStart", "onTouchMove", "onWheel"]; if (!passiveEvents.includes(event._reactName)) { event.preventDefault(); } }; export const getOnDemandLazySlides = spec => { let onDemandSlides = []; let startIndex = lazyStartIndex(spec); let endIndex = lazyEndIndex(spec); for (let slideIndex = startIndex; slideIndex < endIndex; slideIndex++) { if (spec.lazyLoadedList.indexOf(slideIndex) < 0) { onDemandSlides.push(slideIndex); } } return onDemandSlides; }; // return list of slides that need to be present export const getRequiredLazySlides = spec => { let requiredSlides = []; let startIndex = lazyStartIndex(spec); let endIndex = lazyEndIndex(spec); for (let slideIndex = startIndex; slideIndex < endIndex; slideIndex++) { requiredSlides.push(slideIndex); } return requiredSlides; }; // startIndex that needs to be present export const lazyStartIndex = spec => spec.currentSlide - lazySlidesOnLeft(spec); export const lazyEndIndex = spec => spec.currentSlide + lazySlidesOnRight(spec); export const lazySlidesOnLeft = spec => spec.centerMode ? Math.floor(spec.slidesToShow / 2) + (parseInt(spec.centerPadding) > 0 ? 1 : 0) : 0; export const lazySlidesOnRight = spec => spec.centerMode ? Math.floor((spec.slidesToShow - 1) / 2) + 1 + (parseInt(spec.centerPadding) > 0 ? 1 : 0) : spec.slidesToShow; // get width of an element export const getWidth = elem => (elem && elem.offsetWidth) || 0; export const getHeight = elem => (elem && elem.offsetHeight) || 0; export const getSwipeDirection = (touchObject, verticalSwiping = false) => { var xDist, yDist, r, swipeAngle; xDist = touchObject.startX - touchObject.curX; yDist = touchObject.startY - touchObject.curY; r = Math.atan2(yDist, xDist); swipeAngle = Math.round((r * 180) / Math.PI); if (swipeAngle < 0) { swipeAngle = 360 - Math.abs(swipeAngle); } if ( (swipeAngle <= 45 && swipeAngle >= 0) || (swipeAngle <= 360 && swipeAngle >= 315) ) { return "left"; } if (swipeAngle >= 135 && swipeAngle <= 225) { return "right"; } if (verticalSwiping === true) { if (swipeAngle >= 35 && swipeAngle <= 135) { return "up"; } else { return "down"; } } return "vertical"; }; // whether or not we can go next export const canGoNext = spec => { let canGo = true; if (!spec.infinite) { if (spec.centerMode && spec.currentSlide >= spec.slideCount - 1) { canGo = false; } else if ( spec.slideCount <= spec.slidesToShow || spec.currentSlide >= spec.slideCount - spec.slidesToShow ) { canGo = false; } } return canGo; }; // given an object and a list of keys, return new object with given keys export const extractObject = (spec, keys) => { let newObject = {}; keys.forEach(key => (newObject[key] = spec[key])); return newObject; }; // get initialized state export const initializedState = spec => { // spec also contains listRef, trackRef let slideCount = React.Children.count(spec.children); const listNode = spec.listRef; let listWidth = Math.ceil(getWidth(listNode)); const trackNode = spec.trackRef && spec.trackRef.node; let trackWidth = Math.ceil(getWidth(trackNode)); let slideWidth; if (!spec.vertical) { let centerPaddingAdj = spec.centerMode && parseInt(spec.centerPadding) * 2; if ( typeof spec.centerPadding === "string" && spec.centerPadding.slice(-1) === "%" ) { centerPaddingAdj *= listWidth / 100; } slideWidth = Math.ceil((listWidth - centerPaddingAdj) / spec.slidesToShow); } else { slideWidth = listWidth; } let slideHeight = listNode && getHeight(listNode.querySelector('[data-index="0"]')); let listHeight = slideHeight * spec.slidesToShow; let currentSlide = spec.currentSlide === undefined ? spec.initialSlide : spec.currentSlide; if (spec.rtl && spec.currentSlide === undefined) { currentSlide = slideCount - 1 - spec.initialSlide; } let lazyLoadedList = spec.lazyLoadedList || []; let slidesToLoad = getOnDemandLazySlides({ ...spec, currentSlide, lazyLoadedList }); lazyLoadedList = lazyLoadedList.concat(slidesToLoad); let state = { slideCount, slideWidth, listWidth, trackWidth, currentSlide, slideHeight, listHeight, lazyLoadedList }; if (spec.autoplaying === null && spec.autoplay) { state["autoplaying"] = "playing"; } return state; }; export const slideHandler = spec => { const { waitForAnimate, animating, fade, infinite, index, slideCount, lazyLoad, currentSlide, centerMode, slidesToScroll, slidesToShow, useCSS } = spec; let { lazyLoadedList } = spec; if (waitForAnimate && animating) return {}; let animationSlide = index, finalSlide, animationLeft, finalLeft; let state = {}, nextState = {}; const targetSlide = infinite ? index : clamp(index, 0, slideCount - 1); if (fade) { if (!infinite && (index < 0 || index >= slideCount)) return {}; if (index < 0) { animationSlide = index + slideCount; } else if (index >= slideCount) { animationSlide = index - slideCount; } if (lazyLoad && lazyLoadedList.indexOf(animationSlide) < 0) { lazyLoadedList = lazyLoadedList.concat(animationSlide); } state = { animating: true, currentSlide: animationSlide, lazyLoadedList, targetSlide: animationSlide }; nextState = { animating: false, targetSlide: animationSlide }; } else { finalSlide = animationSlide; if (animationSlide < 0) { finalSlide = animationSlide + slideCount; if (!infinite) finalSlide = 0; else if (slideCount % slidesToScroll !== 0) finalSlide = slideCount - (slideCount % slidesToScroll); } else if (!canGoNext(spec) && animationSlide > currentSlide) { animationSlide = finalSlide = currentSlide; } else if (centerMode && animationSlide >= slideCount) { animationSlide = infinite ? slideCount : slideCount - 1; finalSlide = infinite ? 0 : slideCount - 1; } else if (animationSlide >= slideCount) { finalSlide = animationSlide - slideCount; if (!infinite) finalSlide = slideCount - slidesToShow; else if (slideCount % slidesToScroll !== 0) finalSlide = 0; } if (!infinite && animationSlide + slidesToShow >= slideCount) { finalSlide = slideCount - slidesToShow; } animationLeft = getTrackLeft({ ...spec, slideIndex: animationSlide }); finalLeft = getTrackLeft({ ...spec, slideIndex: finalSlide }); if (!infinite) { if (animationLeft === finalLeft) animationSlide = finalSlide; animationLeft = finalLeft; } if (lazyLoad) { lazyLoadedList = lazyLoadedList.concat( getOnDemandLazySlides({ ...spec, currentSlide: animationSlide }) ); } if (!useCSS) { state = { currentSlide: finalSlide, trackStyle: getTrackCSS({ ...spec, left: finalLeft }), lazyLoadedList, targetSlide }; } else { state = { animating: true, currentSlide: finalSlide, trackStyle: getTrackAnimateCSS({ ...spec, left: animationLeft }), lazyLoadedList, targetSlide }; nextState = { animating: false, currentSlide: finalSlide, trackStyle: getTrackCSS({ ...spec, left: finalLeft }), swipeLeft: null, targetSlide }; } } return { state, nextState }; }; export const changeSlide = (spec, options) => { var indexOffset, previousInt, slideOffset, unevenOffset, targetSlide; const { slidesToScroll, slidesToShow, slideCount, currentSlide, targetSlide: previousTargetSlide, lazyLoad, infinite } = spec; unevenOffset = slideCount % slidesToScroll !== 0; indexOffset = unevenOffset ? 0 : (slideCount - currentSlide) % slidesToScroll; if (options.message === "previous") { slideOffset = indexOffset === 0 ? slidesToScroll : slidesToShow - indexOffset; targetSlide = currentSlide - slideOffset; if (lazyLoad && !infinite) { previousInt = currentSlide - slideOffset; targetSlide = previousInt === -1 ? slideCount - 1 : previousInt; } if (!infinite) { targetSlide = previousTargetSlide - slidesToScroll; } } else if (options.message === "next") { slideOffset = indexOffset === 0 ? slidesToScroll : indexOffset; targetSlide = currentSlide + slideOffset; if (lazyLoad && !infinite) { targetSlide = ((currentSlide + slidesToScroll) % slideCount) + indexOffset; } if (!infinite) { targetSlide = previousTargetSlide + slidesToScroll; } } else if (options.message === "dots") { // Click on dots targetSlide = options.index * options.slidesToScroll; } else if (options.message === "children") { // Click on the slides targetSlide = options.index; if (infinite) { let direction = siblingDirection({ ...spec, targetSlide }); if (targetSlide > options.currentSlide && direction === "left") { targetSlide = targetSlide - slideCount; } else if (targetSlide < options.currentSlide && direction === "right") { targetSlide = targetSlide + slideCount; } } } else if (options.message === "index") { targetSlide = Number(options.index); } return targetSlide; }; export const keyHandler = (e, accessibility, rtl) => { if (e.target.tagName.match("TEXTAREA|INPUT|SELECT") || !accessibility) return ""; if (e.keyCode === 37) return rtl ? "next" : "previous"; if (e.keyCode === 39) return rtl ? "previous" : "next"; return ""; }; export const swipeStart = (e, swipe, draggable) => { e.target.tagName === "IMG" && safePreventDefault(e); if (!swipe || (!draggable && e.type.indexOf("mouse") !== -1)) return ""; return { dragging: true, touchObject: { startX: e.touches ? e.touches[0].pageX : e.clientX, startY: e.touches ? e.touches[0].pageY : e.clientY, curX: e.touches ? e.touches[0].pageX : e.clientX, curY: e.touches ? e.touches[0].pageY : e.clientY } }; }; export const swipeMove = (e, spec) => { // spec also contains, trackRef and slideIndex const { scrolling, animating, vertical, swipeToSlide, verticalSwiping, rtl, currentSlide, edgeFriction, edgeDragged, onEdge, swiped, swiping, slideCount, slidesToScroll, infinite, touchObject, swipeEvent, listHeight, listWidth } = spec; if (scrolling) return; if (animating) return safePreventDefault(e); if (vertical && swipeToSlide && verticalSwiping) safePreventDefault(e); let swipeLeft, state = {}; let curLeft = getTrackLeft(spec); touchObject.curX = e.touches ? e.touches[0].pageX : e.clientX; touchObject.curY = e.touches ? e.touches[0].pageY : e.clientY; touchObject.swipeLength = Math.round( Math.sqrt(Math.pow(touchObject.curX - touchObject.startX, 2)) ); let verticalSwipeLength = Math.round( Math.sqrt(Math.pow(touchObject.curY - touchObject.startY, 2)) ); if (!verticalSwiping && !swiping && verticalSwipeLength > 10) { return { scrolling: true }; } if (verticalSwiping) touchObject.swipeLength = verticalSwipeLength; let positionOffset = (!rtl ? 1 : -1) * (touchObject.curX > touchObject.startX ? 1 : -1); if (verticalSwiping) positionOffset = touchObject.curY > touchObject.startY ? 1 : -1; let dotCount = Math.ceil(slideCount / slidesToScroll); let swipeDirection = getSwipeDirection(spec.touchObject, verticalSwiping); 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")) ) { touchSwipeLength = touchObject.swipeLength * edgeFriction; if (edgeDragged === false && onEdge) { onEdge(swipeDirection); state["edgeDragged"] = true; } } } if (!swiped && swipeEvent) { swipeEvent(swipeDirection); state["swiped"] = true; } if (!vertical) { if (!rtl) { swipeLeft = curLeft + touchSwipeLength * positionOffset; } else { swipeLeft = curLeft - touchSwipeLength * positionOffset; } } else { swipeLeft = curLeft + touchSwipeLength * (listHeight / listWidth) * positionOffset; } if (verticalSwiping) { swipeLeft = curLeft + touchSwipeLength * positionOffset; } state = { ...state, touchObject, swipeLeft, trackStyle: getTrackCSS({ ...spec, left: swipeLeft }) }; if ( Math.abs(touchObject.curX - touchObject.startX) < Math.abs(touchObject.curY - touchObject.startY) * 0.8 ) { return state; } if (touchObject.swipeLength > 10) { state["swiping"] = true; safePreventDefault(e); } return state; }; export const swipeEnd = (e, spec) => { const { dragging, swipe, touchObject, listWidth, touchThreshold, verticalSwiping, listHeight, swipeToSlide, scrolling, onSwipe, targetSlide, currentSlide, infinite } = spec; if (!dragging) { if (swipe) safePreventDefault(e); return {}; } let minSwipe = verticalSwiping ? listHeight / touchThreshold : listWidth / touchThreshold; let swipeDirection = getSwipeDirection(touchObject, verticalSwiping); // reset the state of touch related state variables. let state = { dragging: false, edgeDragged: false, scrolling: false, swiping: false, swiped: false, swipeLeft: null, touchObject: {} }; if (scrolling) { return state; } if (!touchObject.swipeLength) { return state; } if (touchObject.swipeLength > minSwipe) { safePreventDefault(e); if (onSwipe) { onSwipe(swipeDirection); } let slideCount, newSlide; let activeSlide = infinite ? currentSlide : targetSlide; switch (swipeDirection) { case "left": case "up": newSlide = activeSlide + getSlideCount(spec); slideCount = swipeToSlide ? checkNavigable(spec, newSlide) : newSlide; state["currentDirection"] = 0; break; case "right": case "down": newSlide = activeSlide - getSlideCount(spec); slideCount = swipeToSlide ? checkNavigable(spec, newSlide) : newSlide; state["currentDirection"] = 1; break; default: slideCount = activeSlide; } state["triggerSlideHandler"] = slideCount; } else { // Adjust the track back to it's original position. let currentLeft = getTrackLeft(spec); state["trackStyle"] = getTrackAnimateCSS({ ...spec, left: currentLeft }); } return state; }; export const getNavigableIndexes = spec => { let max = spec.infinite ? spec.slideCount * 2 : spec.slideCount; let breakpoint = spec.infinite ? spec.slidesToShow * -1 : 0; let counter = spec.infinite ? spec.slidesToShow * -1 : 0; let indexes = []; while (breakpoint < max) { indexes.push(breakpoint); breakpoint = counter + spec.slidesToScroll; counter += Math.min(spec.slidesToScroll, spec.slidesToShow); } return indexes; }; export const checkNavigable = (spec, index) => { const navigables = getNavigableIndexes(spec); let prevNavigable = 0; if (index > navigables[navigables.length - 1]) { index = navigables[navigables.length - 1]; } else { for (let n in navigables) { if (index < navigables[n]) { index = prevNavigable; break; } prevNavigable = navigables[n]; } } return index; }; export const getSlideCount = spec => { const centerOffset = spec.centerMode ? spec.slideWidth * Math.floor(spec.slidesToShow / 2) : 0; if (spec.swipeToSlide) { let swipedSlide; const slickList = spec.listRef; const slides = (slickList.querySelectorAll && slickList.querySelectorAll(".slick-slide")) || []; Array.from(slides).every(slide => { if (!spec.vertical) { if ( slide.offsetLeft - centerOffset + getWidth(slide) / 2 > spec.swipeLeft * -1 ) { swipedSlide = slide; return false; } } else { if (slide.offsetTop + getHeight(slide) / 2 > spec.swipeLeft * -1) { swipedSlide = slide; return false; } } return true; }); if (!swipedSlide) { return 0; } const currentIndex = spec.rtl === true ? spec.slideCount - spec.currentSlide : spec.currentSlide; const slidesTraversed = Math.abs(swipedSlide.dataset.index - currentIndex) || 1; return slidesTraversed; } else { return spec.slidesToScroll; } }; export const checkSpecKeys = (spec, keysArray) => keysArray.reduce((value, key) => value && spec.hasOwnProperty(key), true) ? null : console.error("Keys Missing:", spec); export const getTrackCSS = spec => { checkSpecKeys(spec, [ "left", "variableWidth", "slideCount", "slidesToShow", "slideWidth" ]); let trackWidth, trackHeight; if (!spec.vertical) { trackWidth = getTotalSlides(spec) * spec.slideWidth; } else { const trackChildren = spec.unslick ? spec.slideCount : spec.slideCount + 2 * spec.slidesToShow; trackHeight = trackChildren * spec.slideHeight; } let style = { opacity: 1, transition: "", WebkitTransition: "" }; if (spec.useTransform) { let WebkitTransform = !spec.vertical ? "translate3d(" + spec.left + "px, 0px, 0px)" : "translate3d(0px, " + spec.left + "px, 0px)"; let transform = !spec.vertical ? "translate3d(" + spec.left + "px, 0px, 0px)" : "translate3d(0px, " + spec.left + "px, 0px)"; let msTransform = !spec.vertical ? "translateX(" + spec.left + "px)" : "translateY(" + spec.left + "px)"; style = { ...style, WebkitTransform, transform, msTransform }; } else { if (spec.vertical) { style["top"] = spec.left; } else { style["left"] = spec.left; } } if (spec.fade) style = { opacity: 1 }; if (trackWidth) style.width = trackWidth; if (trackHeight) style.height = trackHeight; // Fallback for IE8 if (window && !window.addEventListener && window.attachEvent) { if (!spec.vertical) { style.marginLeft = spec.left + "px"; } else { style.marginTop = spec.left + "px"; } } return style; }; export const getTrackAnimateCSS = spec => { checkSpecKeys(spec, [ "left", "variableWidth", "slideCount", "slidesToShow", "slideWidth", "speed", "cssEase" ]); let style = getTrackCSS(spec); // useCSS is true by default so it can be undefined if (spec.useTransform) { style.WebkitTransition = "-webkit-transform " + spec.speed + "ms " + spec.cssEase; style.transition = "transform " + spec.speed + "ms " + spec.cssEase; } else { if (spec.vertical) { style.transition = "top " + spec.speed + "ms " + spec.cssEase; } else { style.transition = "left " + spec.speed + "ms " + spec.cssEase; } } return style; }; export const getTrackLeft = spec => { if (spec.unslick) { return 0; } checkSpecKeys(spec, [ "slideIndex", "trackRef", "infinite", "centerMode", "slideCount", "slidesToShow", "slidesToScroll", "slideWidth", "listWidth", "variableWidth", "slideHeight" ]); const { slideIndex, trackRef, infinite, centerMode, slideCount, slidesToShow, slidesToScroll, slideWidth, listWidth, variableWidth, slideHeight, fade, vertical } = spec; var slideOffset = 0; var targetLeft; var targetSlide; var verticalOffset = 0; if (fade || spec.slideCount === 1) { return 0; } let slidesToOffset = 0; if (infinite) { slidesToOffset = -getPreClones(spec); // bring active slide to the beginning of visual area // if next scroll doesn't have enough children, just reach till the end of original slides instead of shifting slidesToScroll children if ( slideCount % slidesToScroll !== 0 && slideIndex + slidesToScroll > slideCount ) { slidesToOffset = -(slideIndex > slideCount ? slidesToShow - (slideIndex - slideCount) : slideCount % slidesToScroll); } // shift current slide to center of the frame if (centerMode) { slidesToOffset += parseInt(slidesToShow / 2); } } else { if ( slideCount % slidesToScroll !== 0 && slideIndex + slidesToScroll > slideCount ) { slidesToOffset = slidesToShow - (slideCount % slidesToScroll); } if (centerMode) { slidesToOffset = parseInt(slidesToShow / 2); } } slideOffset = slidesToOffset * slideWidth; verticalOffset = slidesToOffset * slideHeight; if (!vertical) { targetLeft = slideIndex * slideWidth * -1 + slideOffset; } else { targetLeft = slideIndex * slideHeight * -1 + verticalOffset; } if (variableWidth === true) { var targetSlideIndex; const trackElem = trackRef && trackRef.node; targetSlideIndex = slideIndex + getPreClones(spec); targetSlide = trackElem && trackElem.childNodes[targetSlideIndex]; targetLeft = targetSlide ? targetSlide.offsetLeft * -1 : 0; if (centerMode === true) { targetSlideIndex = infinite ? slideIndex + getPreClones(spec) : slideIndex; targetSlide = trackElem && trackElem.children[targetSlideIndex]; targetLeft = 0; for (let slide = 0; slide < targetSlideIndex; slide++) { targetLeft -= trackElem && trackElem.children[slide] && trackElem.children[slide].offsetWidth; } targetLeft -= parseInt(spec.centerPadding); targetLeft += targetSlide && (listWidth - targetSlide.offsetWidth) / 2; } } return targetLeft; }; export const getPreClones = spec => { if (spec.unslick || !spec.infinite) { return 0; } if (spec.variableWidth) { return spec.slideCount; } return spec.slidesToShow + (spec.centerMode ? 1 : 0); }; export const getPostClones = spec => { if (spec.unslick || !spec.infinite) { return 0; } if (spec.variableWidth) { return spec.slideCount; } return spec.slidesToShow + (spec.centerMode ? 1 : 0); }; export const getTotalSlides = spec => spec.slideCount === 1 ? 1 : getPreClones(spec) + spec.slideCount + getPostClones(spec); export const siblingDirection = spec => { if (spec.targetSlide > spec.currentSlide) { if (spec.targetSlide > spec.currentSlide + slidesOnRight(spec)) { return "left"; } return "right"; } else { if (spec.targetSlide < spec.currentSlide - slidesOnLeft(spec)) { return "right"; } return "left"; } }; export const slidesOnRight = ({ slidesToShow, centerMode, rtl, centerPadding }) => { // returns no of slides on the right of active slide if (centerMode) { let right = (slidesToShow - 1) / 2 + 1; if (parseInt(centerPadding) > 0) right += 1; if (rtl && slidesToShow % 2 === 0) right += 1; return right; } if (rtl) { return 0; } return slidesToShow - 1; }; export const slidesOnLeft = ({ slidesToShow, centerMode, rtl, centerPadding }) => { // returns no of slides on the left of active slide if (centerMode) { let left = (slidesToShow - 1) / 2 + 1; if (parseInt(centerPadding) > 0) left += 1; if (!rtl && slidesToShow % 2 === 0) left += 1; return left; } if (rtl) { return slidesToShow - 1; } return 0; }; export const canUseDOM = () => !!( typeof window !== "undefined" && 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; }, {}); } ================================================ FILE: test-setup.js ================================================ import "@testing-library/jest-dom/extend-expect"; import "regenerator-runtime/runtime"; //Fix for "matchMedia not present, legacy browsers require a polyfill jest" error window.matchMedia = window.matchMedia || function() { return { matches: false, addListener: function() {}, removeListener: function() {} }; }; ================================================ FILE: test-utils.js ================================================ import { render, fireEvent, waitFor, screen } from "@testing-library/react"; export function getSlidesCount(container) { return container.getElementsByClassName("slick-slide").length; } export function getSlides(container) { return container.getElementsByClassName("slick-slide"); } export function getClonesCount(container) { return container.getElementsByClassName("slick-cloned").length; } export function getActiveSlidesCount(container) { return container.querySelectorAll(".slick-slide.slick-active").length; } export function getCurrentSlide(container) { return container.querySelector(".slick-current"); } export function getCurrentSlideContent(container) { const slide = container.querySelector(".slick-current"); return slide.textContent; } export function getButtons(container) { return container.querySelectorAll(".slick-dots button"); } export function getButtonsListItem(container) { return container.querySelectorAll(".slick-dots")[0].children; } export function getButtonsLength(container) { return container.querySelectorAll(".slick-dots")[0].children.length; } export function hasClass(element, classname) { if (element.className != undefined) { return element.classList.contains(classname); } return false; } export function getActiveButton(container) { return Array.from( container.querySelectorAll(".slick-dots .slick-active button") ).map(e => e.textContent); } // export function getCurrentSlideIdState(container) { // return parseInt(getCurrentSlide(container).getAttribute("data-index")) + 1; // } // export function activeSlides(container) { // return container.querySelectorAll(".slick-slide.slick-active"); // } export function getActiveSlide(container) { return container.querySelector(".slick-slide.slick-active"); } export function getActiveSlides(container) { return container.querySelectorAll(".slick-slide.slick-active"); } export function getActiveSlidesText(container) { const slides = getActiveSlides(container); return Array.from(slides).map(e => e.textContent); } export function clickNext(container) { fireEvent( container.getElementsByClassName("slick-next")[0], new MouseEvent("click", { bubbles: true, cancelable: true }) ); } export function clickPrevious(container) { fireEvent( container.getElementsByClassName("slick-prev")[0], new MouseEvent("click", { bubbles: true, cancelable: true }) ); } export function hasDots(container) { return Boolean(container.querySelectorAll(".slick-dots")[0]); } export function hasArrows(container) { return Boolean( container.getElementsByClassName("slick-next")[0] || container.getElementsByClassName("slick-prev")[0] ); } ================================================ FILE: webpack.config.dist.js ================================================ var webpack = require("webpack"); var path = require("path"); module.exports = { mode: "production", entry: "./src/index", output: { library: "Slider", libraryTarget: "umd", path: path.join(__dirname, "dist") }, module: { rules: [ { test: /\.js/, exclude: /(node_modules)/, use: { loader: "babel-loader" } } ] }, resolve: { extensions: [".js", ".jsx"] }, externals: { react: { root: "React", commonjs2: "react", commonjs: "react", amd: "react" }, "react-dom": { root: "ReactDOM", commonjs2: "react-dom", commonjs: "react-dom", amd: "react-dom" } }, node: { Buffer: false }, devtool: "source-map", performance: { hints: "warning" }, plugins: [] }; ================================================ FILE: webpack.config.js ================================================ var webpack = require("webpack"); var path = require("path"); module.exports = { mode: "production", devtool: "source-map", entry: { "docs.js": "./docs/index.js" }, output: { path: path.join(__dirname, "build"), filename: "[name]" }, module: { rules: [ { test: /\.jsx?/, exclude: /(node_modules)/, use: { loader: "babel-loader" } }, { test: /\.md$/, loader: "html!markdown" } ] }, resolve: { extensions: [".js", ".jsx"], alias: { "react-slick": path.resolve(__dirname, "src/index.js") } }, plugins: [new webpack.IgnorePlugin(/vertx/)], devServer: { contentBase: path.join(__dirname, "./build"), port: 8080, hot: true } };