Showing preview only (211K chars total). Download the full file or copy to clipboard to get everything.
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
================================================
<!-- Love react-slick? Please consider supporting our collective:
👉 https://opencollective.com/react-slick/donate -->
### 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!
<a href="https://github.com/akiran/react-slick/graphs/contributors"><img src="https://opencollective.com/react-slick/contributors.svg?width=890" /></a>
### Backers
Thank you to all our backers! [[Become a backer](https://opencollective.com/react-slick#backer)]
<a href="https://opencollective.com/react-slick#backers" target="_blank"><img src="https://opencollective.com/react-slick/backers.svg?width=890"></a>
### 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))
<a href="https://opencollective.com/react-slick/sponsor/0/website" target="_blank"><img src="https://opencollective.com/react-slick/sponsor/0/avatar.svg"></a>
<a href="https://opencollective.com/react-slick/sponsor/1/website" target="_blank"><img src="https://opencollective.com/react-slick/sponsor/1/avatar.svg"></a>
<a href="https://opencollective.com/react-slick/sponsor/2/website" target="_blank"><img src="https://opencollective.com/react-slick/sponsor/2/avatar.svg"></a>
<a href="https://opencollective.com/react-slick/sponsor/3/website" target="_blank"><img src="https://opencollective.com/react-slick/sponsor/3/avatar.svg"></a>
<a href="https://opencollective.com/react-slick/sponsor/4/website" target="_blank"><img src="https://opencollective.com/react-slick/sponsor/4/avatar.svg"></a>
<a href="https://opencollective.com/react-slick/sponsor/5/website" target="_blank"><img src="https://opencollective.com/react-slick/sponsor/5/avatar.svg"></a>
<a href="https://opencollective.com/react-slick/sponsor/6/website" target="_blank"><img src="https://opencollective.com/react-slick/sponsor/6/avatar.svg"></a>
<a href="https://opencollective.com/react-slick/sponsor/7/website" target="_blank"><img src="https://opencollective.com/react-slick/sponsor/7/avatar.svg"></a>
<a href="https://opencollective.com/react-slick/sponsor/8/website" target="_blank"><img src="https://opencollective.com/react-slick/sponsor/8/avatar.svg"></a>
<a href="https://opencollective.com/react-slick/sponsor/9/website" target="_blank"><img src="https://opencollective.com/react-slick/sponsor/9/avatar.svg"></a>
<!-- This `CONTRIBUTING.md` is based on @nayafia's template https://github.com/nayafia/contributing-template -->
================================================
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) [](#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
<link
rel="stylesheet"
type="text/css"
charset="UTF-8"
href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css"
/>
```
### [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 (
<Slider {...settings}>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
</Slider>
);
}
```
### 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 => (
<div key={item}>{item + 1}</div>
));
return <Slider {...settings}>{slides}</Slider>;
}
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 (
<Slider afterChange={this.afterChange}>
<div>slide1</div>
<div>slide2</div>
<div>slide3</div>
<div>slide4</div>
</Slider>
);
}
}
describe("After change Slider", function() {
it("should render", function() {
const { container } = render(<SliderWithAfterChange />);
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 (
<span
className="sample"
data-currentSlide={props.currentSlide}
data-slideCount={props.slideCount}
/>
);
}
describe("Previous arrows", () => {
it("should render arrow", () => {
const { container } = render(<PrevArrow />);
expect(Array.from(container.getElementsByTagName("button"))).toHaveLength(
1
);
});
it("should not result in errors", () => {
render(<PrevArrow />);
expect(console.error.called).toBe(false);
});
// it('should pass slide data to custom arrow', () => {
// let elAttributes;
// let arr = <CustomArrow />
// const {container}= render(<PrevArrow currentSlide={3} prevArrow={arr} slideCount={5} />);
// 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(<NextArrow />);
expect(Array.from(container.getElementsByTagName("button"))).toHaveLength(
1
);
});
// it('should not result in errors', () => {
// render(<NextArrow />);
// expect(console.error.called).toBe(false);
// });
// it('should pass slide data to custom arrow', () => {
// let elAttributes;
// let arr = <CustomArrow />
// const {container} = render(<NextArrow currentSlide={6} nextArrow={arr} slideCount={9} />);
// 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 (
<Slider waitForAnimate={false} beforeChange={this.beforeChange}>
<div>slide1</div>
<div>slide2</div>
<div>slide3</div>
<div>slide4</div>
</Slider>
);
}
}
describe("Slider", function() {
it("should render", function() {
const { container } = render(<SliderWithBeforeChange />);
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 <GenericSliderComponent slidesCount={9} settings={settings} />;
}
describe("Multiple Items with slidesToShow = slides count in infinite mode", function() {
it("should have 9 active slides", function() {
const { container } = render(<MultipleItems />);
expect(getActiveSlidesCount(container)).toEqual(9);
});
it("should show first 9 slides", function() {
const { container } = render(<MultipleItems />);
//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(<MultipleItems />);
expect(hasArrows(container)).toEqual(false);
});
it("shouldn't have any dots", () => {
const { container } = render(<MultipleItems />);
expect(hasDots(container)).toEqual(false);
});
// it("should have 0 dots", function() {
// const { container } = render(<MultipleItems />);
// expect(getButtonsLength(container)).toEqual(0);
// });
// it("should show slides from 4 when next button is clicked", function() {
// const { container } = render(<MultipleItems />);
// 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(<MultipleItems />);
// 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(<MultipleItems />);
// 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(<MultipleItems />);
// 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(<MultipleItems />);
// 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(<GenericSliderComponent slidesCount={6} />);
expect(getCurrentSlideContent(container)).toEqual("1");
clickNext(container);
expect(getCurrentSlideContent(container)).toEqual("2");
});
it("currentSlide is 2 when initialSlide is 2", function() {
const { container } = render(
<GenericSliderComponent slidesCount={6} settings={{ initialSlide: 2 }} />
);
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 (
<div>
<button className="increment-button" onClick={() => setCount(count + 1)}>
Increment {count}
</button>
<GenericSliderComponent slidesCount={6} settings={{ count }} />
</div>
);
}
describe("State change in parent component of slider", () => {
it("Slider shoud work afer clicking on Increment button", function() {
const { container } = render(<TestSlider />);
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 <GenericSliderComponent slidesCount={1} settings={settings} />;
}
function SliderWithUnslick() {
const settings = {
dots: true,
infinite: true,
unslick: true
};
return <GenericSliderComponent slidesCount={2} settings={settings} />;
}
describe("Slider with one slide", function() {
it("should have 1 active slide", function() {
const { container } = render(<SliderWithOneSlide />);
expect(getActiveSlidesCount(container)).toEqual(1);
});
it("should not have any clones", function() {
const { container } = render(<SliderWithOneSlide />);
expect(getClonesCount(container)).toEqual(0);
});
it("should no have dots and arrows", function() {
const { container } = render(<SliderWithOneSlide />);
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(<SliderWithUnslick />);
expect(getActiveSlidesCount(container)).toEqual(1);
});
it("should not have any clones", function() {
const { container } = render(<SliderWithUnslick />);
expect(getClonesCount(container)).toEqual(0);
});
it("should no have dots and arrows", function() {
const { container } = render(<SliderWithUnslick />);
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 => (
<div key={i}>
<h3>{i + 1}</h3>
</div>
));
}
// create a react-slider with given noOfSlides and other props
// variable widths are ignored for now for simplicity
export function createReactSlider({ noOfSlides, ...props }) {
return <Slider {...props}>{createReactSliderChildren(noOfSlides)}</Slider>;
}
// 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 <InnerSlider {...settings}>{children}</InnerSlider>;
}
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(`<div><h3>${i + 1}</h3></div>`);
}
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 = `
<section class="regular slider">
${createJQuerySliderChildren(noOfSlides)}
</section>
`;
$(".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 <button {...this.props}>Next</button>;
}
}
```
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 (
<div className="content">
<SimpleSlider />
<MultipleItems />
<MultipleRows />
<Responsive />
<Resizable />
<UnevenSetsInfinite />
<UnevenSetsFinite />
<CenterMode />
<FocusOnSelect />
<AutoPlay />
<AutoPlayMethods />
<PauseOnHover />
<Rtl />
<VariableWidth />
<AdaptiveHeight />
<LazyLoad />
<Fade />
<SlideChangeHooks />
<SlickGoTo />
<CustomPaging />
<CustomArrows />
<CustomSlides />
<PreviousNextMethods />
<DynamicSlides />
<VerticalMode />
<SwipeToSlide />
<VerticalSwipeToSlide />
<AsNavFor />
<AppendDots />
</div>
);
}
}
================================================
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 (
<div className="">
<div className="title-bar primary">
<span className="title">React Slick</span>
</div>
<div className="">
<div className="">
<Demos />
</div>
</div>
</div>
);
}
}
================================================
FILE: docs/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="/slick.css">
<link rel="stylesheet" href="/slick-theme.css">
<link rel="stylesheet" href="/docs.css">
</head>
<body>
<div id='rapp'></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.3/fastclick.min.js"></script>
<script type="text/javascript">
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}
</script>
<script type="text/javascript" src='/docs.js'></script>
<!-- For Mobile Degbugging
<script src="http://192.168.0.100:8080/target/target-script-min.js#anonymous"></script>
-->
</body>
</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(
<React.StrictMode>
<Docs />
</React.StrictMode>
);
================================================
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 = <Route name="app" path={path} handler={Docs}></Route>;
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 = /\<Slider(?:.|\n)*?\>((.|\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(
`<div name="${exampleName}">` + childrenString + "</div>"
).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 += `
<div>
<h2>${key}</h2>
${children}
</div>
`;
bodyScript += `
$('[name="${key}"').slick(${toString(props)})
`;
});
let HTMLString = `<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./slick.css">
<link rel="stylesheet" href="./slick-theme.css">
<link rel="stylesheet" href="./docs.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="../node_modules/slick-carousel/slick/slick.min.js"></script>
<!--
<style>
.slick-dots li button:before {
content: "•";
}
.slick-prev:before {
content: "←";
}
.slick-next:before {
content: "→";
}
-->
</style>
</head>
<body>
<div class="content">
${bodyHTML}
</div>
<script type='text/javascript'>
$(document).on('ready', function() {
${bodyScript}
})
</script>
</body>
</html>
`;
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 (
// <div>
// <h2> Single Item</h2>
// <Slider {...settings}>
// <div>
// <h3>1</h3>
// </div>
// <div>
// <h3>2</h3>
// </div>
// <div>
// <h3>3</h3>
// </div>
// <div>
// <h3>4</h3>
// </div>
// <div>
// <h3>5</h3>
// </div>
// <div>
// <h3>6</h3>
// </div>
// </Slider>
// </div>
// );
// }
function App() {
return (
<div className="content">
{/* <SimpleSlider /> */}
{/* <MultipleItems /> */}
{/* <CenterMode /> */}
<UnevenSetsInfinite />
</div>
);
}
const container = document.getElementById("rapp");
const root = createRoot(container);
React.initializeTouchEvents && React.initializeTouchEvents(true);
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
================================================
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 (
<div className="slider-container">
<Slider {...settings}>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
<p>Hello</p>
</div>
<div>
<h3>3</h3>
<p>See ....</p>
<p>Height is adaptive</p>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
</Slider>
</div>
);
}
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 => (
<div
style={{
backgroundColor: "#ddd",
borderRadius: "10px",
padding: "10px"
}}
>
<ul style={{ margin: "0px" }}> {dots} </ul>
</div>
),
customPaging: i => (
<div
style={{
width: "30px",
color: "blue",
border: "1px blue solid"
}}
>
{i + 1}
</div>
)
};
return (
<div className="slider-container">
<Slider {...settings}>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
</Slider>
</div>
);
}
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 (
<div className="slider-container">
<h2>Slider Syncing (AsNavFor)</h2>
<h4>First Slider</h4>
<Slider asNavFor={nav2} ref={slider => (sliderRef1 = slider)}>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
</Slider>
<h4>Second Slider</h4>
<Slider
asNavFor={nav1}
ref={slider => (sliderRef2 = slider)}
slidesToShow={3}
swipeToSlide={true}
focusOnSelect={true}
>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
</Slider>
</div>
);
}
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 (
<div className="slider-container">
<Slider {...settings}>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
</Slider>
</div>
);
}
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 (
<div className="slider-container">
<h2>Auto Play {"&"} Pause with buttons</h2>
<Slider ref={slider => (sliderRef = slider)} {...settings}>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
</Slider>
<div style={{ textAlign: "center" }}>
<button className="button" onClick={play}>
Play
</button>
<button className="button" onClick={pause}>
Pause
</button>
</div>
</div>
);
}
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 (
<div className="slider-container">
<Slider {...settings}>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
</Slider>
</div>
);
}
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 (
<div
className={className}
style={{ ...style, display: "block", background: "red" }}
onClick={onClick}
/>
);
}
function SamplePrevArrow(props) {
const { className, style, onClick } = props;
return (
<div
className={className}
style={{ ...style, display: "block", background: "green" }}
onClick={onClick}
/>
);
}
function CustomArrows() {
const settings = {
dots: true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
nextArrow: <SampleNextArrow />,
prevArrow: <SamplePrevArrow />
};
return (
<div className="slider-container">
<Slider {...settings}>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
</Slider>
</div>
);
}
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 (
<a>
<img src={`${baseUrl}/abstract0${i + 1}.jpg`} />
</a>
);
},
dots: true,
dotsClass: "slick-dots slick-thumb",
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
};
return (
<div className="slider-container">
<Slider {...settings}>
<div>
<img src={baseUrl + "/abstract01.jpg"} />
</div>
<div>
<img src={baseUrl + "/abstract02.jpg"} />
</div>
<div>
<img src={baseUrl + "/abstract03.jpg"} />
</div>
<div>
<img src={baseUrl + "/abstract04.jpg"} />
</div>
</Slider>
</div>
);
}
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 (
<div {...otherProps}>
<h3>{index}</h3>
</div>
);
}
function CustomSlides() {
const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
};
return (
<div className="slider-container">
<Slider {...settings}>
<CustomSlide index={1} />
<CustomSlide index={2} />
<CustomSlide index={3} />
<CustomSlide index={4} />
<CustomSlide index={5} />
<CustomSlide index={6} />
</Slider>
</div>
);
}
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 (
<div className="slider-container">
<button className="button" onClick={handleClick}>
Click to change slide count
</button>
<Slider {...settings}>
{slides.map(slide => {
return (
<div key={slide}>
<h3>{slide}</h3>
</div>
);
})}
</Slider>
</div>
);
}
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 (
<div className="slider-container">
<Slider {...settings}>
<div>
<img src={baseUrl + "/abstract01.jpg"} />
</div>
<div>
<img src={baseUrl + "/abstract02.jpg"} />
</div>
<div>
<img src={baseUrl + "/abstract03.jpg"} />
</div>
<div>
<img src={baseUrl + "/abstract04.jpg"} />
</div>
</Slider>
</div>
);
}
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 (
<div className="slider-container">
<div>Click on any slide to select and make it current slide</div>
<Slider {...settings}>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
</Slider>
</div>
);
}
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 (
<div className="slider-container">
<Slider {...settings}>
<div>
<img src={baseUrl + "/abstract01.jpg"} />
</div>
<div>
<img src={baseUrl + "/abstract02.jpg"} />
</div>
<div>
<img src={baseUrl + "/abstract03.jpg"} />
</div>
<div>
<img src={baseUrl + "/abstract04.jpg"} />
</div>
</Slider>
</div>
);
}
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 (
<div className="slider-container">
<Slider {...settings}>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
<div>
<h3>7</h3>
</div>
<div>
<h3>8</h3>
</div>
<div>
<h3>9</h3>
</div>
</Slider>
</div>
);
}
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 (
<div className="slider-container">
<Slider {...settings}>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
<div>
<h3>7</h3>
</div>
<div>
<h3>8</h3>
</div>
<div>
<h3>9</h3>
</div>
<div>
<h3>10</h3>
</div>
<div>
<h3>11</h3>
</div>
<div>
<h3>12</h3>
</div>
<div>
<h3>13</h3>
</div>
<div>
<h3>14</h3>
</div>
<div>
<h3>15</h3>
</div>
<div>
<h3>16</h3>
</div>
</Slider>
</div>
);
}
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 (
<div className="slider-container">
<Slider {...settings}>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
</Slider>
</div>
);
}
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 (
<div className="slider-container">
<Slider
ref={slider => {
sliderRef = slider;
}}
{...settings}
>
<div key={1}>
<h3>1</h3>
</div>
<div key={2}>
<h3>2</h3>
</div>
<div key={3}>
<h3>3</h3>
</div>
<div key={4}>
<h3>4</h3>
</div>
<div key={5}>
<h3>5</h3>
</div>
<div key={6}>
<h3>6</h3>
</div>
</Slider>
<div style={{ textAlign: "center" }}>
<button className="button" onClick={previous}>
Previous
</button>
<button className="button" onClick={next}>
Next
</button>
</div>
</div>
);
}
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 (
<div className="slider-container">
<h2> Resizable Collapsible </h2>
<button className="button" onClick={() => setWidth(width + 100)}>
{" "}
increase{" "}
</button>
<button className="button" onClick={() => setWidth(width - 100)}>
{" "}
decrease{" "}
</button>
<button className="button" onClick={() => setDisplay(!display)}>
{" "}
toggle{" "}
</button>
<div
style={{
width: width + "px",
display: display ? "block" : "none"
}}
>
<Slider {...settings}>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
</Slider>
</div>
</div>
);
}
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 (
<div className="slider-container">
<Slider {...settings}>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
<div>
<h3>7</h3>
</div>
<div>
<h3>8</h3>
</div>
</Slider>
</div>
);
}
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 (
<div className="slider-container">
<h2>Right to Left</h2>
<Slider {...settings}>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
</Slider>
</div>
);
}
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 (
<div className="slider-container">
<Slider {...settings}>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
</Slider>
</div>
);
}
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 (
<div className="slider-container">
<p>Total updates: {updateCount} </p>
<input
onChange={e => sliderRef.slickGoTo(e.target.value)}
value={slideIndex}
type="range"
min={0}
max={3}
/>
<Slider
ref={slider => {
sliderRef = slider;
}}
{...settings}
>
<div>
<img src={baseUrl + "/abstract01.jpg"} />
</div>
<div>
<img src={baseUrl + "/abstract02.jpg"} />
</div>
<div>
<img src={baseUrl + "/abstract03.jpg"} />
</div>
<div>
<img src={baseUrl + "/abstract04.jpg"} />
</div>
</Slider>
</div>
);
}
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 (
<div className="slider-container">
<h2>beforeChange and afterChange hooks</h2>
<p>
BeforeChange {"=>"} oldSlide: <strong>{oldSlide}</strong>
</p>
<p>
BeforeChange {"=>"} activeSlide: <strong>{activeSlide}</strong>
</p>
<p>
AfterChange {"=>"} activeSlide: <strong>{activeSlide2}</strong>
</p>
<Slider {...settings}>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
</Slider>
</div>
);
}
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 (
<div className="slider-container">
<Slider {...settings}>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
<div>
<h3>7</h3>
</div>
<div>
<h3>8</h3>
</div>
<div>
<h3>9</h3>
</div>
</Slider>
</div>
);
}
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 (
<div className="slider-container">
<Slider {...settings}>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
</Slider>
</div>
);
}
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 (
<div className="slider-container">
<Slider {...settings}>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
</Slider>
</div>
);
}
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 (
<div className="slider-container">
<Slider {...settings}>
<div style={{ width: 100 }}>
<p>100</p>
</div>
<div style={{ width: 200 }}>
<p>200</p>
</div>
<div style={{ width: 75 }}>
<p>75</p>
</div>
<div style={{ width: 300 }}>
<p>300</p>
</div>
<div style={{ width: 225 }}>
<p>225</p>
</div>
<div style={{ width: 175 }}>
<p>175</p>
</div>
</Slider>
</div>
);
}
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 (
<div className="slider-container">
<Slider {...settings}>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
</Slider>
</div>
);
}
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 (
<div className="slider-container">
<Slider {...settings}>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
</Slider>
</div>
);
}
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(<CenterMode />);
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(<CenterMode />);
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(<CenterMode />);
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(<Fade />);
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(<FocusOnSelect />);
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(<MultipleItems />);
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(<MultipleItems />);
expect(getActiveSlidesCount(container)).toEqual(3);
// expect(beautify_html(toString(container))).toMatchSnapshot();
});
it("should have 3 dots", function() {
const { container } = render(<MultipleItems />);
expect(getButtonsLength(container)).toEqual(3);
// expect(beautify_html(toString(container))).toMatchSnapshot();
});
it("should show first 3 slides", function() {
const { container } = render(<MultipleItems />);
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(<MultipleItems />);
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(<MultipleItems />);
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(<MultipleItems />);
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(<MultipleItems />);
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(<MultipleItems />);
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(<SimpleSlider />);
expect(container.getElementsByClassName("slick-slide").length).toBe(8);
});
it("should have 7 clone slides", function() {
const { container } = render(<SimpleSlider />);
expect(container.getElementsByClassName("slick-cloned").length).toBe(2);
});
it("should have 1 current slide", function() {
const { container } = render(<SimpleSlider />);
expect(
container.querySelectorAll(".slick-slide.slick-current").length
).toBe(1);
expect(parseInt(getCurrentSlide(container).textContent) - 1).toBe(0);
});
it("should have 1 active slide", function() {
const { container } = render(<SimpleSlider />);
expect(container.querySelectorAll(".slick-slide.slick-active").length).toBe(
1
);
expect(
Array.from(getActiveSlide(container).children).map(
e => parseInt(e.textContent) - 1
)[0]
).toBe(0);
});
it("should have 6 dots", function() {
const { container } = render(<SimpleSlider />);
expect(
container.getElementsByClassName("slick-dots")[0].children.length
).toBe(6);
});
it("should have 1 active dot", function() {
const { container } = render(<SimpleSlider />);
expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
1
);
});
it("should have a prev arrow", function() {
const { container } = render(<SimpleSlider />);
expect(container.getElementsByClassName("slick-prev").length).toBe(1);
});
it("should have a next arrow", function() {
const { container } = render(<SimpleSlider />);
expect(container.getElementsByClassName("slick-next").length).toBe(1);
});
it("should got to next slide when next button is clicked", function() {
const { container } = render(<SimpleSlider />);
clickNext(container);
expect(
container.querySelectorAll(".slick-slide.slick-active")[0].textContent
).toBe("2");
expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
1
);
expect(
container.querySelectorAll(".slick-dots")[0].children[1]
).toHaveClass("slick-active");
});
it("should goto previous slide when prev button is clicked", function() {
const { container } = render(<SimpleSlider />);
clickPrevious(container);
expect(
container.querySelectorAll(".slick-slide.slick-active")[0].textContent
).toBe("6");
expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
1
);
expect(
container.querySelectorAll(".slick-dots")[0].children[5]
).toHaveClass("slick-active");
});
it("should goto 4th slide when 4th dot is clicked", function() {
const { container } = render(<SimpleSlider />);
fireEvent(
container.querySelectorAll(".slick-dots button")[3],
new MouseEvent("click", {
bubbles: true,
cancelable: true
})
);
expect(getActiveSlidesText(container)[0]).toEqual("4");
expect(getActiveSlidesCount(container)).toEqual(1);
expect(hasClass(getButtonsListItem(container)[3], "slick-active")).toEqual(
true
);
});
});
describe("Simple Slider Snapshots", function() {
it("slider initial state", function() {
const { container } = render(<SimpleSlider />);
// expect(beautify_html(toString(container))).toMatchSnapshot();
});
it("click on next button", function() {
const { container } = render(<SimpleSlider />);
clickNext(container);
//expect(beautify_html(toString(container))).toMatchSnapshot();
});
it("click on prev button", function() {
const { container } = render(<SimpleSlider />);
clickPrevious(container);
// expect(beautify_html(toString(container))).toMatchSnapshot();
});
it("click on 3rd dot", function() {
const { container } = render(<SimpleSlider />);
fireEvent(
getButtons(container)[2],
new MouseEvent("click", {
bubbles: true,
cancelable: true
})
);
// expect(beautify_html(toString(container))).toMatchSnapshot();
});
});
================================================
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(<SlickGoTo />);
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(<SlickGoTo />);
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(<SlickGoTo />);
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(<SlickGoTo waitForAnimate={false} />);
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(<UnevenSetsFinite />);
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(<UnevenSetsFinite />);
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(<UnevenSetsFinite />);
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(<UnevenSetsInfinite />);
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(<UnevenSetsInfinite />);
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(<UnevenSetsInfinite />);
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: ["<rootDir>/test-setup.js"],
testPathIgnorePatterns: ["/node_modules/", "playwright-tests"],
moduleNameMapper: {
"react-slick": "<rootDir>/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
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Testing Page</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="./index.jsx"></script>
</body>
</html>
================================================
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(<Responsive />);
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 (
<div className="slider-container">
<Slider {...settings}>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
<div>
<h3>7</h3>
</div>
<div>
<h3>8</h3>
</div>
</Slider>
</div>
);
}
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(<VerticalModeFinite />);
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(<VerticalModeInfinite />);
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 (
<Slider {...settings}>
<div>
<div style={{ height: 100 }}>1</div>
</div>
<div>
<div style={{ height: 100 }}>2</div>
</div>
</Slider>
);
}
export function VerticalModeInfinite() {
const settings = {
dots: true,
infinite: true,
vertical: true,
slidesToShow: 3
};
return (
<Slider {...settings}>
<div>
<div style={{ height: 100 }}>1</div>
</div>
<div>
<div style={{ height: 100 }}>2</div>
</div>
</Slider>
);
}
================================================
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 <App /> component in isolation
const component = await mount(<App></App>);
//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 <div>Learn React</div>;
}
================================================
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 = (
<button key="0" type="button" {...prevArrowProps}>
{" "}
Previous
</button>
);
}
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 = (
<button key="1" type="button" {...nextArrowProps}>
{" "}
Next
</button>
);
}
return nextArrow;
}
}
================================================
FILE: src/default-props.js
================================================
import React from "react";
let defaultProps = {
accessibility: true,
adaptiveHeight: false,
afterChange: null,
appendDots: dots => <ul style={{ display: "block" }}>{dots}</ul>,
arrows: true,
autoplay: false,
autoplaySpeed: 3000,
beforeChange: null,
centerMode: false,
centerPadding: "50px",
className: "",
cssEase: "ease",
customPaging: i => <button>{i + 1}</button>,
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(
<li key={i} className={className}>
{React.cloneElement(this.props.customPaging(i), { onClick })}
</li>
);
}
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 = <Dots {...dotProps} />;
}
var prevArrow, nextArrow;
let arrowProps = extractObject(spec, [
"infinite",
"centerMode",
"currentSlide",
"slideCount",
"slidesToShow",
"prevArrow",
"nextArrow"
]);
arrowProps.clickHandler = this.changeSlide;
if (this.props.arrows) {
prevArrow = <PrevArrow {...arrowProps} />;
nextArrow = <NextArrow {...arrowProps} />;
}
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 (
<div {...innerSliderProps}>
{!this.props.unslick ? prevArrow : ""}
<div ref={this.listRefHandler} {...listProps}>
<Track ref={this.trackRefHandler} {...trackProps}>
{this.props.children}
</Track>
</div>
{!this.props.unslick ? nextArrow : ""}
{!this.props.unslick ? dots : ""}
</div>
);
};
}
================================================
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(<div key={10 * i + j}>{row}</div>);
}
if (settings.variableWidth) {
newChildren.push(
<div key={i} style={{ width: currentWidth }}>
{newSlide}
</div>
);
} else {
newChildren.push(<div key={i}>{newSlide}</div>);
}
}
if (settings === "unslick") {
const className = "regular slider " + (this.props.className || "");
return <div className={className}>{children}</div>;
} else if (newChildren.length <= settings.slidesToShow) {
settings.unslick = true;
}
return (
<InnerSlider
style={this.props.style}
ref={this.innerSliderRefHandler}
{...filterSettings(settings)}
>
{newChildren}
</InnerSlider>
);
}
}
================================================
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 = <div />;
}
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 (
<div
ref={this.handleRef}
className="slick-track"
style={this.props.trackStyle}
{...mouseEvents}
>
{slides}
</div>
);
}
}
================================================
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 (centerM
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
SYMBOL INDEX (105 symbols across 52 files)
FILE: __tests__/TestComponents.js
function GenericSliderComponent (line 4) | function GenericSliderComponent({ slidesCount, settings }) {
FILE: __tests__/afterChange.test.js
class SliderWithAfterChange (line 11) | class SliderWithAfterChange extends React.Component {
method constructor (line 12) | constructor(props) {
method afterChange (line 20) | afterChange(currentSlide) {
method render (line 26) | render() {
FILE: __tests__/arrows.js
function CustomArrow (line 13) | function CustomArrow(props) {
FILE: __tests__/beforeChange.test.js
class SliderWithBeforeChange (line 11) | class SliderWithBeforeChange extends React.Component {
method constructor (line 12) | constructor(props) {
method beforeChange (line 20) | beforeChange(currentSlide, nextSlide) {
method render (line 26) | render() {
FILE: __tests__/regression/fix-1813.test.js
function MultipleItems (line 23) | function MultipleItems() {
FILE: __tests__/regression/fix-2315.test.js
function TestSlider (line 8) | function TestSlider() {
FILE: __tests__/regression/fix-2414.test.js
function SliderWithOneSlide (line 15) | function SliderWithOneSlide() {
function SliderWithUnslick (line 23) | function SliderWithUnslick() {
FILE: __tests__/testUtils.js
function activeSlideInLastTransition (line 18) | function activeSlideInLastTransition(
function createReactSliderChildren (line 31) | function createReactSliderChildren(noOfSlides) {
function createReactSlider (line 41) | function createReactSlider({ noOfSlides, ...props }) {
function createInnerSlider (line 47) | function createInnerSlider({ noOfSlides, ...settings }) {
function createInnerSliderWrapper (line 58) | function createInnerSliderWrapper(settings) {
function createJQuerySliderChildren (line 63) | function createJQuerySliderChildren(noOfSlides) {
function testSliderScroll (line 72) | function testSliderScroll({ direction, ...settings }) {
function testSlider (line 130) | function testSlider(settings) {
FILE: docs/demos.js
class App (line 36) | class App extends React.Component {
method render (line 37) | render() {
FILE: docs/docs.js
class Docs (line 6) | class Docs extends React.Component {
method render (line 7) | render() {
FILE: docs/single-demo.js
function App (line 45) | function App() {
FILE: examples/AdaptiveHeight.js
function AdaptiveHeight (line 4) | function AdaptiveHeight() {
FILE: examples/AppendDots.js
function AppendDots (line 4) | function AppendDots() {
FILE: examples/AsNavFor.js
function AsNavFor (line 4) | function AsNavFor() {
FILE: examples/AutoPlay.js
function AutoPlay (line 4) | function AutoPlay() {
FILE: examples/AutoPlayMethods.js
function AutoPlayMethods (line 4) | function AutoPlayMethods() {
FILE: examples/CenterMode.js
function CenterMode (line 4) | function CenterMode() {
FILE: examples/CustomArrows.js
function SampleNextArrow (line 4) | function SampleNextArrow(props) {
function SamplePrevArrow (line 15) | function SamplePrevArrow(props) {
function CustomArrows (line 26) | function CustomArrows() {
FILE: examples/CustomPaging.js
function CustomPaging (line 5) | function CustomPaging() {
FILE: examples/CustomSlides.js
function CustomSlide (line 4) | function CustomSlide(props) {
function CustomSlides (line 13) | function CustomSlides() {
FILE: examples/DynamicSlides.js
function DynamicSlides (line 4) | function DynamicSlides() {
FILE: examples/Fade.js
function Fade (line 5) | function Fade() {
FILE: examples/FocusOnSelect.js
function FocusOnSelect (line 4) | function FocusOnSelect() {
FILE: examples/LazyLoad.js
function LazyLoad (line 5) | function LazyLoad() {
FILE: examples/MultipleItems.js
function MultipleItems (line 4) | function MultipleItems() {
FILE: examples/MultipleRows.js
function MultipleRows (line 4) | function MultipleRows() {
FILE: examples/PauseOnHover.js
function PauseOnHover (line 4) | function PauseOnHover() {
FILE: examples/PreviousNextMethods.js
function PreviousNextMethods (line 4) | function PreviousNextMethods() {
FILE: examples/Resizable.js
function Resizable (line 4) | function Resizable() {
FILE: examples/Responsive.js
function Responsive (line 4) | function Responsive() {
FILE: examples/Rtl.js
function Rtl (line 4) | function Rtl() {
FILE: examples/SimpleSlider.js
function SimpleSlider (line 4) | function SimpleSlider() {
FILE: examples/SlickGoTo.js
function SlickGoTo (line 5) | function SlickGoTo() {
FILE: examples/SlideChangeHooks.js
function SlideChangeHooks (line 4) | function SlideChangeHooks() {
FILE: examples/SwipeToSlide.js
function SwipeToSlide (line 4) | function SwipeToSlide() {
FILE: examples/UnevenSetsFinite.js
function UnevenSetsFinite (line 4) | function UnevenSetsFinite() {
FILE: examples/UnevenSetsInfinite.js
function UnevenSetsInfinite (line 4) | function UnevenSetsInfinite() {
FILE: examples/VariableWidth.js
function VariableWidth (line 4) | function VariableWidth() {
FILE: examples/VerticalMode.js
function VerticalMode (line 4) | function VerticalMode() {
FILE: examples/VerticalSwipeToSlide.js
function VerticalSwipeToSlide (line 4) | function VerticalSwipeToSlide() {
FILE: gulpfile.js
constant DEV_PORT (line 13) | const DEV_PORT = process.env.DEV_PORT || 8080;
FILE: playwright-tests/features/responsive/responsive.spec.tsx
function activeSlidesCount (line 6) | async function activeSlidesCount(component) {
FILE: playwright-tests/features/responsive/responsive.story.tsx
function Responsive (line 4) | function Responsive() {
FILE: playwright-tests/regression/fix-1930/fix-1930.story.tsx
function VerticalModeFinite (line 4) | function VerticalModeFinite() {
function VerticalModeInfinite (line 23) | function VerticalModeInfinite() {
FILE: playwright-tests/sample/sample.story.tsx
function App (line 3) | function App() {
FILE: src/arrows.js
class PrevArrow (line 7) | class PrevArrow extends React.PureComponent {
method clickHandler (line 8) | clickHandler(options, e) {
method render (line 14) | render() {
class NextArrow (line 58) | class NextArrow extends React.PureComponent {
method clickHandler (line 59) | clickHandler(options, e) {
method render (line 65) | render() {
FILE: src/dots.js
class Dots (line 21) | class Dots extends React.PureComponent {
method clickHandler (line 22) | clickHandler(options, e) {
method render (line 28) | render() {
FILE: src/inner-slider.js
class InnerSlider (line 30) | class InnerSlider extends React.Component {
method constructor (line 31) | constructor(props) {
method didPropsChange (line 128) | didPropsChange(prevProps) {
FILE: src/slider.js
class Slider (line 9) | class Slider extends React.Component {
method constructor (line 10) | constructor(props) {
method media (line 20) | media(query, handler) {
method componentDidMount (line 33) | componentDidMount() {
method componentWillUnmount (line 75) | componentWillUnmount() {
method render (line 92) | render() {
FILE: src/track.js
class Track (line 203) | class Track extends React.PureComponent {
method render (line 210) | render() {
FILE: src/utils/innerSliderUtils.js
function clamp (line 4) | function clamp(number, lowerBound, upperBound) {
function filterSettings (line 865) | function filterSettings(settings) {
FILE: test-utils.js
function getSlidesCount (line 3) | function getSlidesCount(container) {
function getSlides (line 7) | function getSlides(container) {
function getClonesCount (line 11) | function getClonesCount(container) {
function getActiveSlidesCount (line 15) | function getActiveSlidesCount(container) {
function getCurrentSlide (line 19) | function getCurrentSlide(container) {
function getCurrentSlideContent (line 23) | function getCurrentSlideContent(container) {
function getButtons (line 28) | function getButtons(container) {
function getButtonsListItem (line 32) | function getButtonsListItem(container) {
function getButtonsLength (line 35) | function getButtonsLength(container) {
function hasClass (line 38) | function hasClass(element, classname) {
function getActiveButton (line 44) | function getActiveButton(container) {
function getActiveSlide (line 55) | function getActiveSlide(container) {
function getActiveSlides (line 59) | function getActiveSlides(container) {
function getActiveSlidesText (line 63) | function getActiveSlidesText(container) {
function clickNext (line 68) | function clickNext(container) {
function clickPrevious (line 78) | function clickPrevious(container) {
function hasDots (line 88) | function hasDots(container) {
function hasArrows (line 92) | function hasArrows(container) {
Condensed preview — 101 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (210K chars).
[
{
"path": ".babelrc",
"chars": 140,
"preview": "{\n \"presets\": [\n \"@babel/preset-env\",\n \"@babel/preset-react\"\n ],\n \"plugins\": [\n \"@babel/plugin-proposal-clas"
},
{
"path": ".eslintrc",
"chars": 646,
"preview": "{\n \"rules\": {\n \"no-extra-parens\": 0,\n \"react/jsx-uses-vars\": 1,\n \"strict\": 0,\n \"no-underscore-dangle\": 0,\n "
},
{
"path": ".github/FUNDING.yml",
"chars": 44,
"preview": "github: akiran\nopen_collective: react-slick\n"
},
{
"path": ".github/ISSUE_TEMPLATE.md",
"chars": 309,
"preview": "<!-- Love react-slick? Please consider supporting our collective:\n👉 https://opencollective.com/react-slick/donate -->\n\n"
},
{
"path": ".gitignore",
"chars": 322,
"preview": "node_modules\nbower_components\n.sass-cache\nbuild\ndemos/*\ndemos1\nTODO.md\nnpm-debug.log\nlib\n*.sublime-*\n.idea\ndist\nyarn.loc"
},
{
"path": ".npmignore",
"chars": 173,
"preview": "bower_components\n.sass-cache\nbuild\ndemos\ndemos1\nTODO.md\ntest\ntestlib\nbower.json\ngulpfile.js\nkarma.conf.js\nLICENSE\nwebpac"
},
{
"path": ".prettierrc",
"chars": 19,
"preview": "trailingComma: none"
},
{
"path": ".travis.yml",
"chars": 42,
"preview": "language: node_js\n\nnode_js:\n - \"stable\"\n\n"
},
{
"path": "CHANGELOG.md",
"chars": 4170,
"preview": "# Change Log\n\n## [Unreleased](https://github.com/akiran/react-slick/tree/HEAD)\n\n## 0.22.0\n\n**Release Changes**\n\n- Intern"
},
{
"path": "CONTRIBUTING.md",
"chars": 4845,
"preview": "# Contribute\n\n## Introduction\n\nFirst, thank you for considering contributing to react-slick! It's people like you that m"
},
{
"path": "LICENSE",
"chars": 1080,
"preview": "The MIT License (MIT)\n\nCopyright (c) 2014 Kiran Abburi\n\nPermission is hereby granted, free of charge, to any person obta"
},
{
"path": "README.md",
"chars": 2252,
"preview": "### react-slick\n\n[](#backers) [!["
},
{
"path": "__tests__/SimpleSlider.test.js",
"chars": 1523,
"preview": "// includes tests of\n// SimpleSlider, MultipleItems\nimport { testSlider } from \"./testUtils\";\n\ndescribe(\"SimpleSlider wi"
},
{
"path": "__tests__/TestComponents.js",
"chars": 340,
"preview": "import React from \"react\";\nimport Slider from \"../src/index\";\n\nexport function GenericSliderComponent({ slidesCount, set"
},
{
"path": "__tests__/afterChange.test.js",
"chars": 1315,
"preview": "import React from \"react\";\nimport { render, fireEvent } from \"@testing-library/react\";\nimport Slider from \"../src/index\""
},
{
"path": "__tests__/arrows.js",
"chars": 1985,
"preview": "/**\n * Arrow component tests\n */\n\nsinon.stub(console, \"error\");\n\nimport { render } from \"@testing-library/react\";\nimport"
},
{
"path": "__tests__/beforeChange.test.js",
"chars": 1208,
"preview": "import React from \"react\";\nimport { render } from \"@testing-library/react\";\nimport Slider from \"../src/index\";\nimport {\n"
},
{
"path": "__tests__/lazyLoad.test.js",
"chars": 2211,
"preview": "import { render } from \"@testing-library/react\";\nimport assign from \"object-assign\";\nimport { getRequiredLazySlides } fr"
},
{
"path": "__tests__/observations.json",
"chars": 1788,
"preview": "{\n \"jQueryTest\": [\n {\n \"observation\": \"Clicks on arrows are not working properly\",\n \"possibleCause\": \"Anim"
},
{
"path": "__tests__/regression/fix-1813.test.js",
"chars": 4438,
"preview": "//Test fix of #1813: In infinite mode, when slidesToShow equal to the length of slides, infinite functionality is not wo"
},
{
"path": "__tests__/regression/fix-1874.test.js",
"chars": 1003,
"preview": "// Test fix of#1874: \"slick-current\" is always on first slide despite initialSlide != 0\n\nimport React from \"react\";\nimp"
},
{
"path": "__tests__/regression/fix-2315.test.js",
"chars": 1160,
"preview": "// Test fix of #2315: Slider crashing after a state change in parent component\nimport React from \"react\";\nimport { rende"
},
{
"path": "__tests__/regression/fix-2414.test.js",
"chars": 1939,
"preview": "// Test fix of #2414: Extra clones in infinite mode when there is only one slide or unslick is true\nimport React from \"r"
},
{
"path": "__tests__/sliderStyles.test.js",
"chars": 1201,
"preview": "import assign from \"object-assign\";\nimport { getRequiredLazySlides } from \"../src/utils/innerSliderUtils\";\nimport {\n cr"
},
{
"path": "__tests__/testUtils.js",
"chars": 5732,
"preview": "import React from \"react\";\nimport $ from \"jquery\";\nimport assign from \"object-assign\";\nimport { render } from \"@testing-"
},
{
"path": "__tests__/utils/filterSettings.test.js",
"chars": 597,
"preview": "import { filterSettings } from \"../../src/utils/innerSliderUtils\";\n\ndescribe(\"filterSettings\", () => {\n it(\"returns emp"
},
{
"path": "docs/api.md",
"chars": 2783,
"preview": "### Methods\n\n| Name | Arguments | Description |\n| ------------ | ------------------ | -"
},
{
"path": "docs/common.md",
"chars": 1883,
"preview": "#### `responsive` property\n\nArray of objects in the form of `{ breakpoint: int, settings: { ... } }` The breakpoint _int"
},
{
"path": "docs/demos.js",
"chars": 2468,
"preview": "\"use strict\";\n\nimport React from \"react\";\nimport Slider from \"../src/slider\";\n\nimport SimpleSlider from \"../examples/Sim"
},
{
"path": "docs/docs.css",
"chars": 1808,
"preview": "\nh3 {\n background: #00558B;\n color: #fff;\n font-size: 36px;\n line-height: 100px;\n margin: 10px;\n padding: 2%;\n po"
},
{
"path": "docs/docs.js",
"chars": 423,
"preview": "\"use strict\";\n\nimport React from \"react\";\nimport Demos from \"./demos\";\n\nexport default class Docs extends React.Componen"
},
{
"path": "docs/index.html",
"chars": 938,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n "
},
{
"path": "docs/index.js",
"chars": 343,
"preview": "\"use strict\";\n\nimport React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport Docs from \"./docs\";\n\ncon"
},
{
"path": "docs/routes.js",
"chars": 318,
"preview": "\"use strict\";\n\nvar React = require(\"react\");\nvar Router = require(\"react-router\");\nvar Route = Router.Route;\nvar Docs = "
},
{
"path": "docs/scripts/generateExampleConfigs.js",
"chars": 2672,
"preview": "const React = require(\"react\");\nconst fs = require(\"fs\");\nconst babel = require(\"babel-core\");\nconst ReactDOMServer = re"
},
{
"path": "docs/scripts/generateExamples.js",
"chars": 2024,
"preview": "const fs = require(\"fs\");\nconst exampleConfigs = require(\"./configs.json\");\nconst exec = require(\"child_process\").exec;\n"
},
{
"path": "docs/single-demo.js",
"chars": 1432,
"preview": "\"use strict\";\n\nimport React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport Slider from \"../src/slid"
},
{
"path": "docs/slick-theme.css",
"chars": 3135,
"preview": "@charset 'UTF-8';\n/* Slider */\n.slick-loading .slick-list\n{\n background: #fff url('./ajax-loader.gif') center center "
},
{
"path": "docs/slick.css",
"chars": 1776,
"preview": "/* Slider */\n.slick-slider\n{\n position: relative;\n\n display: block;\n box-sizing: border-box;\n\n -webkit-user-"
},
{
"path": "examples/AdaptiveHeight.js",
"chars": 771,
"preview": "import React from \"react\";\nimport Slider from \"react-slick\";\n\nfunction AdaptiveHeight() {\n const settings = {\n class"
},
{
"path": "examples/AppendDots.js",
"chars": 1078,
"preview": "import React from \"react\";\nimport Slider from \"react-slick\";\n\nfunction AppendDots() {\n const settings = {\n dots: tru"
},
{
"path": "examples/AsNavFor.js",
"chars": 1415,
"preview": "import React, { useState, useEffect, useRef } from \"react\";\nimport Slider from \"react-slick\";\n\nfunction AsNavFor() {\n c"
},
{
"path": "examples/AutoPlay.js",
"chars": 713,
"preview": "import React from \"react\";\nimport Slider from \"react-slick\";\n\nfunction AutoPlay() {\n const settings = {\n dots: true,"
},
{
"path": "examples/AutoPlayMethods.js",
"chars": 1157,
"preview": "import React, { useRef } from \"react\";\nimport Slider from \"react-slick\";\n\nfunction AutoPlayMethods() {\n let sliderRef ="
},
{
"path": "examples/CenterMode.js",
"chars": 698,
"preview": "import React, { Component } from \"react\";\nimport Slider from \"react-slick\";\n\nfunction CenterMode() {\n const settings = "
},
{
"path": "examples/CustomArrows.js",
"chars": 1189,
"preview": "import React, { Component } from \"react\";\nimport Slider from \"react-slick\";\n\nfunction SampleNextArrow(props) {\n const {"
},
{
"path": "examples/CustomPaging.js",
"chars": 915,
"preview": "import React, { Component } from \"react\";\nimport Slider from \"react-slick\";\nimport { baseUrl } from \"./config\";\n\nfunctio"
},
{
"path": "examples/CustomSlides.js",
"chars": 722,
"preview": "import React, { Component } from \"react\";\nimport Slider from \"react-slick\";\n\nfunction CustomSlide(props) {\n const { ind"
},
{
"path": "examples/DynamicSlides.js",
"chars": 825,
"preview": "import React, { useState } from \"react\";\nimport Slider from \"react-slick\";\n\nfunction DynamicSlides() {\n const [slides, "
},
{
"path": "examples/Fade.js",
"chars": 739,
"preview": "import React from \"react\";\nimport Slider from \"react-slick\";\nimport { baseUrl } from \"./config\";\n\nfunction Fade() {\n co"
},
{
"path": "examples/FocusOnSelect.js",
"chars": 750,
"preview": "import React, { Component } from \"react\";\nimport Slider from \"react-slick\";\n\nfunction FocusOnSelect() {\n const settings"
},
{
"path": "examples/LazyLoad.js",
"chars": 760,
"preview": "import React, { Component } from \"react\";\nimport Slider from \"react-slick\";\nimport { baseUrl } from \"./config\";\n\nfunctio"
},
{
"path": "examples/MultipleItems.js",
"chars": 804,
"preview": "import React from \"react\";\nimport Slider from \"react-slick\";\n\nfunction MultipleItems() {\n const settings = {\n dots: "
},
{
"path": "examples/MultipleRows.js",
"chars": 1228,
"preview": "import React from \"react\";\nimport Slider from \"react-slick\";\n\nfunction MultipleRows() {\n const settings = {\n classNa"
},
{
"path": "examples/PauseOnHover.js",
"chars": 718,
"preview": "import React, { Component } from \"react\";\nimport Slider from \"react-slick\";\n\nfunction PauseOnHover() {\n var settings = "
},
{
"path": "examples/PreviousNextMethods.js",
"chars": 1186,
"preview": "import React, { useRef } from \"react\";\nimport Slider from \"react-slick\";\n\nfunction PreviousNextMethods() {\n let sliderR"
},
{
"path": "examples/Resizable.js",
"chars": 1337,
"preview": "import React, { useState } from \"react\";\nimport Slider from \"react-slick\";\n\nfunction Resizable() {\n const [display, set"
},
{
"path": "examples/Responsive.js",
"chars": 1249,
"preview": "import React from \"react\";\nimport Slider from \"react-slick\";\n\nfunction Responsive() {\n var settings = {\n dots: true,"
},
{
"path": "examples/Rtl.js",
"chars": 707,
"preview": "import React from \"react\";\nimport Slider from \"react-slick\";\n\nfunction Rtl() {\n const settings = {\n dots: true,\n "
},
{
"path": "examples/SimpleSlider.js",
"chars": 652,
"preview": "import React from \"react\";\nimport Slider from \"react-slick\";\n\nfunction SimpleSlider() {\n const settings = {\n dots: t"
},
{
"path": "examples/SlickGoTo.js",
"chars": 1265,
"preview": "import React, { useState, useRef } from \"react\";\nimport Slider from \"react-slick\";\nimport { baseUrl } from \"./config\";\n\n"
},
{
"path": "examples/SlideChangeHooks.js",
"chars": 1310,
"preview": "import React, { useState } from \"react\";\nimport Slider from \"react-slick\";\n\nfunction SlideChangeHooks() {\n const [oldSl"
},
{
"path": "examples/SwipeToSlide.js",
"chars": 984,
"preview": "import React, { Component } from \"react\";\nimport Slider from \"react-slick\";\n\nfunction SwipeToSlide() {\n const settings "
},
{
"path": "examples/UnevenSetsFinite.js",
"chars": 659,
"preview": "import React from \"react\";\nimport Slider from \"react-slick\";\n\nfunction UnevenSetsFinite() {\n var settings = {\n dots:"
},
{
"path": "examples/UnevenSetsInfinite.js",
"chars": 662,
"preview": "import React from \"react\";\nimport Slider from \"react-slick\";\n\nfunction UnevenSetsInfinite() {\n var settings = {\n dot"
},
{
"path": "examples/VariableWidth.js",
"chars": 861,
"preview": "import React from \"react\";\nimport Slider from \"react-slick\";\n\nfunction VariableWidth() {\n const settings = {\n classN"
},
{
"path": "examples/VerticalMode.js",
"chars": 918,
"preview": "import React, { Component } from \"react\";\nimport Slider from \"react-slick\";\n\nfunction VerticalMode() {\n const settings "
},
{
"path": "examples/VerticalSwipeToSlide.js",
"chars": 958,
"preview": "import React, { Component } from \"react\";\nimport Slider from \"react-slick\";\n\nfunction VerticalSwipeToSlide() {\n const s"
},
{
"path": "examples/__tests__/CentreMode.test.js",
"chars": 1999,
"preview": "import React from \"react\";\nimport CenterMode from \"../CenterMode\";\nimport { render } from \"@testing-library/react\";\nimpo"
},
{
"path": "examples/__tests__/Fade.js",
"chars": 748,
"preview": "import React from \"react\";\nimport { render } from \"@testing-library/react\";\nimport Fade from \"../Fade\";\nimport { getActi"
},
{
"path": "examples/__tests__/FocusOnSelect.test.js",
"chars": 1030,
"preview": "import React from \"react\";\nimport { render, fireEvent } from \"@testing-library/react\";\nimport { html as beautify_html } "
},
{
"path": "examples/__tests__/MultipleItems.test.js",
"chars": 3817,
"preview": "import React from \"react\";\nimport { render, fireEvent } from \"@testing-library/react\";\nimport { html as beautify_html } "
},
{
"path": "examples/__tests__/SimpleSlider.test.js",
"chars": 4616,
"preview": "import React from \"react\";\nimport SimpleSlider from \"../SimpleSlider\";\nimport { render, fireEvent, waitFor, screen } fro"
},
{
"path": "examples/__tests__/SlickGoTo.test.js",
"chars": 1984,
"preview": "import React from \"react\";\nimport { fireEvent, getRoles, render } from \"@testing-library/react\";\nimport SlickGoTo from \""
},
{
"path": "examples/__tests__/UnevenSets.test.js",
"chars": 4471,
"preview": "import React from \"react\";\nimport { render, fireEvent } from \"@testing-library/react\";\nimport UnevenSetsFinite from \"../"
},
{
"path": "examples/config.js",
"chars": 214,
"preview": "// export const baseUrl =\n// process.env.NODE_ENV === \"production\"\n// ? \"https://s3.amazonaws.com/static.neostack."
},
{
"path": "gulpfile.js",
"chars": 3433,
"preview": "\"use strict\";\n\nvar gulp = require(\"gulp\");\nvar del = require(\"del\");\nvar rename = require(\"gulp-rename\");\nvar webpack = "
},
{
"path": "jest.config.js",
"chars": 237,
"preview": "module.exports = {\n testEnvironment: \"jsdom\",\n setupFilesAfterEnv: [\"<rootDir>/test-setup.js\"],\n testPathIgnorePatter"
},
{
"path": "package.json",
"chars": 3840,
"preview": "{\n \"name\": \"react-slick\",\n \"version\": \"0.31.0\",\n \"description\": \" React port of slick carousel\",\n \"main\": \"./lib\",\n "
},
{
"path": "playwright/index.html",
"chars": 297,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "playwright/index.jsx",
"chars": 82,
"preview": "// Import styles, initialize component theme here.\n// import '../src/common.css';\n"
},
{
"path": "playwright-ct.config.js",
"chars": 1547,
"preview": "// @ts-check\nconst { defineConfig, devices } = require(\"@playwright/experimental-ct-react\");\n/**\n * @see https://playwri"
},
{
"path": "playwright-tests/features/responsive/responsive.spec.tsx",
"chars": 1406,
"preview": "import { test, expect } from \"@playwright/experimental-ct-react\";\nimport Responsive from \"./responsive.story\";\n\ntest.use"
},
{
"path": "playwright-tests/features/responsive/responsive.story.tsx",
"chars": 1254,
"preview": "import React from \"react\";\nimport Slider from \"../../../src-jsx\";\n\nfunction Responsive() {\n var settings = {\n dots: "
},
{
"path": "playwright-tests/regression/fix-1930/fix-1930.spec.tsx",
"chars": 934,
"preview": "// Test fix of #1930: Extra height of slider in vertical mode when number of slides is less than or equal to slidesToSho"
},
{
"path": "playwright-tests/regression/fix-1930/fix-1930.story.tsx",
"chars": 751,
"preview": "import Slider from \"../../../src-jsx\";\nimport React from \"react\";\n\nexport function VerticalModeFinite() {\n const settin"
},
{
"path": "playwright-tests/sample/sample.spec.tsx",
"chars": 794,
"preview": "//Imports the test and expect functions from the Playwright ct-react module\nimport { test, expect } from \"@playwright/ex"
},
{
"path": "playwright-tests/sample/sample.story.tsx",
"chars": 95,
"preview": "import React from \"react\";\n\nexport default function App() {\n return <div>Learn React</div>;\n}\n"
},
{
"path": "src/arrows.js",
"chars": 2438,
"preview": "\"use strict\";\n\nimport React from \"react\";\nimport classnames from \"classnames\";\nimport { canGoNext } from \"./utils/innerS"
},
{
"path": "src/default-props.js",
"chars": 1208,
"preview": "import React from \"react\";\n\nlet defaultProps = {\n accessibility: true,\n adaptiveHeight: false,\n afterChange: null,\n "
},
{
"path": "src/dots.js",
"chars": 2116,
"preview": "\"use strict\";\n\nimport React from \"react\";\nimport classnames from \"classnames\";\nimport { clamp } from \"./utils/innerSlide"
},
{
"path": "src/index.js",
"chars": 55,
"preview": "import Slider from \"./slider\";\n\nexport default Slider;\n"
},
{
"path": "src/initial-state.js",
"chars": 608,
"preview": "const initialState = {\n animating: false,\n autoplaying: null,\n currentDirection: 0,\n currentLeft: null,\n currentSli"
},
{
"path": "src/inner-slider.js",
"chars": 22841,
"preview": "\"use strict\";\n\nimport React from \"react\";\nimport initialState from \"./initial-state\";\nimport debounce from \"lodash.debou"
},
{
"path": "src/slider.js",
"chars": 6535,
"preview": "\"use strict\";\n\nimport React from \"react\";\nimport { InnerSlider } from \"./inner-slider\";\nimport json2mq from \"json2mq\";\ni"
},
{
"path": "src/track.js",
"chars": 6413,
"preview": "\"use strict\";\n\nimport React from \"react\";\nimport classnames from \"classnames\";\nimport {\n lazyStartIndex,\n lazyEndIndex"
},
{
"path": "src/utils/innerSliderUtils.js",
"chars": 24521,
"preview": "import React from \"react\";\nimport defaultProps from \"../default-props\";\n\nexport function clamp(number, lowerBound, upper"
},
{
"path": "test-setup.js",
"chars": 346,
"preview": "import \"@testing-library/jest-dom/extend-expect\";\nimport \"regenerator-runtime/runtime\";\n\n//Fix for \"matchMedia not prese"
},
{
"path": "test-utils.js",
"chars": 2740,
"preview": "import { render, fireEvent, waitFor, screen } from \"@testing-library/react\";\n\nexport function getSlidesCount(container) "
},
{
"path": "webpack.config.dist.js",
"chars": 839,
"preview": "var webpack = require(\"webpack\");\nvar path = require(\"path\");\n\nmodule.exports = {\n mode: \"production\",\n\n entry: \"./src"
},
{
"path": "webpack.config.js",
"chars": 781,
"preview": "var webpack = require(\"webpack\");\nvar path = require(\"path\");\n\nmodule.exports = {\n mode: \"production\",\n devtool: \"sour"
}
]
About this extraction
This page contains the full source code of the akiran/react-slick GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 101 files (190.1 KB), approximately 53.0k tokens, and a symbol index with 105 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.