CODEWITHSUNDEEP
reactjsslick.jsreact-slick
Cyrus Khalatbari
Cyrus Khalatbari

Reputation: 117

react-slick without sliding effect

I'm using this npm component to create a carousel. https://github.com/akiran/react-slick

This is working great, but I need to find a way to remove the sliding effect. There is a slide Property via the repo's doc but it seems not to work. Did anyone came across this case? Any help will be greatly appreciated!

Upvotes: 1

Views: 3002

Answers (1)

crunchyave
crunchyave

Reputation: 56

If you want to disable the sliding effect and have the slides remain in place while they transition, you can accomplish this with the fade property. It's shown quite well at this link https://react-slick.neostack.com/docs/example/fade but a simplified example is shown below:

import React, { Component } from "react";
import Slider from "react-slick";

class Carousel extends Component {
  render() {
   const settings = {   
     slidesToShow: 1,
     fade: true
   };

  return (
    <div>
      <Slider {...settings}>
        // Carousel data here                
      </Slider>
    </div>
  );
}

Upvotes: 1

Related Questions