Questions involving the library react-slick
react-slick is the port of the jQuery slick library to react.
Questions tagged [react-slick]
281 questions
5
votes
2 answers
How to avoid repetition of carousel items in react-slick
I'm using react-slick. I want to show four items at a time. I'm showing data dynamically.
If I have single item in carousel, it's repeating to fill the place of four items.
This is my code:
const settings = {
dots: false,
infinite: true,
…
Sunil tc
- 2,482
- 4
- 19
- 46
4
votes
1 answer
Slick Slider React - How to keep the same width and space whatever the size screen?
I am creating a slider in react with Slick Slider. The problem is: when the screen size changes, the slides reduce in size or stack on top of each other.
Slick slider offers :
responsive: [
{
breakpoint: 1024,
…
Sandra
- 143
- 2
- 11
4
votes
1 answer
React-slick with gatsby-plugin-image
I'm trying to use React-slick with gatsby-plugin images and I have the page setup like this.
import React from "react";
import { graphql } from "gatsby"
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import…
Brandon.b
- 147
- 2
- 9
4
votes
2 answers
How to use AutoPlay methods with React-slick useRef hook and typescript
I'm currently using "typescript": "^3.7.5" and "react-slick": "^0.25.2".
The problem I am facing is that I'm not able to use the auto play methods slickPlay and slickPause with the new useRef hook and typescript.
Goal: To be able to pause auto play…
kdizzle
- 577
- 1
- 11
- 23
4
votes
0 answers
React Slick is throwing error in responsive mode in browser
I am using react-slick. In my settings, I have swipeToSlide set as true. Whenever, I swipe the slider to the right or left by pressing the left mouse button, I get this error when responsive mode is on:
Unable to preventDefault inside passive event…
Kenpachi Zaraki
- 384
- 2
- 12
4
votes
4 answers
React slick and React router Link doesn't distinguish click and drag
I'm trying to make my slick slider slides link to an about page with react-router-dom. The problem is that it doesn't distinguish between a drag and a click. How would I make that happen, is there a way to do it with react router or would I need to…
Dylan Weijgertze
- 47
- 1
- 6
4
votes
1 answer
Wrong width for React Slick Slider in Responsive View
I have implemented React Slick Slider for my website, it works proper for desktop view and take proper width accordingly, but if I switch to responsive view the width of the container is not proper and it looks all distorted.
I have tried to fix…
H.Husain
- 423
- 1
- 7
- 28
4
votes
3 answers
How to add slick-active class in Slider dots in React Slick
I used react-slick and made a carousel using Slider component. The code is bellow,
const carousel = (props) => {
return (
sajithneyo
- 641
- 3
- 7
- 17
4
votes
6 answers
The arrows does not showing in react slick with 4 and more photos
I'm trying to get the next and previous arrows to show up when I have 4 and more photos on react-slick, but they are not appearing. It's working fine with 3 or fewer photos.
Here is the link of code.
https://codesandbox.io/s/wyyrl6zz3l
user11000630
4
votes
2 answers
React Slick Slide Height Issue
I'm having trouble getting these React-Slick slider components to be the same height. They're both responsive divs and resize accordingly as the page size changes, but I would ideally want the div on the left to be the same height as the div on the…
JR3652
- 435
- 1
- 4
- 13
4
votes
5 answers
Hide/Show React-slick arrows
I am using react-slick and I have my own customised arrows. This Slider is NOT an infinite loop and I would like to hide the arrows at the start and end of the loop. So basically at start PrevArrow should be hidden and at the end the NextArrow…
Negin Basiri
- 1,305
- 2
- 26
- 47
4
votes
5 answers
react-slick carousel cycle through slides with scroll-event - react js, javascript
Here is the carousel I am using: react-slick
I want to be able to scroll through each slide using the mouse scroll up or down event.
Scroll up to increment, scroll down to decrement.
Found an example online of exactly what I need - just unsure of…
Filth
- 3,116
- 14
- 51
- 79
4
votes
6 answers
Cannot find module "react-slick"
I'm trying to use react-slick inside my React project.
When I try to import it
import Slider from 'react-slick';
I get this error
Cannot find module "react-slick"
Anyone else having this issue ?…
me-me
- 5,139
- 13
- 50
- 91
4
votes
4 answers
Displaying react components in carousel using react-slick
I am trying to use react-slick for displaying my custom Components inside carousel:
But seems that react-slick doens't support such way of using.
JsFiddle…
ilyabasiuk
- 4,270
- 4
- 22
- 35
3
votes
2 answers
Pause video when changing slide in react js?
I have a simple slider using react slick slider one of my slides is a video using react player, Now I want if the user changes the slide to pause the playing video here is what I have so far.
Here is a live demo on code sandbox: pause video…
The Dead Man
- 6,258
- 28
- 111
- 193