title: Slick Slider React - How to keep the same width and space whatever the size screen?
body: <p>I am creating a slider in react with Slick Slider. The problem is: when the screen size changes, the slides reduce in size or stack on top of each other.</p>
  <p>Slick slider offers :</p>
  <pre><code>      responsive: [
          {
            breakpoint: 1024,
            settings: {
              slidesToShow: 3,
              slidesToScroll: 3,
              infinite: true,
              dots: true
            }, 
      …
        ]
  </code></pre>
  <p>But this does not prevent the change in size of the slides and does not fix the margin between the slides which are constantly changing.</p>
  <p>I tried :</p>
  <pre><code>.slick-slide {
    width: auto !important;
  }
  </code></pre>
  <p>In the CSS file, but then the slides accumulate one under the other, generating 4 rows instead of 2. Also, the animation is too large and create a blank space at the end of the slider.</p>
  <p>Is it possible to create a slider with slides, that keep the <strong>same size and space</strong> between them whatever the size of the window? A way to keep a <strong>fixed size of slides</strong>, showing only the number of slides possible on the screen and showing only a part (or not) of the following slides?</p>
  <p>So as to be responsive as well. What is wanted :
  <a href="https://i.stack.imgur.com/DgUIC.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DgUIC.jpg" alt="enter image description here" /></a></p>
  <p>Here is my code :</p>
  <pre><code>      const settings = {
          rows: 2,
          slidesPerRow: 1,
          slidesToShow: 3.2,
          infinite: false,
          swipeToSlide: true,
          slidesToScroll: 1,
          lazyLoad: true,
          responsive: [
              {
                breakpoint: 1200,
                settings: {
                    slidesToShow: 2.5,
                    slidesToScroll: 2,
                }
              },
              {
                  breakpoint: 1024,
                  settings: {
                      slidesToShow: 2,
                      slidesToScroll: 2,
                  }
              },
              {
                  breakpoint: 768,
                  settings: {
                      slidesToShow: 1.7,
                      slidesToScroll: 1,
                      arrows: false                }
              },
              {
                  breakpoint: 480,
                  settings: {
                      slidesToShow: 1.4,
                      slidesToScroll: 1,
                      arrows: false
                  }
              }
          ]
  
        };
       
        return (
          &lt;&gt;
            &lt;h2&gt;…&lt;/h2&gt;
            &lt;div className=&quot;cell&quot;&gt;
              &lt;Slider {...settings}&gt;
                  {
                      this.props.data.nodes.map((node,key) =&gt; (
                          &lt;Cell node={node} key={key} /&gt;
                      ))
                  } 
              &lt;/Slider&gt;
            &lt;/div&gt;
          &lt;/&gt;
        );
  </code></pre>
  <p>Thank you!</p>