-
);
}
diff --git a/examples/AdaptiveHeight.js b/examples/AdaptiveHeight.js
index 7ecad701d..665c6c12c 100644
--- a/examples/AdaptiveHeight.js
+++ b/examples/AdaptiveHeight.js
@@ -1,43 +1,43 @@
-import React, { Component } from "react";
-import Slider from "../src/slider";
+import React from "react";
+import Slider from "react-slick";
-export default class AdaptiveHeight extends Component {
- render() {
- var settings = {
- className: "",
- dots: true,
- infinite: true,
- slidesToShow: 1,
- slidesToScroll: 1,
- adaptiveHeight: true
- };
- return (
-
-
-
-
- );
- }
+function AdaptiveHeight() {
+ const settings = {
+ className: "",
+ dots: true,
+ infinite: true,
+ slidesToShow: 1,
+ slidesToScroll: 1,
+ adaptiveHeight: true
+ };
+
+ return (
+ Adaptive height
-
-
- 1
-
-
- 2
-Hello
-
-
- 3
-See ....
-Height is adaptive
-
-
- 4
-
-
- 5
-
-
- 6
-
+
+
+
+ );
}
+
+export default AdaptiveHeight;
diff --git a/examples/AppendDots.js b/examples/AppendDots.js
index f9001ecc5..91f285b52 100644
--- a/examples/AppendDots.js
+++ b/examples/AppendDots.js
@@ -1,61 +1,59 @@
-import React, { Component } from "react";
-import Slider from "../src/slider";
+import React from "react";
+import Slider from "react-slick";
-export default class AppendDots extends Component {
- render() {
- const settings = {
- dots: true,
- infinite: true,
- speed: 500,
- slidesToShow: 1,
- slidesToScroll: 1,
- appendDots: dots => (
-
+
+ 1
+
+
+ 2
+Hello
+
+
+ 3
+See ....
+Height is adaptive
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
-
- {dots}
+
+ ),
+ customPaging: i => (
+ - {dots}
+ {i + 1}
+
+ )
+ };
+ return (
+
+
+
+
- ),
- customPaging: i => (
- 1
- {i + 1}
+
+ );
}
+export default AppendDots;
diff --git a/examples/AsNavFor.js b/examples/AsNavFor.js
index caacb2be8..18cf09847 100644
--- a/examples/AsNavFor.js
+++ b/examples/AsNavFor.js
@@ -1,78 +1,69 @@
-import React, { Component } from "react";
-import Slider from "../src/slider";
+import React, { useState, useEffect, useRef } from "react";
+import Slider from "react-slick";
-export default class AsNavFor extends Component {
- constructor(props) {
- super(props);
- this.state = {
- nav1: null,
- nav2: null
- };
- }
+function AsNavFor() {
+ const [nav1, setNav1] = useState(null);
+ const [nav2, setNav2] = useState(null);
+ let sliderRef1 = useRef(null);
+ let sliderRef2 = useRef(null);
- componentDidMount() {
- this.setState({
- nav1: this.slider1,
- nav2: this.slider2
- });
- }
-
- render() {
- return (
-
+
- )
- };
- return (
- 2
-
-
-
- );
- }
+ Append Dots
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+
+ 6
+
- (this.slider1 = slider)}
- >
-
- (this.slider2 = slider)}
- slidesToShow={3}
- swipeToSlide={true}
- focusOnSelect={true}
- >
-
-
- );
- }
+ useEffect(() => {
+ setNav1(sliderRef1);
+ setNav2(sliderRef2);
+ }, []);
+ return (
+ Slider Syncing (AsNavFor)
-First Slider
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-Second Slider
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
+ (sliderRef1 = slider)}>
+
+ (sliderRef2 = slider)}
+ slidesToShow={3}
+ swipeToSlide={true}
+ focusOnSelect={true}
+ >
+
+
+ );
}
+
+export default AsNavFor;
diff --git a/examples/AutoPlay.js b/examples/AutoPlay.js
index 73e99d577..32520d0cc 100644
--- a/examples/AutoPlay.js
+++ b/examples/AutoPlay.js
@@ -1,42 +1,41 @@
-import React, { Component } from "react";
-import Slider from "../src/slider";
+import React from "react";
+import Slider from "react-slick";
-export default class AutoPlay extends Component {
- render() {
- const settings = {
- dots: true,
- infinite: true,
- slidesToShow: 3,
- slidesToScroll: 1,
- autoplay: true,
- speed: 2000,
- autoplaySpeed: 2000,
- cssEase: "linear"
- };
- return (
- Slider Syncing (AsNavFor)
+First Slider
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+Second Slider
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
-
-
-
- );
- }
+function AutoPlay() {
+ const settings = {
+ dots: true,
+ infinite: true,
+ slidesToShow: 3,
+ slidesToScroll: 1,
+ autoplay: true,
+ speed: 2000,
+ autoplaySpeed: 2000,
+ cssEase: "linear"
+ };
+ return (
+ Auto Play
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
+
+
+
+ );
}
+
+export default AutoPlay;
diff --git a/examples/AutoPlayMethods.js b/examples/AutoPlayMethods.js
index 0fdd86346..573c8d5a9 100644
--- a/examples/AutoPlayMethods.js
+++ b/examples/AutoPlayMethods.js
@@ -1,59 +1,55 @@
-import React, { Component } from "react";
-import Slider from "../src/slider";
+import React, { useRef } from "react";
+import Slider from "react-slick";
-export default class AutoPlayMethods extends Component {
- constructor(props) {
- super(props);
- this.play = this.play.bind(this);
- this.pause = this.pause.bind(this);
- }
- play() {
- this.slider.slickPlay();
- }
- pause() {
- this.slider.slickPause();
- }
- render() {
- const settings = {
- dots: true,
- infinite: true,
- slidesToShow: 3,
- slidesToScroll: 1,
- autoplay: true,
- autoplaySpeed: 2000
- };
- return (
-
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
- (this.slider = slider)} {...settings}>
-
-
Auto Play & Pause with buttons
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
-
-
+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 (
+ 
-
- );
- },
- dots: true,
- dotsClass: "slick-dots slick-thumb",
- infinite: true,
- speed: 500,
- slidesToShow: 1,
- slidesToScroll: 1
- };
- return (
-
+
+ );
+ },
+ dots: true,
+ dotsClass: "slick-dots slick-thumb",
+ infinite: true,
+ speed: 500,
+ slidesToShow: 1,
+ slidesToScroll: 1
+ };
+ return (
+
+ (sliderRef = slider)} {...settings}>
+
+
+ );
}
+export default AutoPlayMethods;
diff --git a/examples/CenterMode.js b/examples/CenterMode.js
index e67816700..291abafc9 100644
--- a/examples/CenterMode.js
+++ b/examples/CenterMode.js
@@ -1,40 +1,39 @@
import React, { Component } from "react";
-import Slider from "../src/slider";
+import Slider from "react-slick";
-export default class CenterMode extends Component {
- render() {
- const settings = {
- className: "center",
- centerMode: true,
- infinite: true,
- centerPadding: "60px",
- slidesToShow: 3,
- speed: 500
- };
- return (
- Auto Play {"&"} Pause with buttons
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
+
- );
- }
+
-
-
-
- );
- }
+function CenterMode() {
+ const settings = {
+ className: "center",
+ centerMode: true,
+ infinite: true,
+ centerPadding: "60px",
+ slidesToShow: 3,
+ speed: 500
+ };
+ return (
+ Center Mode
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
+
+
+
+ );
}
+
+export default CenterMode;
diff --git a/examples/CustomArrows.js b/examples/CustomArrows.js
index 8f85b86e5..d32dfec60 100644
--- a/examples/CustomArrows.js
+++ b/examples/CustomArrows.js
@@ -1,5 +1,5 @@
import React, { Component } from "react";
-import Slider from "../src/slider";
+import Slider from "react-slick";
function SampleNextArrow(props) {
const { className, style, onClick } = props;
@@ -23,40 +23,39 @@ function SamplePrevArrow(props) {
);
}
-export default class CustomArrows extends Component {
- render() {
- const settings = {
- dots: true,
- infinite: true,
- slidesToShow: 3,
- slidesToScroll: 1,
- nextArrow:
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
-
-
-
- );
- }
+function CustomArrows() {
+ const settings = {
+ dots: true,
+ infinite: true,
+ slidesToShow: 3,
+ slidesToScroll: 1,
+ nextArrow: Custom Arrows
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
+
+
+
+ );
}
+
+export default CustomArrows;
diff --git a/examples/CustomPaging.js b/examples/CustomPaging.js
index 3d369689e..01a5d2b4a 100644
--- a/examples/CustomPaging.js
+++ b/examples/CustomPaging.js
@@ -1,42 +1,41 @@
import React, { Component } from "react";
-import Slider from "../src/slider";
+import Slider from "react-slick";
import { baseUrl } from "./config";
-export default class CenterMode extends Component {
- render() {
- const settings = {
- customPaging: function(i) {
- return (
-
-
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
-
-
-
- );
- }
+function CustomPaging() {
+ const settings = {
+ customPaging: function(i) {
+ return (
+
+ Custom Paging
-
- 
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+ );
}
+
+export default CustomPaging;
diff --git a/examples/CustomSlides.js b/examples/CustomSlides.js
index cbf5f2c6d..01d67c883 100644
--- a/examples/CustomSlides.js
+++ b/examples/CustomSlides.js
@@ -1,38 +1,35 @@
import React, { Component } from "react";
-import Slider from "../src/slider";
+import Slider from "react-slick";
-class CustomSlide extends Component {
- render() {
- const { index, ...props } = this.props;
- return (
-
+
+
+
+
+
+
+
+
+
+
+
+
-
- );
- }
+function CustomSlide(props) {
+ const { index, ...otherProps } = props;
+ return (
+ {index}
-
+
+ );
}
-export default class SimpleSlider extends Component {
- render() {
- const settings = {
- dots: true,
- infinite: true,
- speed: 500,
- slidesToShow: 1,
- slidesToScroll: 1
- };
- return (
- {index}
+
-
-
-
- );
- }
+function CustomSlides() {
+ const settings = {
+ dots: true,
+ infinite: true,
+ speed: 500,
+ slidesToShow: 1,
+ slidesToScroll: 1
+ };
+ return (
+ Custom Slides
-
+
+
+
+ );
}
+
+export default CustomSlides;
diff --git a/examples/DynamicSlides.js b/examples/DynamicSlides.js
index e0e405476..bc5fcd67f 100644
--- a/examples/DynamicSlides.js
+++ b/examples/DynamicSlides.js
@@ -1,45 +1,36 @@
-import React, { Component } from "react";
-import Slider from "../src/slider";
+import React, { useState } from "react";
+import Slider from "react-slick";
-export default class DynamicSlides extends Component {
- constructor(props) {
- super(props);
- this.state = {
- slides: [1, 2, 3, 4, 5, 6]
- };
- this.click = this.click.bind(this);
- }
- click() {
- const { slides } = this.state;
- this.setState({
- slides:
- slides.length === 6 ? [1, 2, 3, 4, 5, 6, 7, 8, 9] : [1, 2, 3, 4, 5, 6]
- });
- }
- render() {
- const settings = {
- dots: true,
- infinite: true,
- speed: 500,
- slidesToShow: 3,
- slidesToScroll: 3
- };
- return (
-
-
- {this.state.slides.map(function(slide) {
- return (
-
-
+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 (
+ Dynamic slides
- -
-
- );
- })}
- {slide}
-
+
+
+ {slides.map(slide => {
+ return (
+
+
+ );
}
+
+export default DynamicSlides;
diff --git a/examples/Fade.js b/examples/Fade.js
index e4ae2c961..a932c0766 100644
--- a/examples/Fade.js
+++ b/examples/Fade.js
@@ -1,36 +1,35 @@
-import React, { Component } from "react";
-import Slider from "../src/slider";
+import React from "react";
+import Slider from "react-slick";
import { baseUrl } from "./config";
-export default class Fade extends Component {
- render() {
- const settings = {
- dots: true,
- fade: true,
- infinite: true,
- speed: 500,
- slidesToShow: 1,
- slidesToScroll: 1,
- waitForAnimate: false
- };
- return (
-
+
+ );
+ })}
+ {slide}
+
-
-
-
- );
- }
+function Fade() {
+ const settings = {
+ dots: true,
+ fade: true,
+ infinite: true,
+ speed: 500,
+ slidesToShow: 1,
+ slidesToScroll: 1,
+ waitForAnimate: false
+ };
+ return (
+ Fade
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+ );
}
+
+export default Fade;
diff --git a/examples/FocusOnSelect.js b/examples/FocusOnSelect.js
index 42eab9d60..d75964608 100644
--- a/examples/FocusOnSelect.js
+++ b/examples/FocusOnSelect.js
@@ -1,40 +1,39 @@
import React, { Component } from "react";
-import Slider from "../src/slider";
+import Slider from "react-slick";
-export default class FocusOnSelect extends Component {
- render() {
- const settings = {
- focusOnSelect: true,
- infinite: true,
- slidesToShow: 3,
- slidesToScroll: 1,
- speed: 500
- };
- return (
-
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
- );
- }
+function FocusOnSelect() {
+ const settings = {
+ focusOnSelect: true,
+ infinite: true,
+ slidesToShow: 3,
+ slidesToScroll: 1,
+ speed: 500
+ };
+ return (
+ FocusOnSelect
-Click on any slide to select and make it current slide
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
+
+
+
+ );
}
+
+export default FocusOnSelect;
diff --git a/examples/LazyLoad.js b/examples/LazyLoad.js
index d5ecfeb74..19c62ce9b 100644
--- a/examples/LazyLoad.js
+++ b/examples/LazyLoad.js
@@ -1,36 +1,35 @@
import React, { Component } from "react";
-import Slider from "../src/slider";
+import Slider from "react-slick";
import { baseUrl } from "./config";
-export default class LazyLoad extends Component {
- render() {
- const settings = {
- dots: true,
- lazyLoad: true,
- infinite: true,
- speed: 500,
- slidesToShow: 1,
- slidesToScroll: 1,
- initialSlide: 2
- };
- return (
- Click on any slide to select and make it current slide
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
-
-
-
- );
- }
+function LazyLoad() {
+ const settings = {
+ dots: true,
+ lazyLoad: true,
+ infinite: true,
+ speed: 500,
+ slidesToShow: 1,
+ slidesToScroll: 1,
+ initialSlide: 2
+ };
+ return (
+ Lazy Load
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+ );
}
+
+export default LazyLoad;
diff --git a/examples/MultipleItems.js b/examples/MultipleItems.js
index a23c8793b..138c48b3f 100644
--- a/examples/MultipleItems.js
+++ b/examples/MultipleItems.js
@@ -1,48 +1,47 @@
-import React, { Component } from "react";
-import Slider from "../src/slider";
+import React from "react";
+import Slider from "react-slick";
-export default class MultipleItems extends Component {
- render() {
- const settings = {
- dots: true,
- infinite: true,
- speed: 500,
- slidesToShow: 3,
- slidesToScroll: 3
- };
- return (
-
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
- );
- }
+function MultipleItems() {
+ const settings = {
+ dots: true,
+ infinite: true,
+ speed: 500,
+ slidesToShow: 3,
+ slidesToScroll: 3
+ };
+ return (
+ Multiple items
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
+
+
+
+ );
}
+
+export default MultipleItems;
diff --git a/examples/MultipleRows.js b/examples/MultipleRows.js
index 4b56b4cbd..833ccd5e7 100644
--- a/examples/MultipleRows.js
+++ b/examples/MultipleRows.js
@@ -1,72 +1,71 @@
-import React, { Component } from "react";
-import Slider from "../src/slider";
+import React from "react";
+import Slider from "react-slick";
-export default class MultipleRows extends Component {
- render() {
- const settings = {
- className: "center",
- centerMode: true,
- infinite: true,
- centerPadding: "60px",
- slidesToShow: 3,
- speed: 500,
- rows: 2,
- slidesPerRow: 2
- };
- return (
-
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
+
+ 7
+
+
+ 8
+
+
+ 9
+
-
-
-
- );
- }
+function MultipleRows() {
+ const settings = {
+ className: "center",
+ centerMode: true,
+ infinite: true,
+ centerPadding: "60px",
+ slidesToShow: 3,
+ speed: 500,
+ rows: 2,
+ slidesPerRow: 2
+ };
+ return (
+ Multiple Rows
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
-
- 10
-
-
- 11
-
-
- 12
-
-
- 13
-
-
- 14
-
-
- 15
-
-
- 16
-
+
+
+
+ );
}
+
+export default MultipleRows;
diff --git a/examples/PauseOnHover.js b/examples/PauseOnHover.js
index 16b4d2660..11ca6d656 100644
--- a/examples/PauseOnHover.js
+++ b/examples/PauseOnHover.js
@@ -1,41 +1,40 @@
import React, { Component } from "react";
-import Slider from "../src/slider";
+import Slider from "react-slick";
-export default class PauseOnHover extends Component {
- render() {
- var settings = {
- dots: true,
- infinite: true,
- slidesToShow: 3,
- slidesToScroll: 1,
- autoplay: true,
- autoplaySpeed: 2000,
- pauseOnHover: true
- };
- return (
-
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
+
+ 7
+
+
+ 8
+
+
+ 9
+
+
+ 10
+
+
+ 11
+
+
+ 12
+
+
+ 13
+
+
+ 14
+
+
+ 15
+
+
+ 16
+
-
-
-
- );
- }
+function PauseOnHover() {
+ var settings = {
+ dots: true,
+ infinite: true,
+ slidesToShow: 3,
+ slidesToScroll: 1,
+ autoplay: true,
+ autoplaySpeed: 2000,
+ pauseOnHover: true
+ };
+ return (
+ Pause On Hover
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
+
+
+
+ );
}
+
+export default PauseOnHover;
diff --git a/examples/PreviousNextMethods.js b/examples/PreviousNextMethods.js
index e3a0ead73..e0ab6093f 100644
--- a/examples/PreviousNextMethods.js
+++ b/examples/PreviousNextMethods.js
@@ -1,58 +1,58 @@
-import React, { Component } from "react";
-import Slider from "../src/slider";
+import React, { useRef } from "react";
+import Slider from "react-slick";
-export default class PreviousNextMethods extends Component {
- constructor(props) {
- super(props);
- this.next = this.next.bind(this);
- this.previous = this.previous.bind(this);
- }
- next() {
- this.slider.slickNext();
- }
- previous() {
- this.slider.slickPrev();
- }
- render() {
- const settings = {
- dots: true,
- infinite: true,
- speed: 500,
- slidesToShow: 1,
- slidesToScroll: 1
- };
- return (
-
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
- (this.slider = c)} {...settings}>
-
-
Previous and Next methods
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
-
-
+function PreviousNextMethods() {
+ let sliderRef = useRef(null);
+ const next = () => {
+ sliderRef.slickNext();
+ };
+ const previous = () => {
+ sliderRef.slickPrev();
+ };
+ const settings = {
+ dots: true,
+ infinite: true,
+ speed: 500,
+ slidesToShow: 1,
+ slidesToScroll: 1
+ };
+ return (
+
+ {
+ sliderRef = slider;
+ }}
+ {...settings}
+ >
+
+
+ );
}
+
+export default PreviousNextMethods;
diff --git a/examples/Resizable.js b/examples/Resizable.js
index d7747fa91..24029b21d 100644
--- a/examples/Resizable.js
+++ b/examples/Resizable.js
@@ -1,83 +1,61 @@
-import React, { Component } from "react";
-import Slider from "../src/slider";
+import React, { useState } from "react";
+import Slider from "react-slick";
-export default class Resizable extends Component {
- state = {
- display: true,
- width: 600
+function Resizable() {
+ const [display, setDisplay] = useState(true);
+ const [width, setWidth] = useState(600);
+
+ const settings = {
+ dots: true,
+ infinite: true,
+ speed: 500,
+ slidesToShow: 3,
+ slidesToScroll: 1
};
- render() {
- const settings = {
- dots: true,
- infinite: true,
- speed: 500,
- slidesToShow: 3,
- slidesToScroll: 1
- };
- return (
-
+
+ 1
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
+
+
- );
- }
+
- /test-setup.js"],
+ testPathIgnorePatterns: ["/node_modules/", "e2e-tests"]
+};
diff --git a/package.json b/package.json
index d93171903..a66283efa 100644
--- a/package.json
+++ b/package.json
@@ -1,26 +1,27 @@
{
"name": "react-slick",
- "version": "0.28.1",
+ "version": "0.30.2",
"description": " React port of slick carousel",
"main": "./lib",
"scripts": {
- "start": "gulp server",
- "demo": "SINGLE_DEMO=true gulp server",
- "build-dev": "gulp clean && gulp sass && gulp copy && webpack",
+ "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": "npm run lib && gulp dist",
- "prepublish": "npm run build",
- "test": "npm run lint && jest",
- "test:watch": "jest --watch",
+ "build": "NODE_OPTIONS=--openssl-legacy-provider npm run lib && NODE_OPTIONS=--openssl-legacy-provider gulp dist",
+ "prepublishOnly": "npm run build",
"lint": "eslint src",
- "gen": "node examples/scripts/generateExampleConfigs.js && node examples/scripts/generateExamples.js && xdg-open docs/jquery.html",
- "precommit": "lint-staged"
+ "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"
},
"author": "Kiran Abburi",
"license": "MIT",
"repository": {
"type": "git",
- "url": "https://github.com/akiran/react-slick"
+ "url": "git+https://github.com/akiran/react-slick.git"
},
"keywords": [
"slick",
@@ -32,47 +33,42 @@
],
"devDependencies": {
"@babel/cli": "^7.0.0",
- "@babel/core": "^7.1.2",
+ "@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",
+ "@testing-library/jest-dom": "^5.16.4",
+ "@testing-library/react": "^13.3.0",
+ "@testing-library/user-event": "^14.3.0",
"autoprefixer": "^7.1.2",
"babel-core": "^7.0.0-bridge.0",
- "babel-eslint": "^9.0.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",
- "enzyme": "^3.2.0",
- "enzyme-adapter-react-16": "^1.1.0",
"es5-shim": "^4.5.9",
- "eslint": "^5.9.0",
- "eslint-plugin-import": "^2.9.0",
- "eslint-plugin-react": "^6.3.0",
+ "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-sass": "^4.0.0",
"husky": "^0.14.3",
- "jasmine-core": "^2.5.2",
- "jest": "^24.8.0",
- "jquery": "^3.2.1",
+ "jest": "^28.1.3",
+ "jest-environment-jsdom": "^28.1.3",
"js-beautify": "^1.7.5",
"json-loader": "^0.5.4",
- "lint-staged": "^7.0.3",
- "node-sass": "^4.5.2",
+ "lint-staged": "^12.1.2",
"opn": "^5.4.0",
"postcss-loader": "^1.3.3",
"prettier": "^1.14.3",
"raf": "^3.4.0",
- "react": "^16.0.0",
- "react-addons-test-utils": "^15.6.2",
- "react-dom": "^16.0.0",
- "react-test-renderer": "^16.0.0",
- "sass-loader": "^6.0.3",
+ "react": "^18.0.0",
+ "react-dom": "^18.0.0",
"sinon": "^2.1.0",
"slick-carousel": "^1.8.1",
"style-loader": "^0.16.1",
@@ -80,7 +76,8 @@
"webpack": "^4.21.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.9",
- "why-did-you-update": "^0.1.1"
+ "why-did-you-update": "^0.1.1",
+ "regenerator-runtime": "^0.14.1"
},
"dependencies": {
"classnames": "^2.2.5",
@@ -90,17 +87,8 @@
"resize-observer-polyfill": "^1.5.0"
},
"peerDependencies": {
- "react": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0",
- "react-dom": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0"
- },
- "jest": {
- "setupFiles": [
- "./test-setup.js"
- ],
- "testPathIgnorePatterns": [
- "/__tests__/scripts.js",
- "/__tests__/testUtils.js"
- ]
+ "react": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+ "react-dom": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0"
},
"lint-staged": {
"*.{js,json,md}": [
diff --git a/src/default-props.js b/src/default-props.js
index c98806a31..65f29d424 100644
--- a/src/default-props.js
+++ b/src/default-props.js
@@ -50,7 +50,9 @@ let defaultProps = {
useTransform: true,
variableWidth: false,
vertical: false,
- waitForAnimate: true
+ waitForAnimate: true,
+ asNavFor: null,
+ unslick: false
};
export default defaultProps;
diff --git a/src/inner-slider.js b/src/inner-slider.js
index b1eac5e6e..f9a207c7c 100644
--- a/src/inner-slider.js
+++ b/src/inner-slider.js
@@ -35,6 +35,7 @@ export class InnerSlider extends React.Component {
this.state = {
...initialState,
currentSlide: this.props.initialSlide,
+ targetSlide: this.props.initialSlide ? this.props.initialSlide : 0,
slideCount: React.Children.count(this.props.children)
};
this.callbackTimers = [];
@@ -133,7 +134,8 @@ export class InnerSlider extends React.Component {
}
if (
typeof prevProps[key] === "object" ||
- typeof prevProps[key] === "function"
+ typeof prevProps[key] === "function" ||
+ isNaN(prevProps[key])
) {
continue;
}
@@ -304,7 +306,8 @@ export class InnerSlider extends React.Component {
};
checkImagesLoad = () => {
let images =
- (this.list && this.list.querySelectorAll &&
+ (this.list &&
+ this.list.querySelectorAll &&
this.list.querySelectorAll(".slick-slide img")) ||
[];
let imagesCount = images.length,
@@ -316,8 +319,8 @@ export class InnerSlider extends React.Component {
image.onclick = () => image.parentNode.focus();
} else {
const prevClickHandler = image.onclick;
- image.onclick = () => {
- prevClickHandler();
+ image.onclick = e => {
+ prevClickHandler(e);
image.parentNode.focus();
};
}
diff --git a/src/slider.js b/src/slider.js
index 65d63a4b5..36225013e 100644
--- a/src/slider.js
+++ b/src/slider.js
@@ -4,7 +4,7 @@ import React from "react";
import { InnerSlider } from "./inner-slider";
import json2mq from "json2mq";
import defaultProps from "./default-props";
-import { canUseDOM } from "./utils/innerSliderUtils";
+import { canUseDOM, filterSettings } from "./utils/innerSliderUtils";
const enquire = canUseDOM() && require("enquire.js");
export default class Slider extends React.Component {
@@ -198,14 +198,17 @@ export default class Slider extends React.Component {
if (settings === "unslick") {
const className = "regular slider " + (this.props.className || "");
return
{newChildren}
diff --git a/src/track.js b/src/track.js
index bda460f94..4370b16da 100644
--- a/src/track.js
+++ b/src/track.js
@@ -67,6 +67,7 @@ const getSlideStyle = spec => {
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 " +
@@ -140,10 +141,7 @@ const renderSlides = spec => {
// if slide needs to be precloned or postcloned
if (spec.infinite && spec.fade === false) {
let preCloneNo = childrenCount - index;
- if (
- preCloneNo <= getPreClones(spec) &&
- childrenCount !== spec.slidesToShow
- ) {
+ if (preCloneNo <= getPreClones(spec)) {
key = -preCloneNo;
if (key >= startIndex) {
child = elem;
@@ -167,29 +165,27 @@ const renderSlides = spec => {
);
}
- if (childrenCount !== spec.slidesToShow) {
- 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);
- }
- }
- })
- );
+ 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);
+ }
+ }
+ })
+ );
}
});
diff --git a/src/utils/innerSliderUtils.js b/src/utils/innerSliderUtils.js
index d2496779d..b5d3bdc69 100644
--- a/src/utils/innerSliderUtils.js
+++ b/src/utils/innerSliderUtils.js
@@ -1,4 +1,5 @@
import React from "react";
+import defaultProps from "../default-props";
export function clamp(number, lowerBound, upperBound) {
return Math.max(lowerBound, Math.min(number, upperBound));
@@ -859,3 +860,14 @@ export const canUseDOM = () =>
window.document &&
window.document.createElement
);
+
+export const validSettings = Object.keys(defaultProps);
+
+export function filterSettings(settings) {
+ return validSettings.reduce((acc, settingName) => {
+ if (settings.hasOwnProperty(settingName)) {
+ acc[settingName] = settings[settingName];
+ }
+ return acc;
+ }, {});
+}
diff --git a/test-helpers.js b/test-helpers.js
deleted file mode 100644
index a778a0eca..000000000
--- a/test-helpers.js
+++ /dev/null
@@ -1,11 +0,0 @@
-export function repeatClicks(node, count) {
- for (let i = 0; i < count; i++) {
- node.simulate("click");
- }
-}
-
-export function delay(duration) {
- return new Promise(function(resolve) {
- setTimeout(resolve, duration);
- });
-}
diff --git a/test-setup.js b/test-setup.js
index 7f4f7b011..10cb36f33 100644
--- a/test-setup.js
+++ b/test-setup.js
@@ -1,11 +1,7 @@
-import "core-js/es6/map";
-import "core-js/es6/set";
-import "raf/polyfill";
+import "@testing-library/jest-dom/extend-expect";
+import "regenerator-runtime/runtime";
-import Enzyme from "enzyme";
-import Adapter from "enzyme-adapter-react-16";
-
-Enzyme.configure({ adapter: new Adapter() });
+//Fix for "matchMedia not present, legacy browsers require a polyfill jest" error
window.matchMedia =
window.matchMedia ||
function() {
@@ -15,9 +11,3 @@ window.matchMedia =
removeListener: function() {}
};
};
-
-window.requestAnimationFrame =
- window.requestAnimationFrame ||
- function(callback) {
- setTimeout(callback, 0);
- };
diff --git a/test-utils.js b/test-utils.js
new file mode 100644
index 000000000..265b79bfb
--- /dev/null
+++ b/test-utils.js
@@ -0,0 +1,86 @@
+import { render, fireEvent, waitFor, screen } from "@testing-library/react";
+
+export function getSlidesCount(container) {
+ return container.getElementsByClassName("slick-slide").length;
+}
+
+export function getSlides(container) {
+ return container.getElementsByClassName("slick-slide");
+}
+
+export function getClonesCount(container) {
+ return container.getElementsByClassName("slick-cloned").length;
+}
+
+export function getActiveSlidesCount(container) {
+ return container.querySelectorAll(".slick-slide.slick-active").length;
+}
+
+export function getCurrentSlide(container) {
+ return container.querySelector(".slick-current");
+}
+
+export function getCurrentSlideContent(container) {
+ const slide = container.querySelector(".slick-current");
+ return slide.textContent;
+}
+
+export function getButtons(container) {
+ return container.querySelectorAll(".slick-dots button");
+}
+
+export function getButtonsListItem(container) {
+ return container.querySelectorAll(".slick-dots")[0].children;
+}
+export function getButtonsLength(container) {
+ return container.querySelectorAll(".slick-dots")[0].children.length;
+}
+export function hasClass(element, classname) {
+ if (element.className != undefined) {
+ return element.classList.contains(classname);
+ }
+ return false;
+}
+export function getActiveButton(container) {
+ return Array.from(
+ container.querySelectorAll(".slick-dots .slick-active button")
+ ).map(e => e.textContent);
+}
+// export function getCurrentSlideIdState(container) {
+// return parseInt(getCurrentSlide(container).getAttribute("data-index")) + 1;
+// }
+// export function activeSlides(container) {
+// return container.querySelectorAll(".slick-slide.slick-active");
+// }
+export function getActiveSlide(container) {
+ return container.querySelector(".slick-slide.slick-active");
+}
+
+export function getActiveSlides(container) {
+ return container.querySelectorAll(".slick-slide.slick-active");
+}
+
+export function getActiveSlidesText(container) {
+ const slides = getActiveSlides(container);
+ return Array.from(slides).map(e => e.textContent);
+}
+
+export function clickNext(container) {
+ fireEvent(
+ container.getElementsByClassName("slick-next")[0],
+ new MouseEvent("click", {
+ bubbles: true,
+ cancelable: true
+ })
+ );
+}
+
+export function clickPrevious(container) {
+ fireEvent(
+ container.getElementsByClassName("slick-prev")[0],
+ new MouseEvent("click", {
+ bubbles: true,
+ cancelable: true
+ })
+ );
+}
diff --git a/webpack.config.js b/webpack.config.js
index e4e96d462..c6804359a 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -27,7 +27,10 @@ module.exports = {
]
},
resolve: {
- extensions: [".js", ".jsx"]
+ extensions: [".js", ".jsx"],
+ alias: {
+ "react-slick": path.resolve(__dirname, "src/index.js")
+ }
},
plugins: [new webpack.IgnorePlugin(/vertx/)],
devServer: {
Resizable Collapsible
- - - -
-
-
-
+ return (
+
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
+
+ );
}
+
+export default Resizable;
diff --git a/examples/Responsive.js b/examples/Responsive.js
index efa606229..abcac7875 100644
--- a/examples/Responsive.js
+++ b/examples/Responsive.js
@@ -1,72 +1,71 @@
-import React, { Component } from "react";
-import Slider from "../src/slider";
+import React from "react";
+import Slider from "react-slick";
-export default class Responsive extends Component {
- render() {
- var settings = {
- dots: true,
- infinite: false,
- speed: 500,
- slidesToShow: 4,
- slidesToScroll: 4,
- initialSlide: 0,
- responsive: [
- {
- breakpoint: 1024,
- settings: {
- slidesToShow: 3,
- slidesToScroll: 3,
- infinite: true,
- dots: true
- }
- },
- {
- breakpoint: 600,
- settings: {
- slidesToShow: 2,
- slidesToScroll: 2,
- initialSlide: 2
- }
- },
- {
- breakpoint: 480,
- settings: {
- slidesToShow: 1,
- slidesToScroll: 1
- }
+function Responsive() {
+ var settings = {
+ dots: true,
+ infinite: false,
+ speed: 500,
+ slidesToShow: 4,
+ slidesToScroll: 4,
+ initialSlide: 0,
+ responsive: [
+ {
+ breakpoint: 1024,
+ settings: {
+ slidesToShow: 3,
+ slidesToScroll: 3,
+ infinite: true,
+ dots: true
}
- ]
- };
- return (
- Resizable Collapsible
+ + + +
+
+
- );
- }
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
-
-
-
- );
- }
+ },
+ {
+ breakpoint: 600,
+ settings: {
+ slidesToShow: 2,
+ slidesToScroll: 2,
+ initialSlide: 2
+ }
+ },
+ {
+ breakpoint: 480,
+ settings: {
+ slidesToShow: 1,
+ slidesToScroll: 1
+ }
+ }
+ ]
+ };
+ return (
+ Responsive
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
-
- 7
-
-
- 8
-
+
+
+
+ );
}
+
+export default Responsive;
diff --git a/examples/Rtl.js b/examples/Rtl.js
index e72edc5d6..7ef817a50 100644
--- a/examples/Rtl.js
+++ b/examples/Rtl.js
@@ -1,41 +1,41 @@
-import React, { Component } from "react";
-import Slider from "../src/slider";
+import React from "react";
+import Slider from "react-slick";
-export default class Rtl extends Component {
- render() {
- const settings = {
- dots: true,
- infinite: true,
- slidesToShow: 3,
- slidesToScroll: 1,
- autoplay: true,
- autoplaySpeed: 2000,
- rtl: true
- };
- return (
-
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
+
+ 7
+
+
+ 8
+
-
-
-
- );
- }
+function Rtl() {
+ const settings = {
+ dots: true,
+ infinite: true,
+ slidesToShow: 3,
+ slidesToScroll: 1,
+ autoplay: true,
+ autoplaySpeed: 2000,
+ rtl: true
+ };
+ return (
+ Right to Left
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
+
+
+
+ );
}
+
+export default Rtl;
diff --git a/examples/SimpleSlider.js b/examples/SimpleSlider.js
index 013344162..573f4bce9 100644
--- a/examples/SimpleSlider.js
+++ b/examples/SimpleSlider.js
@@ -1,39 +1,38 @@
-import React, { Component } from "react";
-import Slider from "../src/slider";
+import React from "react";
+import Slider from "react-slick";
-export default class SimpleSlider extends Component {
- render() {
- const settings = {
- dots: true,
- infinite: true,
- speed: 500,
- slidesToShow: 1,
- slidesToScroll: 1
- };
- return (
- Right to Left
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
-
-
-
- );
- }
+function SimpleSlider() {
+ const settings = {
+ dots: true,
+ infinite: true,
+ speed: 500,
+ slidesToShow: 1,
+ slidesToScroll: 1
+ };
+ return (
+ Single Item
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
+
+
+
+ );
}
+
+export default SimpleSlider;
diff --git a/examples/SlickGoTo.js b/examples/SlickGoTo.js
index f5c49840a..deeccd7d3 100644
--- a/examples/SlickGoTo.js
+++ b/examples/SlickGoTo.js
@@ -1,50 +1,51 @@
-import React, { Component } from "react";
-import Slider from "../src/slider";
+import React, { useState, useRef } from "react";
+import Slider from "react-slick";
import { baseUrl } from "./config";
-export default class SlickGoTo extends React.Component {
- state = {
- slideIndex: 0,
- updateCount: 0
+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)
};
-
- render() {
- const settings = {
- dots: false,
- infinite: true,
- speed: 500,
- slidesToShow: 1,
- slidesToScroll: 1,
- afterChange: () =>
- this.setState(state => ({ updateCount: state.updateCount + 1 })),
- beforeChange: (current, next) => this.setState({ slideIndex: next })
- };
- return (
-
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
- (this.slider = slider)} {...settings}>
-
-
- );
- }
+ return (
+ Slick Go To
-Total updates: {this.state.updateCount}
- this.slider.slickGoTo(e.target.value)} - value={this.state.slideIndex} - type="range" - min={0} - max={3} - /> -
-
-
-
-
-
-
-
-
-
-
-
-
+ {
+ sliderRef = slider;
+ }}
+ {...settings}
+ >
+
+
+ );
}
+
+export default SlickGoTo;
diff --git a/examples/SlideChangeHooks.js b/examples/SlideChangeHooks.js
index 9f8b31753..4109a0fbd 100644
--- a/examples/SlideChangeHooks.js
+++ b/examples/SlideChangeHooks.js
@@ -1,56 +1,57 @@
-import React, { Component } from "react";
-import Slider from "../src/slider";
+import React, { useState } from "react";
+import Slider from "react-slick";
-export default class SlideChangeHooks extends Component {
- state = {
- oldSlide: 0,
- activeSlide: 0,
- activeSlide2: 0
+function SlideChangeHooks() {
+ const [oldSlide, setOldSlide] = useState(0);
+ const [activeSlide, setActiveSlide] = useState(0);
+ const [activeSlide2, setActiveSlide2] = useState(0);
+
+ const settings = {
+ dots: true,
+ infinite: true,
+ speed: 1000,
+ slidesToShow: 1,
+ slidesToScroll: 1,
+ beforeChange: (current, next) => {
+ setOldSlide(current);
+ setActiveSlide(next);
+ },
+ afterChange: current => setActiveSlide2(current)
};
- render() {
- const settings = {
- dots: true,
- infinite: true,
- speed: 1000,
- slidesToShow: 1,
- slidesToScroll: 1,
- beforeChange: (current, next) =>
- this.setState({ oldSlide: current, activeSlide: next }),
- afterChange: current => this.setState({ activeSlide2: current })
- };
- return (
- Total updates: {updateCount}
+ sliderRef.slickGoTo(e.target.value)} + value={slideIndex} + type="range" + min={0} + max={3} + /> +
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
- );
- }
+ return (
+ beforeChange and afterChange hooks
-- BeforeChange => oldSlide: {this.state.oldSlide} -
-- BeforeChange => activeSlide: {this.state.activeSlide} -
-- AfterChange => activeSlide: {this.state.activeSlide2} -
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
+
+
+
+ );
}
+
+export default SlideChangeHooks;
diff --git a/examples/SwipeToSlide.js b/examples/SwipeToSlide.js
index 2e51db349..f32de1664 100644
--- a/examples/SwipeToSlide.js
+++ b/examples/SwipeToSlide.js
@@ -1,53 +1,52 @@
import React, { Component } from "react";
-import Slider from "../src/slider";
+import Slider from "react-slick";
-export default class SwipeToSlide extends Component {
- render() {
- const settings = {
- className: "center",
- infinite: true,
- centerPadding: "60px",
- slidesToShow: 5,
- swipeToSlide: true,
- afterChange: function(index) {
- console.log(
- `Slider Changed to: ${index + 1}, background: #222; color: #bada55`
- );
- }
- };
- return (
- beforeChange and afterChange hooks
++ BeforeChange {"=>"} oldSlide: {oldSlide} +
++ BeforeChange {"=>"} activeSlide: {activeSlide} +
++ AfterChange {"=>"} activeSlide: {activeSlide2} +
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
-
-
-
- );
- }
+function SwipeToSlide() {
+ const settings = {
+ className: "center",
+ infinite: true,
+ centerPadding: "60px",
+ slidesToShow: 5,
+ swipeToSlide: true,
+ afterChange: function(index) {
+ console.log(
+ `Slider Changed to: ${index + 1}, background: #222; color: #bada55`
+ );
+ }
+ };
+ return (
+ Swipe To Slide
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
+
+
+
+ );
}
+
+export default SwipeToSlide;
diff --git a/examples/UnevenSetsFinite.js b/examples/UnevenSetsFinite.js
index d465209b6..0be3200c4 100644
--- a/examples/UnevenSetsFinite.js
+++ b/examples/UnevenSetsFinite.js
@@ -1,39 +1,38 @@
-import React, { Component } from "react";
-import Slider from "../src/slider";
+import React from "react";
+import Slider from "react-slick";
-export default class UnevenSetsFinite extends Component {
- render() {
- var settings = {
- dots: true,
- infinite: false,
- speed: 500,
- slidesToScroll: 4,
- slidesToShow: 4
- };
- return (
-
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
+
+ 7
+
+
+ 8
+
+
+ 9
+
-
-
-
- );
- }
+function UnevenSetsFinite() {
+ var settings = {
+ dots: true,
+ infinite: false,
+ speed: 500,
+ slidesToScroll: 4,
+ slidesToShow: 4
+ };
+ return (
+ Uneven sets (finite)
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
+
+
+
+ );
}
+
+export default UnevenSetsFinite;
diff --git a/examples/UnevenSetsInfinite.js b/examples/UnevenSetsInfinite.js
index 7e00a43a7..556f57fe9 100644
--- a/examples/UnevenSetsInfinite.js
+++ b/examples/UnevenSetsInfinite.js
@@ -1,39 +1,38 @@
-import React, { Component } from "react";
-import Slider from "../src/slider";
+import React from "react";
+import Slider from "react-slick";
-export default class UnevenSetsInfinite extends Component {
- render() {
- var settings = {
- dots: true,
- infinite: true,
- speed: 500,
- slidesToScroll: 4,
- slidesToShow: 4
- };
- return (
-
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
-
-
-
- );
- }
+function UnevenSetsInfinite() {
+ var settings = {
+ dots: true,
+ infinite: true,
+ speed: 500,
+ slidesToScroll: 4,
+ slidesToShow: 4
+ };
+ return (
+ Uneven sets (infinite)
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
+
+
+
+ );
}
+
+export default UnevenSetsInfinite;
diff --git a/examples/VariableWidth.js b/examples/VariableWidth.js
index 9289c2258..e333c658f 100644
--- a/examples/VariableWidth.js
+++ b/examples/VariableWidth.js
@@ -1,41 +1,40 @@
-import React, { Component } from "react";
-import Slider from "../src/slider";
+import React from "react";
+import Slider from "react-slick";
-export default class VariableWidth extends Component {
- render() {
- const settings = {
- className: "slider variable-width",
- dots: true,
- infinite: true,
- centerMode: true,
- slidesToShow: 1,
- slidesToScroll: 1,
- variableWidth: true
- };
- return (
-
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
-
-
-
- );
- }
+function VariableWidth() {
+ const settings = {
+ className: "slider variable-width",
+ dots: true,
+ infinite: true,
+ centerMode: true,
+ slidesToShow: 1,
+ slidesToScroll: 1,
+ variableWidth: true
+ };
+ return (
+ Variable width
-
-
- 100
-
-
- 200
-
-
- 75
-
-
- 300
-
-
- 225
-
-
- 175
-
+
+
+
+ );
}
+
+export default VariableWidth;
diff --git a/examples/VerticalMode.js b/examples/VerticalMode.js
index fc54c8585..b53f7db44 100644
--- a/examples/VerticalMode.js
+++ b/examples/VerticalMode.js
@@ -1,46 +1,45 @@
import React, { Component } from "react";
-import Slider from "../src/slider";
+import Slider from "react-slick";
-export default class VerticalMode extends Component {
- render() {
- const settings = {
- dots: true,
- infinite: true,
- slidesToShow: 3,
- slidesToScroll: 1,
- vertical: true,
- verticalSwiping: true,
- beforeChange: function(currentSlide, nextSlide) {
- console.log("before change", currentSlide, nextSlide);
- },
- afterChange: function(currentSlide) {
- console.log("after change", currentSlide);
- }
- };
- return (
-
+
+ 100
+
+
+ 200
+
+
+ 75
+
+
+ 300
+
+
+ 225
+
+
+ 175
+
-
-
-
- );
- }
+function VerticalMode() {
+ const settings = {
+ dots: true,
+ infinite: true,
+ slidesToShow: 3,
+ slidesToScroll: 1,
+ vertical: true,
+ verticalSwiping: true,
+ beforeChange: function(currentSlide, nextSlide) {
+ console.log("before change", currentSlide, nextSlide);
+ },
+ afterChange: function(currentSlide) {
+ console.log("after change", currentSlide);
+ }
+ };
+ return (
+ Vertical Mode
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
+
+
+
+ );
}
+
+export default VerticalMode;
diff --git a/examples/VerticalSwipeToSlide.js b/examples/VerticalSwipeToSlide.js
index 36ed22d84..d5855147c 100644
--- a/examples/VerticalSwipeToSlide.js
+++ b/examples/VerticalSwipeToSlide.js
@@ -1,47 +1,46 @@
import React, { Component } from "react";
-import Slider from "../src/slider";
+import Slider from "react-slick";
-export default class VerticalSwipeToSlide extends Component {
- render() {
- const settings = {
- dots: true,
- infinite: true,
- slidesToShow: 3,
- slidesToScroll: 1,
- vertical: true,
- verticalSwiping: true,
- swipeToSlide: true,
- beforeChange: function(currentSlide, nextSlide) {
- console.log("before change", currentSlide, nextSlide);
- },
- afterChange: function(currentSlide) {
- console.log("after change", currentSlide);
- }
- };
- return (
-
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
-
-
-
- );
- }
+function VerticalSwipeToSlide() {
+ const settings = {
+ dots: true,
+ infinite: true,
+ slidesToShow: 3,
+ slidesToScroll: 1,
+ vertical: true,
+ verticalSwiping: true,
+ swipeToSlide: true,
+ beforeChange: function(currentSlide, nextSlide) {
+ console.log("before change", currentSlide, nextSlide);
+ },
+ afterChange: function(currentSlide) {
+ console.log("after change", currentSlide);
+ }
+ };
+ return (
+ Vertical Mode with Swipe To Slide
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
+
+
+
+ );
}
+
+export default VerticalSwipeToSlide;
diff --git a/examples/__tests__/CenterMode.test.js b/examples/__tests__/CenterMode.test.js
deleted file mode 100644
index 1123c2aa3..000000000
--- a/examples/__tests__/CenterMode.test.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from "react";
-import { mount } from "enzyme";
-import CenterMode from "../CenterMode";
-import { html as beautify_html } from "js-beautify";
-import { clickNext } from "../../__tests__/testUtils";
-
-describe("CenterMode Tests", () => {
- test("Counting test", () => {
- const slider = mount(
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
-
"
-`;
-
-exports[`CenterMode Tests Counting test 1`] = `
-"Center Mode
- -
-
"
-`;
-
-exports[`CenterMode Tests Positioning test 1`] = `
-"Center Mode
- -
-
"
-`;
diff --git a/examples/__tests__/__snapshots__/FocusOnSelect.test.js.snap b/examples/__tests__/__snapshots__/FocusOnSelect.test.js.snap
deleted file mode 100644
index 181930df8..000000000
--- a/examples/__tests__/__snapshots__/FocusOnSelect.test.js.snap
+++ /dev/null
@@ -1,237 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FocusOnSelect Tests Activity Test 1`] = `
-"Center Mode
- -
-
"
-`;
-
-exports[`FocusOnSelect Tests Activity Test 2`] = `
-"FocusOnSelect
-Click on any slide to select and make it current slide
-
-
-
"
-`;
diff --git a/examples/__tests__/__snapshots__/MultipleItems.test.js.snap b/examples/__tests__/__snapshots__/MultipleItems.test.js.snap
deleted file mode 100644
index 7e4aabd01..000000000
--- a/examples/__tests__/__snapshots__/MultipleItems.test.js.snap
+++ /dev/null
@@ -1,1477 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Multiple Items should have 3 active slides 1`] = `
-"FocusOnSelect
-Click on any slide to select and make it current slide
-
-
-
"
-`;
-
-exports[`Multiple Items should have 3 dots 1`] = `
-"Multiple items
- -
-
"
-`;
-
-exports[`Multiple Items should have 9 actual slides and (3(pre) + 9(post)) clone slides 1`] = `
-"Multiple items
- -
-
"
-`;
-
-exports[`Multiple Items should show first 3 slides 1`] = `
-"Multiple items
- -
-
"
-`;
-
-exports[`Multiple Items should show last 3 slides when last dot is clicked 1`] = `
-"Multiple items
- -
-
"
-`;
-
-exports[`Multiple Items should show last 3 slides when previous button is clicked 1`] = `
-"Multiple items
- -
-
"
-`;
-
-exports[`Multiple Items should show slides first 3 slides when middle dot is clicked 1`] = `
-"Multiple items
- -
-
"
-`;
-
-exports[`Multiple Items should show slides from 4 to 6 when middle dot is clicked 1`] = `
-"Multiple items
- -
-
"
-`;
-
-exports[`Multiple Items should show slides from 4 to 6 when next button is clicked 1`] = `
-"Multiple items
- -
-
"
-`;
diff --git a/examples/__tests__/__snapshots__/SimpleSlider.test.js.snap b/examples/__tests__/__snapshots__/SimpleSlider.test.js.snap
deleted file mode 100644
index 08be35767..000000000
--- a/examples/__tests__/__snapshots__/SimpleSlider.test.js.snap
+++ /dev/null
@@ -1,445 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Simple Slider Snapshots click on 3rd dot 1`] = `
-"Multiple items
- -
-
"
-`;
-
-exports[`Simple Slider Snapshots click on next button 1`] = `
-"Single Item
- -
-
"
-`;
-
-exports[`Simple Slider Snapshots click on prev button 1`] = `
-"Single Item
- -
-
"
-`;
-
-exports[`Simple Slider Snapshots slider initial state 1`] = `
-"Single Item
- -
-
"
-`;
diff --git a/examples/__tests__/__snapshots__/UnevenSets.test.js.snap b/examples/__tests__/__snapshots__/UnevenSets.test.js.snap
deleted file mode 100644
index b1dacdf75..000000000
--- a/examples/__tests__/__snapshots__/UnevenSets.test.js.snap
+++ /dev/null
@@ -1,559 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`UnevenSets Finite Activity test 1`] = `
-"Single Item
- -
-
"
-`;
-
-exports[`UnevenSets Finite Counting test 1`] = `
-"Uneven sets (finite)
- -
-
"
-`;
-
-exports[`UnevenSets Finite Positioning test 1`] = `
-"Uneven sets (finite)
- -
-
"
-`;
-
-exports[`UnevenSets Infinite Activity test 1`] = `
-"Uneven sets (finite)
- -
-
"
-`;
-
-exports[`UnevenSets Infinite Counting test 1`] = `
-"Uneven sets (infinite)
- -
-
"
-`;
-
-exports[`UnevenSets Infinite Positioning test 1`] = `
-"Uneven sets (infinite)
- -
-
"
-`;
diff --git a/examples/__tests__/sample.test.js b/examples/__tests__/sample.test.js
index 4a17f8ea0..d2d276e62 100644
--- a/examples/__tests__/sample.test.js
+++ b/examples/__tests__/sample.test.js
@@ -1,5 +1,5 @@
import React from "react";
-import { mount } from "enzyme";
+import { fireEvent, render } from "@testing-library/react";
export default class Counter extends React.Component {
constructor(props) {
@@ -19,8 +19,22 @@ export default class Counter extends React.Component {
describe("sample counter test", function() {
it("mutliple counts", function() {
- const wrapper = mount(Uneven sets (infinite)
- -{children}
;
- } else if (newChildren.length <= settings.slidesToShow) {
+ } else if (
+ newChildren.length <= settings.slidesToShow &&
+ !settings.infinite
+ ) {
settings.unslick = true;
}
return (