Questions tagged [react-slick]

Questions involving the library react-slick

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

281 questions
3
votes
1 answer

Cannot read property 'slideHandler' of null in react-slick

I have a component that uses two sliders in combination(a total of 4). One combination is for horizontal carousel and another for vertical. This decision is based upon the screen size. When it is rendered in smaller devices it is working fine but on…
Whyashh
  • 93
  • 9
3
votes
1 answer

slickGoTo doesn't change active slide

I added slider using react-slick to my React app. For I added ref, and I'm trying use it to change active slide: import React, { useRef } from 'react'; import Slider from 'react-slick'; const TestSlider = () => { const handleOnClick =…
Jack
  • 514
  • 3
  • 11
  • 30
3
votes
1 answer

My component is not reading imported Slick CSS

I'm importing Sick carousel's CSS to my root component like this: import React from 'react' import PropTypes from 'prop-types' import { ThemeProvider } from 'styled-components' import { AppContext } from 'services/AppContext' …
Nika Roffy
  • 891
  • 2
  • 8
  • 20
3
votes
1 answer

Is there a way with React Slick to have a Carousel inside a Carousel?

Is there a way with React Slick to have Carousel inside Carousel ? import Slider from "react-slick";
... …
paul.ruelle
  • 132
  • 2
  • 11
3
votes
1 answer

How to import images within a Gatsby blog Mdx file (for a slick carousel)

I am currently trying to setup a Gatsby's blog. While looking at the doc I came across Mdx, a way to use React component in Markdown file (which is an awesome concept by the way!). However, I quickly ran into a limitation: it seems like at the…
Mr Washington
  • 1,295
  • 14
  • 15
3
votes
1 answer

React-slick slider gets distorted when adding more images after initialisation

I am using the React-slick slider to display the images given by the random user API. I followed the steps given on the npm page for the react slider and installed the slick carousel and added the two CSS files to the component. I wanted to add more…
visizky
  • 701
  • 1
  • 8
  • 27
3
votes
1 answer

React-slick slider items are miss ordered - first item is rendered as last items

I am Using react slick slider. Problem is in item order: First Item is rendered as last one. But if infinite is false first item is missing and last item is white space. import React from 'react'; import Slider from "react-slick"; class Slideshow…
user10832274
3
votes
3 answers

Passing data on an API call from parent to child container in react

I am fairly new to react and I was stuck at something trivial I feel. So what I want to do is that I want to pass data from a parent component to child. My code looks like this. getData(key) { let { getData } = this.props; if (getData.code…
BleachedAxe
  • 393
  • 2
  • 5
  • 20
3
votes
0 answers

Swipe not working for youtube video in react-slick

I have built the react carousel component using react-slick. It includes youtube video player section. For this video player, I used tag. Everything works well but swiping event doesn't work on video part. When I swipe on this, it doesn't slide…
Rajat
  • 486
  • 1
  • 10
  • 35
3
votes
4 answers

How to add an initial delay to autoplay in React Slick slider?

I created 3 image sliders using the react-slick-slider plugin in my React app. All 3 have their autoplay set to true, but I want to add a delay to 2 of the sliders so that autoplay kicks in one and two seconds later respectively to achieve the…
York Wang
  • 1,909
  • 5
  • 15
  • 27
3
votes
1 answer

React slick stop going passed end

I'm using React slick and if I have a bunch of small boxes and I scroll by 3 by setting slidesToScroll it shoots passed the width of my container. https://codepen.io/e-man/pen/jvJdjY if you look at the right side when you keep clicking until you…
me-me
  • 5,139
  • 13
  • 50
  • 91
3
votes
0 answers

Finite variable width slider (that scrolls only visible slides), slides should always fill the display area

I hope this is not a "big ask" but I'm stuck. I asked this issue on github issues#1334 but I have not got any responsive from the maintainers of the project. Hopefully I can get help here. Overview My issue is that I'm trying to adjust the…
dryleaf
  • 415
  • 3
  • 18
3
votes
0 answers

Wrap React-slick
  • slides inside
  • I want to wrap all of my React-slick slides which are li inside ul. I went through the documentation and found that slide prop can be used for changing the container element. It takes an wrapping element name as string. The default is div, I changed…
    vijayscode
    • 1,905
    • 4
    • 21
    • 37
    3
    votes
    2 answers

    New React module inside another react component

    So if it's silly question, please excuse me. I'm using React Carousel Component (react-slick) for my project. What i want to achieve, inside this block i want to use my module "CarouselSlide". //--> react-slick component tag …
    Erdal SATIK
    • 652
    • 2
    • 9
    • 32
    2
    votes
    1 answer

    Hello there. I am using react-slick for carousel. React-slick sets centerMode true for every carousel

    I am using react-slick for carousel. React-slick using centerMode true for every carousel even I don't use this attribute. How can I turn off this attribute. centerMode= false is not working this is setting for react-slick This is Slider component I…
    1 2
    3
    18 19