diff --git a/docs/demos.js b/docs/demos.js index a03cf825b..abe945354 100644 --- a/docs/demos.js +++ b/docs/demos.js @@ -12,6 +12,7 @@ import Resizable from "../examples/Resizable"; import UnevenSetsInfinite from "../examples/UnevenSetsInfinite"; import UnevenSetsFinite from "../examples/UnevenSetsFinite"; import CenterMode from "../examples/CenterMode"; +import CenterModeInfiniteFalse from "../examples/CenterModeInfiniteFalse"; import FocusOnSelect from "../examples/FocusOnSelect"; import AutoPlay from "../examples/AutoPlay"; import AutoPlayMethods from "../examples/AutoPlayMethods"; @@ -45,6 +46,7 @@ export default class App extends React.Component { + diff --git a/examples/CenterModeInfiniteFalse.js b/examples/CenterModeInfiniteFalse.js new file mode 100644 index 000000000..55cd05527 --- /dev/null +++ b/examples/CenterModeInfiniteFalse.js @@ -0,0 +1,41 @@ +import React, { Component } from "react"; +import Slider from "../src/slider"; + +export default class CenterModeInfiniteFalse extends Component { + render() { + const settings = { + className: "center", + centerMode: true, + infinite: false, + centerPadding: "60px", + slidesToShow: 3, + initialSlide: 2, + speed: 500 + }; + return ( +
+

Center Mode

+ +
+

1

+
+
+

2

+
+
+

3

+
+
+

4

+
+
+

5

+
+
+

6

+
+ +
+ ); + } +} diff --git a/examples/__tests__/CenterModeInfiniteFalse.test.js b/examples/__tests__/CenterModeInfiniteFalse.test.js new file mode 100644 index 000000000..698817230 --- /dev/null +++ b/examples/__tests__/CenterModeInfiniteFalse.test.js @@ -0,0 +1,54 @@ +import React from "react"; +import { mount } from "enzyme"; +import { html as beautify_html } from "js-beautify"; +import { clickNext } from "../../__tests__/testUtils"; +import CenterModeInfiniteFalse from "../CenterModeInfiniteFalse"; + +describe("CenterModeInfiniteFalse Tests", () => { + test("Counting test", () => { + const slider = mount(); + let totalSlides = slider.find(".slick-slide").length; + let clonedSlides = slider.find(".slick-cloned").length; + let activeSlides = slider.find(".slick-slide.slick-active").length; + expect(totalSlides).toEqual(6); + expect(clonedSlides).toEqual(0); + expect(activeSlides).toEqual(3); + expect(beautify_html(slider.html())).toMatchSnapshot(); + }); + test("Positioning test", () => { + const slider = mount(); + let currentSlide = slider.find("div.slick-current"); + let activeSlides = slider.find("div.slick-active"); + expect(currentSlide.props()["data-index"]).toEqual(1); + expect(activeSlides.map(slide => slide.props()["data-index"])).toEqual([ + 0, + 1, + 2 + ]); + expect(beautify_html(slider.html())).toMatchSnapshot(); + }); + test("Activity test", () => { + const slider = mount(); + let currentSlide = slider.find("div.slick-current"); + let activeSlides = slider.find("div.slick-active"); + expect(currentSlide.props()["data-index"]).toEqual(1); + expect(activeSlides.map(slide => slide.props()["data-index"])).toEqual([ + 0, + 1, + 2 + ]); + + clickNext(slider); + + currentSlide = slider.find("div.slick-current"); + activeSlides = slider.find("div.slick-active"); + expect(currentSlide.props()["data-index"]).toEqual(2); + expect(activeSlides.map(slide => slide.props()["data-index"])).toEqual([ + 1, + 2, + 3 + ]); + + expect(beautify_html(slider.html())).toMatchSnapshot(); + }); +}); diff --git a/examples/__tests__/__snapshots__/CenterModeInfiniteFalse.test.js.snap b/examples/__tests__/__snapshots__/CenterModeInfiniteFalse.test.js.snap new file mode 100644 index 000000000..a414295aa --- /dev/null +++ b/examples/__tests__/__snapshots__/CenterModeInfiniteFalse.test.js.snap @@ -0,0 +1,163 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`CenterModeInfiniteFalse Tests Activity test 1`] = ` +"
+

Center Mode

+
+
+
+
+
+
+

1

+
+
+
+
+
+
+

2

+
+
+
+
+
+
+

3

+
+
+
+
+
+
+

4

+
+
+
+
+
+
+

5

+
+
+
+
+
+
+

6

+
+
+
+
+
+
+
" +`; + +exports[`CenterModeInfiniteFalse Tests Counting test 1`] = ` +"
+

Center Mode

+
+
+
+
+
+
+

1

+
+
+
+
+
+
+

2

+
+
+
+
+
+
+

3

+
+
+
+
+
+
+

4

+
+
+
+
+
+
+

5

+
+
+
+
+
+
+

6

+
+
+
+
+
+
+
" +`; + +exports[`CenterModeInfiniteFalse Tests Positioning test 1`] = ` +"
+

Center Mode

+
+
+
+
+
+
+

1

+
+
+
+
+
+
+

2

+
+
+
+
+
+
+

3

+
+
+
+
+
+
+

4

+
+
+
+
+
+
+

5

+
+
+
+
+
+
+

6

+
+
+
+
+
+
+
" +`; diff --git a/src/arrows.js b/src/arrows.js index a0dca3b1e..f5381f37a 100644 --- a/src/arrows.js +++ b/src/arrows.js @@ -18,7 +18,8 @@ export class PrevArrow extends React.PureComponent { if ( !this.props.infinite && (this.props.currentSlide === 0 || - this.props.slideCount <= this.props.slidesToShow) + this.props.slideCount <= this.props.slidesToShow || + (this.props.initialSlide && this.props.currentSlide === 1)) ) { prevClasses["slick-disabled"] = true; prevHandler = null; diff --git a/src/inner-slider.js b/src/inner-slider.js index 24820f6bc..6d8dd9c9c 100644 --- a/src/inner-slider.js +++ b/src/inner-slider.js @@ -35,6 +35,9 @@ export class InnerSlider extends React.Component { this.state = { ...initialState, currentSlide: this.props.initialSlide, + targetSlide: this.props.initialSlide + ? this.props.initialSlide + : initialState.targetSlide, slideCount: React.Children.count(this.props.children) }; this.callbackTimers = []; @@ -685,7 +688,8 @@ export class InnerSlider extends React.Component { "slideCount", "slidesToShow", "prevArrow", - "nextArrow" + "nextArrow", + "initialSlide" ]); arrowProps.clickHandler = this.changeSlide;