Stack Overflow
Stack Overflow

Questions tagged [react-slick]

Questions involving the library react-slick

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

281 questions
2
votes
0 answers

React slick doesn't loop slides if slidesToShow is equal to the total slides

I need a carousel that will autoplay and loop through items infinitely. The react slick component doesn't slide through to the first elements if slidesToShow is equal to slide number. It just loops through current items. The carousel doesn't slide.…
Shofol
  • 693
  • 1
  • 11
  • 26
2
votes
0 answers

Random ID being passed in whenever going to a unique route with Link tag

I am in the process of making a recipe app and currently, I am building a component that displays a number of recipes (depending on how much I determine via API call) within a carousel slideshow which showcases the image of recipe, title, and other…
Iris Tristan Jitomo
  • 21
  • 2
2
votes
0 answers

Optimizing react-slick carousel from creating too many DOM elements

I am struggling with a problem that I have too many DOM elements on my page. PageSpeed Insights recommends to me to reduce it and shows me that my carousel is quite large. I have like 150 elements there, I am showing 10 elements (small images) at…
Dizip
  • 85
  • 7
2
votes
1 answer

centering slides with react-slick

I'm trying to implement a react-slick carousel but I'm having trouble getting the image to vertically center. This problem is demonstrated here. https://codesandbox.io/s/react-slick-playground-o7dhn Here is the problems Images are not…
Phantom
  • 423
  • 1
  • 5
  • 13
2
votes
2 answers

Fonts not found: React-slick + nextjs

I am trying to use react-slick inside a NextJs project. The carousel works fine but I have some problems importing the fonts used in the css files. I have tried the following: npm install slick-carousel and imported the css in the component where…
Ørjan
  • 2,749
  • 2
  • 16
  • 24
2
votes
1 answer

React-Slick SlickGoTo implementation not working

I am using react-slick and I am trying to find the solution to go to initial slide on clicking the last slide I have tried adding afterChange,beforeChange and added slickGoto(0) if nextslide is equal to last-slide-num.Actually nothing happens I have…
Rajat Rao
  • 191
  • 1
  • 10
2
votes
2 answers

How to Set arrow controls to a custom button

I added the react-slick into my project to show a carousel. I want to control my slider with custom next and prev button which is in the top of the slider contents. so I followed the custom arrow documentation, but I don't want to show my buttons…
Nandhini Kajol
  • 75
  • 1
  • 4
  • 14
2
votes
0 answers

slideToShow not rendering specified number of columns

I am using react-slick to render elements from the Array. My array length is 4 and every array element contains sub array and i specified 4 in slideToShow, and in 4 in slideToScroll.Inside 4 columns it is showing me 3 columns.Below is my code. const…
user10298495
2
votes
1 answer

React-slick: how sync 3 sliders

I'm using react-slick slider syncing with 3 sliders. With 2 sliders it works fine but when I try with 3 sliders with 2 refs it don't work. constructor(props) { super(props); this.state = { nav1: null, nav2: null, …
yvl
  • 21
  • 1
  • 4
2
votes
1 answer

how to show image slider in React

I am using this plugin https://github.com/akiran/react-slick for image slider but for some reason i am unable to achieve what I want. Here is a sample code: import React, { Component } from "react"; import Slider from "../src/slider"; import {…
Mizlul
  • 1
  • 7
  • 41
  • 100
2
votes
1 answer

Creating a slideshow with an instagram feed

I am trying to create a page that shows a slideshow of an instagram feed, using the libraries instafeed.js and react-slick. A lot of sources writes about the ease of implementing a carousel of fotos from a feed using the jquery slick library…
BaconPancakes
  • 375
  • 7
  • 21
2
votes
0 answers

Stop React Slick right draggable after going to last slide

https://github.com/akiran/react-slick I'm facing problem related to padding. After the last slide, we are able to see space if you drag. https://codepen.io/anon/pen/opdadq http://jsfiddle.net/kirana/wna3a6q5 with the settings: slidesToShow: 2,…
VaraKumar Jagarapu
  • 55
  • 1
  • 10
2
votes
1 answer

React-slick or Nuka carousel with rows

I just started learning ReactJS and had to port an existing template to a ReactJS one. Currently I'm having trouble implementing rows in react-slick. I've seen many asking for this since 2015, but it was not answered. Even the new Nuka Carousel…
claireckc
  • 395
  • 2
  • 11
2
votes
0 answers

React hide unknown-prop warning

I'm using a package which has an issue that causes React to console the error "unknown-prop warning", i am looking for a short-term solution to hide the error until something else can be found/used. Is there a way to hide this? edit: its more of a…
Nicholas Ritson
  • 869
  • 4
  • 13
  • 30
2
votes
1 answer

react-slick slickNext method - "Uncaught TypeError: Cannot read property 'slider' of undefined"

I'm using the react-slick carousel with the Green Sock animation tool, and I've gotten the slider and animations to work. The problem now is calling slickNext method when the animation ends on a slide. I keep getting this error whether I use refs or…
sclem
  • 23
  • 1
  • 4
1 2 3
…
18 19