diff --git a/examples/SimpleSlider.js b/examples/SimpleSlider.js index 013344162..92d10fbca 100644 --- a/examples/SimpleSlider.js +++ b/examples/SimpleSlider.js @@ -7,6 +7,7 @@ export default class SimpleSlider extends Component { dots: true, infinite: true, speed: 500, + initialSlide: 2, slidesToShow: 1, slidesToScroll: 1 }; diff --git a/examples/__tests__/SimpleSlider.test.js b/examples/__tests__/SimpleSlider.test.js index edfbca4fa..6e5ac8540 100644 --- a/examples/__tests__/SimpleSlider.test.js +++ b/examples/__tests__/SimpleSlider.test.js @@ -11,7 +11,8 @@ import { getActiveSlidesCount, getActiveSlidesText, getButtons, - getButtonsListItem + getButtonsListItem, + getCurrentSlide } from "../../test-utils"; describe("SimpleSlider example", () => { @@ -23,7 +24,14 @@ describe("SimpleSlider example", () => { const { container } = render(); expect(container.getElementsByClassName("slick-cloned").length).toBe(7); }); - it("should have 1 active slide", function() { + it("should have 1 current slide(When initialSlide is 2)", function() { + const { container } = render(); + expect( + container.querySelectorAll(".slick-slide.slick-current").length + ).toBe(1); + expect(parseInt(getCurrentSlide(container).textContent) - 1).toBe(2); + }); + it("should have 1 active slide(When initialSlide is 2)", function() { const { container } = render(); expect(container.querySelectorAll(".slick-slide.slick-active").length).toBe( 1 @@ -32,7 +40,7 @@ describe("SimpleSlider example", () => { Array.from(getActiveSlide(container).children).map( e => parseInt(e.textContent) - 1 )[0] - ).toBe(0); + ).toBe(2); }); it("should have 6 dots", function() { const { container } = render(); @@ -55,30 +63,30 @@ describe("SimpleSlider example", () => { const { container } = render(); expect(container.getElementsByClassName("slick-next").length).toBe(1); }); - it("should got to second slide when next button is clicked", function() { + it("should got to next slide when next button is clicked", function() { const { container } = render(); clickNext(container); expect( container.querySelectorAll(".slick-slide.slick-active")[0].textContent - ).toBe("2"); + ).toBe("4"); expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe( 1 ); expect( - container.querySelectorAll(".slick-dots")[0].children[1] + container.querySelectorAll(".slick-dots")[0].children[3] ).toHaveClass("slick-active"); }); - it("should goto last slide when prev button is clicked", function() { + it("should goto previous slide when prev button is clicked", function() { const { container } = render(); clickPrevious(container); expect( container.querySelectorAll(".slick-slide.slick-active")[0].textContent - ).toBe("6"); + ).toBe("2"); expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe( 1 ); expect( - container.querySelectorAll(".slick-dots")[0].children[5] + container.querySelectorAll(".slick-dots")[0].children[1] ).toHaveClass("slick-active"); }); it("should goto 4th slide when 4th dot is clicked", function() { diff --git a/src/inner-slider.js b/src/inner-slider.js index 79b9dc987..aba39da9d 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 = []; @@ -304,7 +305,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,7 +318,7 @@ export class InnerSlider extends React.Component { image.onclick = () => image.parentNode.focus(); } else { const prevClickHandler = image.onclick; - image.onclick = (e) => { + image.onclick = e => { prevClickHandler(e); image.parentNode.focus(); };