CODEWITHSUNDEEP
reactjsreact-slick
Sunil tc
Sunil tc

Reputation: 2592

How to avoid repetition of carousel items in react-slick

I'm using react-slick. I want to show four items at a time. I'm showing data dynamically.

If I have single item in carousel, it's repeating to fill the place of four items.

This is my code:

const settings = {
    dots: false,
    infinite: true,
    speed: 500,
    slidesToShow: 4,
    slidesToScroll: 1,
};

<Slider {...settings}>
  //mapping data
</Slider>

Thank you

Upvotes: 5

Views: 6235

Answers (3)

Naveed Warraich
Naveed Warraich

Reputation: 1

**I am getting the same issue when I use react slick I got duplicate slide but then I import the style file after that my issue is resolve **

  import "slick-carousel/slick/slick.css"; 
   import "slick-carousel/slick/slick-theme.css";

Upvotes: 0

zeeshan sarwar
zeeshan sarwar

Reputation: 71

infinte : items.length >3;

let settings = { slidesToShow: 3, arrows: false, infinite: megaProjects.length > 3, slidesToScroll: 3, autoplay: true, autoplaySpeed: 8000, lazyLoad: true, }

Upvotes: 1

Panther
Panther

Reputation: 9408

It repeats to fill all the 4 places since infinite is provided as true. So it try to find four items, but ends up finding the same item again and again. To get your desired behaviour(that is it scrolls infinitely in both directions), i suggest you set the slidesToShow dynamically.

Assuming you have your mapping data in list, you can set the number of slidesToShow dynamically.

const settings = {
 dots: false,
 infinite: true,
 speed: 500,
 slidesToShow: list.length > 4 ? 4 : list.length,
 slidesToScroll: 1,
};

<Slider {...settings}>
  //mapping data
</Slider>

Upvotes: 11

Related Questions