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
editing slick-list class in react slick slider
the problem is i use a couple reactSlick component in my react Apps, in home and the others is in team Page, i already customize in globall.css (nextjs) for the homepage, now i wanna change classes named .slick-list in tournament page that some how…
Maszgalang
- 77
- 4
- 14
0
votes
2 answers
react-slick last slide is being displayed first upon load
I'm encountering an issue with react-slick where upon first-loading the page the last slide is being displayed first while the pagination-dots are on a disabled state(this indicating that the autoplay has not yet begun), after the autoplay begins it…
KvnG.
- 658
- 1
- 7
- 17
0
votes
1 answer
React Slick Custom Carousel with image overlap a div
i am trying to make carousel like this.
But i dont know how to make the image overlap the top of the div like the picture.
also i dont know how to put the button inside the div with the text.
here is what i already make
and here is my…
Gerry
- 281
- 1
- 3
- 14
0
votes
0 answers
How to null check for a mapped slideGoTo item?
I am trying to deal with a problem where I am using react-slick. I mapped a JSON file for images and it gives me the error "Object is possibly 'null'.ts (2531)". I have to keep strict typing so I just can't get rid of it. Here is the part of the…
osmancalisir
- 147
- 2
- 10
0
votes
0 answers
where can I find Slider Syncing(asNavFor) styleSheet (react-slick)
I'm creating a carousel that similar to Slider Syncing design.
then, I want to refer to design styleSheet.
(in particular, the margin between slider.)
I searched the styleSheet file in repository, but I can't find it.
Do you know where the…
sho
- 133
- 8
0
votes
1 answer
Set react slick autoplayspeed dynamically without setState
return {
dots: false,
arrows: true,
infinite: true,
speed: 300,
slidesToShow: 1,
centerMode: true,
autoplay: true,
cssEase: "linear",
autoplaySpeed: 2000,
centerPadding: '0px',
…
Furkan Ağca
- 15
- 1
- 5
0
votes
1 answer
React limits the number of renders to prevent an infinite loop - react hooks
I have a simple section in which contains a slick slider I want on clicking a button eg button 1 it should open a specific slide.
Here is the live demo on codesandbox slick go to slide
Here is the js code
import React, { useRef, useState, useEffect…
The Dead Man
- 6,258
- 28
- 111
- 193
0
votes
1 answer
React slick carousel items get blurred
I have a carousel that have some card items. but it gets blurred when the carousel animates. I couldn’t find a fix for this. I'm using Next.js with TypeScript.
const ref = useRef();
const settings = {
arrows: false,
variableWidth:…
Anjula Samarasinghe
- 227
- 5
- 10
0
votes
0 answers
React player video does not stop on playing
I am using React-Slick for slider . Here in one one of my slider I have a video to play. I am able to play video using React-Video But the video plays even if we change slide
const [ isplaying, setIsplaying ] = useState(false)
…
ganesh kaspate
- 1
- 9
- 41
- 88
0
votes
0 answers
How to display one slide at a time and remove the blank at the end? (react-slick)
How to display one slide at a time and remove the blank at the end?
I need to output 1 word at a time, but at the same time get rid of the void at the end
My problem img:
enter image description here
How to do this, given that each element has a…
0
votes
1 answer
React slick + react tabs
Help me combine those two packages, please.
I need slider for tabs, which looks something like that:
< | tab 1 | tab 2 | tab 3 | tab 4 | >
-------------------------------------
| Panel …
John Smith
- 1,204
- 3
- 22
- 42
0
votes
1 answer
React Slick get current page number
I have looked through all docs and managed to get the number of slides using the code below. There are plenty of solutions regarding getting total slides but not how to get current page number when using several slides. Essentially, the dot number…
Spirconi
- 164
- 1
- 12
0
votes
2 answers
How can I not display elements that are repeated?
How can I not display elements that are repeated? (react-slick slider)
The problem is that the items are duplicate, how do I fix this? Honestly, no thoughts come at all, please tell me
const titles = [
{
title: "iPhone"
},
{
title:…
Alex Nilson
- 41
- 3
0
votes
1 answer
React-slick custom arrow with styled-components
I'm trying to create custom arrow with styled-components for react slick but the dafult content of the arrow would not go away.
Any suggestions?
const RightAr = styled.div`
.slick-next {
font-size: 0;
line-height: 0;
top: 50%;
…
Nika Roffy
- 891
- 2
- 8
- 20
0
votes
2 answers
ReactJS not reading img tag src
I have this component
import leftArrow from "../../../../../assets/svg/left.svg";
export const LeftArrow = (props) => {
const {className, style, onClick} = props
return (
Nika Roffy
- 891
- 2
- 8
- 20