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
0 answers

React slick slider event on beforechange

I want to get from which element before change fires when clicking on arrow and pagination react slick const settings = { beforeChange: (prevSlide, currentSlide, event) => { console.log(event) }, }
N.J.honey
  • 44
  • 3
0
votes
0 answers

ref.current.slickNext() is bugged when I loading new data from my api in react-slick

I'm using redux-sagas for store management, so when the request state is success, it should slide to the right using the ref. However, this behavior is not being reflected. What happens is that it doesn't slide to the right; I have to go back and…
Agustin R
  • 47
  • 6
0
votes
0 answers

How can I make the content of the Slider component flex or in a row layout?

I'm new to web development and currently working on a project where I have implemented a Slider component using the react-slick library. However, by default, the content within the Slider is displayed in a column layout. I would like to change this…
0
votes
0 answers

slickFilter/slickUnfilter was not working properly in Iphone

The slickFilter/slickUnfilter methods are working fine when the page loads/reloads, but when I scroll the site up or down on my iPhone, the methods stop working properly. I have a list of products in a slick slider that I use to compare each…
0
votes
0 answers

Implementing a Carousel with Bottom Tab Functionality in React: How is it done on aicarousels.com?

I was trying to replicate some online projects. I stumbled upon this website https://www.aicarousels.com/editor. I was wondering how has been the editing area implemented, Especially the carousel and the bottom setting tab that opens up every time…
0
votes
0 answers

Using react-image-magnify with react-slick

I have a slider made on react-slick, I want to add a zoom effect on mouse hover. But the enlarged picture appears inside the slider itself. If you specify overflow: visible in the style; everything works correctly, if there is more than one picture…
0
votes
0 answers

I'm trying to imitate this dot pagination animation using react-slick but not having any success

Dot Pagination Animation Hey, I'm kinda new to this. Sorry if this is a basic question. I found a solution but it is for react-native. I'm struggling to find a solution for this. I will be very grateful if anyone can help. Whatever style i am…
0
votes
0 answers

Is there a way to show popovers only on click of Slider dots in react-slick?

I am using Slider component from "react-slick", and wanted to show popovers only when users click on Slider dots, tried afterChange, beforeChange setting props, but that does not worked, it is like popovers should only appears when user click on…
0
votes
0 answers

how to make element center in customized react-slick?

I try to make this active dot center of widows. but i can't do that. any one help me for that? i have added code sandbox link here: CodeSandBox
0
votes
0 answers

React slick slider handle tab keypress

How to handle tab keypress using react-slick-slider? It moves through slides, but it does not change the active one. Here is the demo: https://codesandbox.io/s/slick-slider-tab-docbw5 When you navigate through slides via Tab button, it moves to the…
Oktay Yuzcan
  • 2,097
  • 1
  • 6
  • 15
0
votes
0 answers

How to resolve an issue with tab navigation?

There is a slider that was created with react-slick library. Every single slide has an interactive element inside of it(a button for example). When user wants to navigate using tab, the slider works unexpectedly. Here is the link to the example. You…
Lenur
  • 13
  • 4
0
votes
0 answers

Indexing specific slides using React-slick w/ URL Routing

I am trying to use React-slide to load a series of dynamically-driven card components. The number of cards will change frequently by platform users. I have so far been successful in passing prop data, mapped onto React-slick slides. Navigation…
jstalker
  • 1
  • 1
0
votes
0 answers

Hide react slick next button when reached the end of the carousel for all screen sizes

I am using react slick in my NextJS project to create a carousel of items. I have the showPrevArrow and showNextArrow to determine whether I am at the start of the carousel (to hide 'previous' arrow) or at the end (to hide 'next' arrow). My code…
Dae
  • 21
  • 6
0
votes
0 answers

Adding Lightbox Functionalty to a React Slick Slider built with json data

I'm new to React. Trying to build a portfolio page with some functionality like lightboxes. The problem I'm having is to integrating lightbox with React Slick slider. It is an infinite slider with a thumbnail, a header and short description of the…
0
votes
0 answers

React slick transparent border over (custom) arrows

I am trying to create a transparent border over the Arrow for examplelike is on Disney+ like when you hover even where is the image not located, the image will show. my CSS: .slick-prev:before{ background: url(./slider/previous-icon.png); …
BLENTIX
  • 1
  • 1