Questions tagged [react-slick]

Questions involving the library react-slick

react-slick is the port of the jQuery slick library to react.

281 questions
0
votes
2 answers

Independent scroll time-picker on hover using react-slick

I am building a time picker using react-slick library for carousels like below: Client asked me to have an ablity for scrolling time using mouse wheel. I managed to implement it, however when I scroll using mouse, all pickers scroll at once. The…
Michał Lach
  • 1,291
  • 4
  • 18
  • 37
0
votes
1 answer

Increase height of slide using react-slick in vertical mode

I am building a timepicker/timeroller using react-slick (unsual, I know). I am struggling to increase height of slides, so that I can have more space to work with on mask area (place where grey hours and minutes titles are) Here is what I got so far…
Michał Lach
  • 1,291
  • 4
  • 18
  • 37
0
votes
1 answer

Anchor tag '' not working on first click inside Slick

I am placing an anchor tag inside slick slider (React-Slick), it is not working on the first click, but on the second click onwards , this is for each image. Code :
Anmol Bhardwaj
  • 636
  • 6
  • 18
0
votes
0 answers

React Slick, Slider disappears when arrows are false

I'm using react-slick in one of my projects and for some reason when I turn off arrows the entire slider disappears The code is looking like this
0
votes
1 answer

::before pseudo class impacting arrows in react-slick

The previous and next arrows are white when I use the Slider component with minimal settings. This is because slick-theme.css has a .slick-prev:before and .slick-next:before that sets the color to white, so the arrows are invisible! Since I have no…
L Becker
  • 685
  • 8
  • 28
0
votes
2 answers

Move the slider in react slick carousel on click on next/prev image

I am using centerMode: true and adding a background-color for inactive images. I need is a movement on the click of the previous/next inactive image so that the carousel should move accordingly. const settings = { dots: false, slidesToShow:…
Hitesh
  • 157
  • 3
  • 14
0
votes
1 answer

Change classname based on slider index position

I want to change the className based on the selected slider data-index position in https://stackblitz.com/edit/react-slick-slider-issues which is making use of React-slick-slider. Suppose if the user hovers on the first image, the image data-index…
visizky
  • 701
  • 1
  • 8
  • 27
0
votes
1 answer

React slick giving blank background image in div inside

i am very new to React, i am trying to use react slick, so as to achieve image as background with carousel . but when i try to do it, i am getting blank instead of image. i cannot see my inline style as well when i inspect. but if i use tag that is…
Milan Mangar
  • 41
  • 1
  • 9
0
votes
1 answer

How to pass the value outside of the arrary while click on button in React js , React slick carousel?

I have two Array of Objects given below Head: [ {name: "abc", Number: "931", TypeCode: "73HB"}, {name: "pbc", Number: "781", TypeCode: "89PH"} ]; Super: [ {name: "hxc", Number: "123", TypeCode: "T78"}, {name:…
kirankumar
  • 135
  • 1
  • 7
0
votes
1 answer

Style react-slick.neostack

slick.neostack to a slider, and the slider imports but I cant see anything and it appears as the styling is causing that. But when I am trying to style my page I cant "target" the classes that I want to use. I tried to look at this example:…
camillalofroth
  • 179
  • 1
  • 1
  • 10
0
votes
0 answers

React slick Slider toggling between 3 sliders, issue with slickGoTo()

https://stackblitz.com/edit/react-slider-slickgoto has a Menu with 3 options and selecting each option will display its subcategories on the slider. Option 1 has 3 slides and Option 2 and 3 have 2 slides. I am using slick.current.slickGoTo(0)…
visizky
  • 701
  • 1
  • 8
  • 27
0
votes
1 answer

How to make React slick slider work with icons?

There is a code that displays icons switch (name) { case Header.Arrows.name: return ; case Header.Zoom.name: return ; default: return…
0
votes
1 answer

Issues with Background Larger than Circle Div CSS

I try to customize dots with React Slick and have this issue with the background color. Here is how I set the styles. .slick-dots.circle-dots { list-style-type: none; display: flex !important; justify-content: center; padding: 0; …
Ian Tran
  • 315
  • 3
  • 14
0
votes
2 answers

Customize Slick slider design with proper space between images

I am using react-slick for carousel feature. I am having a hard time in customizing to get the design like below. If I try to provide the space between images like in the screenshot, the other images get pushed away and totally disappear. Here is…
Serenity
  • 3,884
  • 6
  • 44
  • 87
0
votes
2 answers

Having Issue with react-slick. Swipe on mobile not working

I am having an issue with react-slick. I need to make it "swipe" on mobile. Unfortunately the swipeToSlide: true, which I found in the Documentation doesn´t seem to work. Any solutions? Here is a sample of my settings Code: const settings = { …