Questions involving the library react-slick
react-slick is the port of the jQuery slick library to react.
Questions tagged [react-slick]
281 questions
0
votes
1 answer
how can I convert Jquery slick slider code to react js
I am trying to convert an html css, and jquery file to a react project. The problem is jquery is not working on my react project. Basically, I want to use a slick slider on my react project but the problem is jquery is not working on my react…
Jerin
- 717
- 1
- 7
- 28
0
votes
0 answers
Autoplay in NextJs slick slider not working when number of slides is eqaul to slidesToShow
I am using Slick slider in NextJs. Everything is working fine except that when the number of slide items is equal the value of slidesToShow, the infinite autoplay ceases to work. Is there a way to go around this.
Kofi Talent
- 145
- 2
- 12
0
votes
1 answer
How can Slider auto selected second dots instead of the first dots React Slick
My setting:
const settings= {
infinite: false,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
dots: true,
nextArrow:
Thach Steven
- 3
- 1
- 1
0
votes
0 answers
React Slick - slickToGo doubts
I'm trying to use React Slick to display several cards.
I want that on entering the page with the slider this will slide to the selected/highlighted slide.
But I cannot find a way to get an index or identifier from the react-slider, maybe I'm…
Henrique
- 31
- 4
0
votes
1 answer
create-react-app, react-slick, video playback holds while sound is playing
I'm implementing kiosk program using react.
There is a problem which is really weird.
The first screen shows slides using react-slick.
Slides include pictures and videos.
Sometimes, video stops playing while only the sound of the video is playing.
I…
EUN WOO LEE
- 39
- 1
- 5
0
votes
2 answers
How to add and remove classes to the active slide child 'div' on react slick carousel
If you are on the active slide i want to add a className content_animation to the className="content_text".
And if the slide changes whether you click/swipe the arrows or dots, the active slide will always do the same which is to add a className…
clarkf
- 547
- 2
- 10
- 22
0
votes
1 answer
Show or hide Carousel item depending on index | React
I'm using React Slick centerMode as my image carousel and trying to show 3 images at a time. Also, I would like to show the title of the image when it is centered (current index) only. The problem is it will show all the title at the same time. How…
satudaku
- 5
- 2
0
votes
1 answer
How do I adapt arrow styles in React Slick Slider?
I want to replace the standard arrows of react-slick with my own arrows, which are (just for testing purposes) png images. I get the images on screen, but they are automatically set to a width and height of 20px. As my png's are 17x27px, my images…
round_circle
- 835
- 1
- 10
- 22
0
votes
1 answer
Adding Modal Popup on Each Image Inside React Slick Slider
I want to show modal popup everytime the image is clicked on my react-slick's slider, and totally have no idea on how to do it. my slider is receiving image from array
I want to assign each image to have unique onClick function
example :…
Marviano
- 117
- 11
0
votes
1 answer
How to export react-slick on another index.js file?
I want to add react-slick code on to my index.js (services folder) by following it's documentation, but it's not working.
I'm using this method to show/call my pages on my main index.js
index.js (Services Folder), i want to add react slick code on…
Marviano
- 117
- 11
0
votes
1 answer
React slick hover scale issue
I am making a carousel with react-slick and trying to add hover transition to it. But the picture can only scale in 1 direction.
My css:
.carousel {
margin-bottom: 10rem;
margin-left: 3.75rem;
margin-right: 3.75rem;
.slider-container {
div { …
Finlandary
- 105
- 1
- 8
0
votes
1 answer
How to align arrow icons and slider dots horizontally in straight line?
I'm using react-slick to create an image slider with captions with following prototype. The only problem is I need to display text for corresponding image below the default dots position, hence I'm trying to create custom dots and arrows with…
Min Yoongi
- 396
- 5
- 16
0
votes
1 answer
React - useRef is not pausing video
I am using react-slick for slider. I want to stop the video when the slide changes. I use useRef for this, but the play or pause functions do not work. How can i solve this?
import React, { useRef } from "react";
import Slider from…
Zagano
- 99
- 1
- 10
0
votes
1 answer
Do not show slider photos react With react-slick
I have the next .js project. I want to use react-slick.
I installed the react-slick and slick-carousel packages .
I added css carousel :
import React from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import…
Mina
- 48
- 7
0
votes
2 answers
How to prevent carousel content from showing on top of one another
I want to display a number of cards in a carousel. For the carousel, I'm using react-slick. Since I want to show one card in the center, and I also want to show parts of the other cards at the ends of the carousel, I've set centerMode: true and…
U. Watt
- 533
- 1
- 5
- 27