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
How Do I import React.jsx file to my HTML?
So I've been trying to import an image carousel from my jsx my html file. I've added the necessary scripts to my .html and "npm install react-slick carousel". Nothing is coming up once I load my browser. Help a brother out. Here is my code so…
Kwe
- 1
- 1
- 2
0
votes
1 answer
React-slick shows 5 slide elements in DOM when i have added two slides in view
I have two elements in the slider. I noticed that it actually creates 5 other slides. They have data-index varying from -1 to 3.
Rendering just one element does not have this issue. It only shows a single element in the DOM.
The component I am…
Sagar Acharya
- 1,763
- 2
- 19
- 38
0
votes
1 answer
Errors with React Image Preload and React-Slick
The problem:
I'm using react-slick in conjunction with react-preload-image (latest versions on both) to create a page with multiple slider rails. The idea is to show my portfolio by category, so I'm listing out each category using react-slick to…
Scotty Compton
- 43
- 2
- 6
0
votes
1 answer
Vertical center/change calculated height react-slick
I am trying to find a way to vertically center or otherwise add space to my react-slick slider so that I can show a box-shadow when slides are hovered over. Currently it seems the height is being automatically calculated and the slick-list wrapper…
caraclarke
- 370
- 1
- 5
- 24
0
votes
0 answers
Player on carousel disapper on options click
I'm working on a carousel with html5 video and audio inside. All works fine but, when I click on options button (the three dots button), the player disappears. This happens for video and also for audio, only inside the carousel, the player is…
red
- 1,529
- 1
- 12
- 33
0
votes
1 answer
The width of react-slick slide does not change when I resize the browser
I create a testimonial slide by react-slick.
My code is:
const settings = {
dots: true,
adaptiveHeight: true,
swipeToSlide: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
…
Kevin
- 55
- 2
- 11
0
votes
1 answer
react-slick within boostrap-grid at screen resolution less 576px
I use react-slick and bootstrap grid. jquery is not connected - only the bootstrap 4 scss files are used (scss / bootstrap-grid.scss and scss / utilities / _sizing.scss).
Slides are located inside the grid containers:
…
Cyril Zlachevsky
- 15
- 7
0
votes
0 answers
Image opens on full screen when clicked
I am using react-slick to display a list of images.
class AppScreenshotsUI extends Component {
render() {
var settings = {
arrows: false,
dots: false,
draggable: true,
speed: 500,
slidesToShow: 2.3,
…
Shubham Chopra
- 1,678
- 17
- 30
0
votes
1 answer
calculate responsive width of element to define size
I have a caroussel using react-slick and I want the main slide to take the same width as another component and being responsive.
I tried to calculate it like this:
const width = (window.innerWidth -…
Fabian
- 87
- 3
- 11
0
votes
1 answer
Syncing React-Slick with Query Params
I'm using React-Slick to render
Joe
- 177
- 3
- 16
0
votes
0 answers
React - load external js which outputs HTML into React Slick component
Just wondering what the procedure is loading an external script into a component which renders HTML?
I call a script, which returns me an unordered list which i want to use for an image carousel it looks something like this but currently isn't…
ace2case
- 261
- 2
- 8
0
votes
1 answer
Sending relative data from mapped array into a modal?
So I have mapped data from array into a carousel, creating total of twenty carousel items. Each element has "same" button embedded into them. I want to send the relative data from each element into the modal when that button is clicked and honestly…
Niko Wonde
- 15
- 4
0
votes
0 answers
react-slick with react-image-zoom conflict image Zoom not working
i want zoom image with multi slider like eCommerce product
but react-image-zoom conflicting with react-slick
import Slider from 'react-slick';
import ReactImageZoom from 'react-image-zoom';
class product extends Component {
render(){
var…
Praveen Gopagani
- 1
- 5
0
votes
1 answer
Add dots in each slide with React Slick slider
For a slider in React.js, I use React Slick.
With this API, we can easily add previous and next button in each slide with Previous and Next methods.
But I wonder how to do the same thing with dots.
Each slide is structured as follows:
const slides =…
Redhelling
- 1
- 1
- 2
0
votes
1 answer
React-ga not returning correct active page in Google Analytics Dashboard
Context: In the app, I am using react-slick to allows users to navigate through components like a carousel. (NOTE: as users navigate through the carousel, the URL for the application does not change/update; always https: //myApplicationURL.com)
What…
JSzeto821
- 55
- 1
- 1
- 8