version 0.14.6

Error

Warning: Unknown props `currentSlide`, `slideCount` on <div> tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop
    in div (created by Carousel)
    in PrevArrow (created by InnerSlider)
    in div (created by InnerSlider)
    in InnerSlider (created by Slider)
    in Slider (created by Carousel)

The bug was introduced in this commit https://github.com/akiran/react-slick/commit/436e3052855613a49478382b51743f8bbef9bf15

You added 2 custom props. But 10 lines below you use this object as props for the div element

On previous version (0.16.0), I could have the Slider to align left, but starting from 0.17.1, it doesn't have the same behavior.

Picture taken from: http://neostack.com/opensource/react-slick

On my project: v 0.17.1:

v 0.16.0:

Both use the same settings:

  const sliderSettings = {
      autoplay: false,
      autoplaySpeed: 5000,
      pauseOnFocus: true,
      pauseOnHover: true,
      dots: false,
      arrows: false,
      infinite: false,
      speed: 500,
      slidesToScroll: 1,
      draggable: true,
      swipeToSlide: true,
      variableWidth: true,
    };

It's as if the Slider is forcing the component to align RIGHT instead of the usual LEFT in previous version of react-slick. Is this intended or a bug?

If I render Slider as below:

<Slider {...settings}>
    {slides.map((slide) => (
        <div key={slide.index}>{slide.index}</div>
    ))}
</Slider>

nextProps.children.length in componentWillReceiveProps of class InnerSlider will always returns 1 which breaks the sliding logic.

Does Slider not expect dynamic children?

I'm trying to call setState on the parent component in the beforeChange callback. This seems to disable the slider. However, calling setState in the afterChange callback works fine. Any ideas? Also, is there a jsfiddle that has a barebones setup of react-slick in it? I couldn't quite get one working.

Not sure how it the fix here 328, I did this:

render() {
  let imgTpl = (images || []).map((image, index) => {
     return (
     <div key={image.Id} >
        <img src={image.url}  /></div>
     );
  });
}

return(
  <Slider {...settings}>
    { imgTpl }
   </Slider>
)

There is a div around the image items but it still does not work.

This PR fires beforeChange when fade is set to true. The call was missed in the slideHandler function. There are also two other small changes:

• the positioning of the dots in the demo page
• the failing tests

(This PR builds on the changes of #559; thus those changes are included in the diff as well.)

When using react-slick in isomorphic apps, the slider will be rendered before any client-side JavaScript has been run, leading to issues like #254, #508, or #537.

This PR provides a simple solution based on the initialized state that's already included in initial-state.js. It's a more React-like solution compared to #256. By calling the setState in componentWillMount we prevent unnecessary re-rendering on pure client-side apps.

Compared to #288 this change implicitly takes the slidesToShow into account, as the slick-active class already handles that correctly.

After applying those changes, users will be able to optionally add the following styles in order to display the active slide while javascript has not been initialized yet:

.slick-slide.slick-active {
    display: block;
}

Edit: It's actually also necessary to add something like the following. Otherwise you end up with the active slide being shown twice.

.slick-track {
    width: 9000px;
}

I've been trying out too many carousel react components that assume they are running on the client and have 'window' and 'document' dependencies all over the place. This breaks the code trying to integrate it on an isomorphic app...

I replicated the issue here: https://jsfiddle.net/20bumb4g/1988/

All pictures were wrapped into a link which "would" link to an external page. (google at this example)

If you start dragging any slide without changing the slide after releasing the click (no index update!) the event will be propagated down to the inner content. This makes dragging act differently and unwanted on desktop.

Please fix this issue. Btw.: your library is awesome.

When I turn on the both lazyLoad and adaptiveHeight options, sometimes the image(GIF) has 1px height.

Then, I click somewhere in carousel area, it re-render image properly.

I think that it occurs because the image(GIF) is not fully loaded yet. (this is the reason why this happens 'sometimes')

If I turn off one of the lazyLoad or adaptiveHeight option everything works fine.

Could you fix this problem?

demo: https://codesandbox.io/s/7yvq357xz6

for the given markup:

<Slider {...settings}>
  <div style={slideStyle}>
    <img style={imageStyle} src="http://placekitten.com/g/400/200" />
  </div>
  ...
</Slider>

{slideStyle} will be ignored / overwritten.

I am using react-slick as a dependency in one of my custom react package. Slider works fine in the component whereas it throws below error when we publish the component as a package and use it in another component.

Error :

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method 'SimpleSlider'.

import Slider from "react-slick";

const SimpleSlider = () => {
    const settings = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1
    }
    return (
      <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 SimpleSlider;

Responsiveness

I am facing an issue, The issue is on small devices(tabs, mobiles) the image inside slider becomes blurry as attached below. does there any way to do something like on sm, xs, md, lg and xl screen size use different images?

the slider cuts the images without pass centermode, i want a normal mode but that cuts the images and i dont know how fix that or idk if this is a error of the slider.

I'm trying to create an interface like the one shown below:

I tried many ways, but it doesn't work! So, i find in internet, and see this issue

It say :

.slick-list .slick-track{
padding-left: 12.5%;
}

I tried that way, but it doesn't work. Can anyone help me?

Issue occuring when trying to write jest tests

I have followed the docs and added the following to setupTests.json

window.matchMedia = window.matchMedia || function() {
    return {
        matches : false,
        addListener : function() {},
        removeListener: function() {}
    };
};

I am still getting the following error:

matchMedia not present, legacy browsers require a polyfill

Package Json:

{
  "name": "kegthat-headless",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "test": "jest"
  },
  "dependencies": {
    "@apollo/client": "^3.7.2",
    "@types/node": "18.11.15",
    "@types/react": "18.0.26",
    "@types/react-dom": "18.0.9",
    "axios": "^0.21.1",
    "eslint": "8.29.0",
    "eslint-config-next": "13.0.6",
    "jest-environment-jsdom": "^29.3.1",
    "lodash": "^4.17.21",
    "next": "13.0.6",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-slick": "^0.29.0",
    "slick-carousel": "^1.8.1",
    "typescript": "4.9.4"
  },
  "devDependencies": {
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-typescript": "^7.18.6",
    "@testing-library/dom": "^8.19.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@types/react-slick": "^0.23.10",
    "autoprefixer": "^10.4.13",
    "babel-jest": "^29.3.1",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^29.3.1",
    "jest-cli": "^29.3.1",
    "polyfill": "^0.1.0",
    "postcss": "^8.4.20",
    "tailwindcss": "^3.2.4",
    "ts-node": "^10.9.1"
  }
}

I cannot add a test-setup.js as there is already a jest.config.ts in the project. Is there a fix for this?

Cheers

When using the slider setting "fade: true" with nextjs, it causes that onClick in buttons to use the last value of an array.

CodeSandBox example can be seen here