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
1 answer
React Slick half of previous and next slide
I'm trying to show half of the previous and next slide with react-slick, but I cannot find a viable way to do it with css. I tried to set the padding of the slick-list like this:
.slick-list {
padding: 0 20% !important;
}
But this only shows the…
Sergiu Tonț
- 165
- 13
1
vote
1 answer
Changes in CSS-file don't affect React-Slick
I'm trying to change the styles of React-Slick carousel that I use in my GatsbyJS project. In my Slider component I import the libarary the way it's shown in the official docs:
import Slider from "react-slick"
import…
scripter2021
- 341
- 2
- 10
1
vote
0 answers
Remove out of bounds elements in slick-slide carousel
I use the react-slick carousel, but the next and previous texts stick out. How do I fix this?
https://codesandbox.io/embed/crimson-microservice-ll0hho?fontsize=14&hidenavigation=1&theme=dark
Natsuo
- 63
- 7
1
vote
2 answers
react-slick carousel somehow adding link to every image
I am working on a Gatsby project and am having issues with a homepagebanner.
Using react-slick which works ok, but adding content on top of each pictures is causing problems. Setting a link for the second picure ("golflink") is resulting in every…
user12648599
1
vote
1 answer
I want to access dom even in a modal with React-slick (useRef)
Currently, I'm using react-slick to implement it.
I want to access the slider dom with useref (ref.cuurent), but the moment the modal opens, it becomes null.
You can access it by sliding it.
I think it's probably because I'm accessing it within a…
hina
- 11
- 1
1
vote
0 answers
How to make react slick carousel resizable when I zoom out?
So like the title says, what I am trying to achieve is that when I zoom out, I want my carousel to be 100% width of the screen all time, here is what I mean by that. Right now when I zoom out, my carousel looks like this:
But when it is 100% zoom,…
ahmedskulj10
- 381
- 1
- 15
1
vote
0 answers
How to add class in nextSlide and prevSlide in React Slick Slider
I know with jquery it is very simple to add class on the next and prev slide in Slick Slider. My question is on change or beforechange, afterchange, onInit to add class on nextSlide and prevSlide Sharing my code as well.
const settings = {
dots:…
Salman Aziz
- 426
- 8
- 15
1
vote
1 answer
react-slick overlap navbar dropdown. how can i show dropdown over the slick slider?
I'm trying to show navbar dropdown over the slick slider. it's only show when i style .slick-slider z-index negative value, but this is not right because i can't click inside slider.
Abdul alim
- 29
- 5
1
vote
1 answer
How to add className to next and previous div in React slick carousel
const BeerSlider = () => {
const settings = {
className: 'center',
dots: true,
infinite: true,
speed: 500,
focusOnSelect: true,
slidesToShow: 3,
…
verba
- 11
- 3
1
vote
2 answers
I'm using react-slick, how can I export a React Component as a single element but remove the parent div on render
I have a slider I built in react js using react-slick
Hilory
- 236
- 2
- 12
1
vote
0 answers
React Slick dots cover Text
I use React-slick but as soon as I want to display the dots the text is covered. If I remove the background, the text is visible, but the distance is not formed to the text, but to the upper elements.
Now my question how can I get a distance to the…
WithMe
- 11
- 1
1
vote
0 answers
react-slick initializes width to 0 on first page load
When I load react-slick carousel into my page, it always initializes with a width of 0.
https://gyazo.com/a78362bf34a39f56802096c60b97cd06
Ive tried many things, but it mainly seems like the inline width of slick-slide slick-cloned beint set to 0 is…
Shooting Stars
- 755
- 1
- 9
- 20
1
vote
1 answer
styling a caption to the center of a slider in react
I am trying to center a caption texts to a sliders that I have created in react using react-slick, the problem I am getting is that when I use the CSS property text-align: center in the caption div the application takes the length of my slides as…
James_kahosh
- 65
- 1
- 1
- 5
1
vote
1 answer
React slick height issue when ading slick items dynamically
I am using the react-slick slider to display a set of images. after the user crosses some slide position I am calling another API and appending the new results with the existing results using old.concat(new) stored in component state. Each time when…
K.B.K.R
- 11
- 2
1
vote
0 answers
React Slick overlapping images
So I've been using react-slick for a while, but one problem remains the same.
I have a screen-wide carousel which shows 1 slide at a time. When I open the dev-tools window(hence - decreasing width), the previous slide overlaps the current with the…
nbgslv
- 76
- 2
- 7