Questions involving the library react-slick
react-slick is the port of the jQuery slick library to react.
Questions tagged [react-slick]
281 questions
1
vote
2 answers
React Slick Slider href always points to the same link
I have the following slider
const Slides = () => {
const data = useStaticQuery(graphql`
query Slider {
allPrismicSlider {
nodes {
data {
slider {
alternative_text
…
Mac Hooper
- 103
- 10
1
vote
0 answers
react-slick carousel CSS, "Failed to compile" error
I'm having an issue with my react-slick carousel. I'm following official documentation and installation steps but I'm getting this error:
It seems to be a very common error, and I've tried solution which I've found here on stackoverflow - delete…
Pinncik
- 321
- 3
- 14
1
vote
1 answer
Unable to get desired result from react slick
I was trying to implement React slick's multiple items carousel. The desired result is given below
but I want the center element to pop out a little just like
But I'm able to get this far
I want only three elements visible at a time and center…
era s'q
- 537
- 1
- 7
- 27
1
vote
1 answer
Adding full screen background in react-slick carousel
I am using react-slick to create a full screen slider, but I am stuck at adding a image in the background.
I am using the following.
import image1 from "../assets/bg1.png"
import image2 from "../assets/audit.png"
import image3 from…
Rishav Sinha
- 331
- 1
- 5
- 15
1
vote
2 answers
React-slick: Adding animation while sliding
I had created a slider using react slick now there is a requirement to change transition and animation of slides on prev and next button click. Got some help that add class to currently active slide while changing slide and add animation and…
user12660992
- 59
- 1
- 3
- 12
1
vote
1 answer
React.js animate slide height when using adaptiveHeight
Is there any way to animate the slide height when using adaptiveHeight? For example, when you click 'next' and the next slide is taller, it would smoothly animate to the increased height.
Igor Makeenko
- 41
- 3
1
vote
1 answer
Accessing slide elements of react-slick slideshow
I'm adding a slideshow using react-slick and implementing my own lazy-loading routine so that I can pre-load images a slide ahead (eventually 2 ahead). In order to do this, I need to access the DOM element containing the list of slides wrapped by…
Ed Lucas
- 5,955
- 4
- 30
- 42
1
vote
1 answer
Change the current slide with react-slick
I'm using the react-slick library to make a slider, and I would like to change active slides and the slide which is at the top of the slider. For example, if I click on a button in the current page, I want the current slide at the top of the slider…
Eloi
- 86
- 1
- 2
- 11
1
vote
1 answer
Disable swiping after last slide in react-slick
I am using react-slick for a carousel and have a requirement to disable swiping and dragging of slides after reaching the last image. I research and tried to set swipe: false on the last slide, which worked to disable swiping. However, when I am on…
user12660992
- 59
- 1
- 3
- 12
1
vote
1 answer
React slick slider doesn`t pass props
I have a couple of components with Slider. In the first component i receive props. But in the second component i don`t receive props.
Below code of my components:
import React, { Component } from "react";
import Slider from "react-slick";
export…
Чынгыз Усенов
- 45
- 1
- 4
1
vote
1 answer
How to add class to li tag in react-slick
I'm using the react-slick library. I've checked API docs, but not found any props to set a li tag class.
how I can add my custom class names?
Anthony Zhogolev
- 11
- 2
1
vote
0 answers
How to work with JSX in React using react-slick-slider?
I have a method for rendering icons:
public foo = (baz: any) => {
const activeBox = this.props.activeBox;
const disabled = this.props.disabled;
switch (baz) {
caseArrowsTool.name:
return…
Angella Cephus
- 11
- 2
1
vote
2 answers
How can i set display flex in my react slider?
This is my slider
Alina Homyakova
- 21
- 6
1
vote
1 answer
React slick-slider wheel Event for child components (useRef)?
Im using the React slick-slider. I wanted to implement the wheel event so when the user scrolls on the trackpad it would change the current slide. https://stackblitz.com/edit/react-slick-slider-issues I'm using the useRef to make a reference to the…
visizky
- 701
- 1
- 8
- 27
1
vote
2 answers
React slick how to enable no pause
i am trying to create infinite slideshow without pause
this are my settings for the react-slick slider
const settings = {
infinite: true,
slidesToShow: 3,
autoplay: true,
speed: 5000,
autoplaySpeed: 0,
arrows: false,
slidesToScroll:…
Harel
- 531
- 8
- 21