Questions tagged [react-slick]

Questions involving the library react-slick

react-slick is the port of the jQuery slick library to react.

281 questions
1
vote
0 answers

React-Slick with IntersectionObserver not behaving as expected

I'm trying to animate my react-slick slides when they enter into the viewport by detecting when the slide elements intersect with my root element using the IntersectionObserver API. This is working as expected. What isn't working is, when…
colemars
  • 979
  • 3
  • 12
  • 25
1
vote
0 answers

slick-carousel scss is not working properly with react-slick using webpack as a bundler

When i use a cdn for slick-carousel it works fine but when i download it form npm and import it like :- https://github.com/akiran/react-slick/issues/669 It doesn't work. Some how it works because of…
1
vote
2 answers

React-Slick is not work on first rendering in React

I am trying to add React-Slick in application but somehow I am failed actually I am adding todo in applicaiton and then showing todos list in slider . when I store some todo then I am fetching data from server and showing it in slider on first…
jonny
  • 121
  • 1
  • 3
  • 13
1
vote
1 answer

React Slick slickSetOption

I am using React-Slick (https://github.com/akiran/react-slick) for my project. I want to be able to dynamically change the settings that I provide to my slider. For slickjs (https://github.com/kenwheeler/slick) this can be done using…
faerin
  • 1,915
  • 17
  • 31
1
vote
2 answers

Disable Prev or Next Button if there is no slides available before or after the current slide in react slick. (PreviousNextMethod)

I used react slick PrevNextMethod https://react-slick.neostack.com/docs/example/previous-next-methods I set the Infinite to false so, there is no loop will shown in carousel. Now, i want to disable the previous button if there is no slides available…
Nandhini Kajol
  • 75
  • 1
  • 4
  • 14
1
vote
0 answers

How to include multiple plugins with next-css in next.config.js file

I am importing the react-slick css files. When i remove cssModules:true from next.config.js file, everything works fine. Any idea why adding cssModules:true creates the problem? const withCSS = require("@zeit/next-css"); module.exports = withCSS({ …
Mohammad Abed
  • 93
  • 1
  • 10
1
vote
0 answers

How do you make it when the slider image is full? ReactJs

I'm asking for help, I have a problem if the slider in the hover image is small in size not full or not covered, but if the large size image is completely covered, how to be the same, my tools use the react-slick plugin for the slider and for the…
putra irawan
  • 822
  • 1
  • 7
  • 13
1
vote
0 answers

Problem using React-slick with graphql query function

I'm trying to use react-slick to present a carousel of multiple items in my project but I'm having problems when it comes to mapping the data that comes in my graphql query. Only when I put the items manually does the carousel work very well ... but…
user3821102
  • 139
  • 2
  • 13
1
vote
0 answers

Consistency issue in react-slick

When we try to give more than 12 images in a react-slick slider, the images will appear and immediately disappears. How do I resolve this consistency issue using react-slick. I have used the below link to do…
Prajna
  • 578
  • 4
  • 8
  • 23
1
vote
1 answer

react-slick - Element type is invalid: expected a string

I'm trying to create a simple slider yet when I map the data, as opposed to simply adding html in to the slider, I get the following error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite…
StudioTime
  • 22,603
  • 38
  • 120
  • 207
1
vote
3 answers

React-Slick Slider Giving Error "Uncaught TypeError: Cannot call a class as a function"

I'm only having this problem when using the package 'react-slick'. I didn't have this problem the night before but when spinning up my dev server today it presents me with this error. I've already tried reinstalling my node_modules to no avail. When…
cosmichero2025
  • 1,029
  • 4
  • 14
  • 37
1
vote
1 answer

How to display multiple items per slide in react-slick carousel?

I want to display 3 items of slide/carousel per one slide. For example, I have six objects in array. I am using React and React Slick. // data const dataslide = [ { "id": "1", "title": "One" }, { "id": "2", …
mrale81
  • 169
  • 3
  • 15
1
vote
1 answer

Attached Event on anchor inside iframe does work in carousel when the iframe component are moved.[ReactJS]

I am showing iframe in a carousel (react-slick) in ReactJS. I add an on click event listener on anchor inside the iframe using jquery. The event is attached when the iframe loads. The click works correctly in normal case but when I move the…
stormForce
  • 86
  • 6
1
vote
1 answer

nextArrow and prevArrow button not working in react-slick

I am using react-slick in my reactjs application. I am trying to implement next and prev arrows in slider. But this is not working. Here is my code Here is my "settingss" variable which gets applied to var settingss ={ infinite: false, …
EdG
  • 2,243
  • 6
  • 48
  • 103
1
vote
1 answer

Maintaining index of multiple react-slick

I am making a react project. I have a page where have to use multiple react-slick elements. I want to maintain index of each slick element. Currently I am doing this render() { var settings = { arrows: true, …
EdG
  • 2,243
  • 6
  • 48
  • 103