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();
};