2

I am using react-slick to render elements from the Array. My array length is 4 and every array element contains sub array and i specified 4 in slideToShow, and in 4 in slideToScroll.Inside 4 columns it is showing me 3 columns.Below is my code.

const settings = {
  arrows: false,
  infinite: true,
  speed: 500,
  slidesToShow: 4,
  slidesToScroll: 4,  
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 4,
        slidesToScroll: 4
      }
    },
    {
      breakpoint: 780,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ]
};

 <Slider {...settings} ref={slider => this.slider = slider}>
      {
        array_groups.map((item, index) =>
        <div key={index}>
          {
            item.map((subItem, subIndex) => 
              <div key={subIndex}>{subItem.title}
              </div>)
          }
        </div>)
      }
 </Slider>

Can anyone please tell me, why it is showing 3 columns instead of 4.

Note: array_groups array contains 4 array elements. It is creating the 4th column, But not showing it.

0 Answers0