Questions involving the library react-slick
react-slick is the port of the jQuery slick library to react.
Questions tagged [react-slick]
281 questions
25
votes
9 answers
react-slick: Import CSS from slick-carousel fails
React beginner here. My app uses create-react-app, and I'm pulling in react-slick for a carousel. I'm trying to follow the directions that are provided in the setup for react-slick, but the following doesn't work for me:
@import…
flysi3000
- 395
- 1
- 4
- 9
16
votes
4 answers
React-Slick Carousel - Disable arrows
We are using React-Slick for the Carousel effect in our application. The content in the slider is dynamic and the length of the Carousel items can be between 4 to 20.
The problem is that even when the width of all the content is less than the width…
Kashif Nazar
- 20,775
- 5
- 29
- 46
9
votes
12 answers
Custom Arrows react-slick
I am using react-slick to create a carousel in my project.
I've read through the documents and tried different things but could not find a way to customize it exactly the way I need... Does anyone knows if there a way to have the nextArrow show…
Aurelie O.F.
- 119
- 1
- 2
- 7
8
votes
3 answers
Prev and Next button is not working correctly at the breakpoints
Guys I'm facing a problem in react-slick slider. I'm rendering a card on the slider depends upon the array length. I'm also rendering custom next and previous buttons which triggers the next and previous functions to change the slide. I also wanted…
John Chucks
- 381
- 1
- 15
7
votes
2 answers
How to execute slickNext method in react-slick carousel?
I have the following React app with a Slick carousel. I created a custom Next button and need to execute the slickNext() method to proceed to the next slide. The Slick carousel docs and some of the answers for questions have mentioned the following…
David Johns
- 1,254
- 3
- 19
- 48
7
votes
7 answers
inline style css background in react not showing
What is the problem in my code? This is a slider:
{slides.map(function(item){
return (
jmv
- 415
- 2
- 9
- 24
7
votes
6 answers
How to style carousel dots?
How do I style my carousel dots to become like this ?
Here is what I have now.
Here is how I style it.
.slick-dots {
position: absolute;
bottom: -45px;
list-style: none;
display: block;
text-align: center;
padding: 0;
width:…
iori
- 3,236
- 12
- 43
- 78
6
votes
2 answers
React slick compatibility with Nextjs
I am planning to add React-slick library into my nextjs project for image slider, but getting an issue
Tries installing "react-slick" and "slick-carousel" as mentioned in the docs by
yarn add react-slick
yarn add slick-carousel
but then as soon as…
Ratnabh kumar rai
- 1,426
- 4
- 21
- 48
6
votes
2 answers
Setting styles for react-slick
I am using react-slick (https://react-slick.neostack.com/) to make an easy slider component of my blogs. Now, I want to simply set position: relative and z-index: 50 to the div with class slack-current (which is generated by the Slider component),…
round_circle
- 835
- 1
- 10
- 22
6
votes
1 answer
useRef throws not assignable to type LegacyRef | undefined
I'm using react-slick-slider and what I want to achieve is to make custom arrows.
So code looks like this:
const FeedbackSlider = () => {
const [isLargeScreen] = useMediaQuery("(min-width: 1050px)")
const sliderRef = useRef()
const prev =…
Marko B.
- 535
- 3
- 8
- 18
6
votes
2 answers
React-slick Slider stays on same page if slides items are changed
I am stuck with an issue with react-slick. The subject line may not make sense, but I will try to explain the scenario in detail. See this example fiddle to see the issue in action.
var DemoSlider = React.createClass({
getSlides(count) {
var slides…
Abhishek Jain
- 2,957
- 23
- 35
5
votes
1 answer
defaultTheme is not defined using Tailwind CSS
I was working on project where I used React, Next.js with Tailwind CSS, and I did some customization in styling, like used react-slick for slider, and I applied custom CSS to react-slick slider classes and made slider as I want to... but meanwhile I…
Jason0011
- 444
- 1
- 6
- 19
5
votes
1 answer
react-slick causing the whole page to hang
I set the following configuration for the react-slick:
infinite: true,
speed: 500,
slidesToShow: 6,
slidesToScroll: 5,
swipeToSlide: true,
autoplay: true,
arrows: false
dots: false
Everytime the slick item slides, the whole page hangs. For…
iPhoneJavaDev
- 821
- 5
- 33
- 78
5
votes
1 answer
How to remove inline css width: 100%; display: inline-block; from react-slick
I am not sure why react-slick adds bellow inline properties while forming the slider.
width: 100%; display: inline-block;
Because of this my applications own CSS doesn't work and behaves differently. Please help me understanding and resolve…
Bikram
- 323
- 5
- 10
5
votes
0 answers
react-slick with width=0 (img not displaying)
I'm using react-slick and I'm having a hard time trying to figure out what's going on with this weird width=0 behaviour. I came accross this issue on the github repo but I have not achieved to fix it. My images are not displaying. Any ideas I could…
Cyrus Khalatbari
- 117
- 1
- 2
- 7