title: Wrong width for React Slick Slider in Responsive View
body: <p>I have implemented React Slick Slider for my website, it works proper for desktop view and take proper width accordingly, but if I switch to responsive view the width of the container is not proper and it looks all distorted.  </p>
  
  <p>I have tried to fix it with CSS, given 100% width to the <code>slick-track</code> div but nothing worked. </p>
  
  <p>Following is the container : slick-track and below is the inline css being added : </p>
  
  <pre><code>width: 2.14748e+08px;
  opacity: 1;
  transform: translate3d(-8.05305e+07px, 0px, 0px);
  </code></pre>
  
  <p>Below is how I am initializing the slider in my component: </p>
  
  <pre><code>const settings = {
              dots: false,
              infinite: true,
              speed: 500,
              cssEase: 'linear',
              slidesToShow: this.props.data &amp;&amp; this.props.data.upSell &amp;&amp; this.props.data.upSell.length&gt;=5?6:this.props.data&amp;&amp; this.props.data.upSell &amp;&amp; this.props.data.upSell.length,
              rtl: rtl === "en" ? false : true,
              slidesToScroll: 1,
              asNavFor: null,
              arrows: false,
              initialSlide: rtl==="en"?0:2,
              responsive: [
                  {
                      breakpoint: 768,
                      settings: {
                          slidesToShow: 2,
                          slidesToScroll: 1,
                          infinite: true,
                          initialSlide: rtl==="en"?0:3,
                          dots: false
                      }
                  }
              ]
          };
  </code></pre>
  
  <p>Below is the sample HTML structure in a loop :</p>
  
  <pre><code>&lt;Slider className="mx-4" {...settings} ref={c =&gt; (this.slider = c)}&gt;
  &lt;div class="rtl product-item" tabindex="-1" style="width: 100%; display: inline-block;"&gt;
  &lt;div class="product-shop-top"&gt;
  &lt;a href="#"&gt;&lt;img src="" alt="" class="product-img"&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="product-item-details"&gt;
  &lt;h5&gt;&lt;a href="#"&gt;Product Name&lt;/a&gt;&lt;/h5&gt;
  &lt;div class="price-wrapper"&gt;
  &lt;div class="price-box"&gt;&lt;span class="special-price"&gt;65&lt;/span&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="buynow-block asas"&gt;&lt;button type="button" title="Add to Cart" class="action tocart primary"&gt; &lt;/button&gt;&lt;a class="towishlist"&gt;Add to Wishlist&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/Slider&gt;
  </code></pre>
  
  <p>Note: Attaching the image to show the result. <a href="https://i.stack.imgur.com/dHPNc.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dHPNc.jpg" alt="enter image description here"></a></p>
  
  <p>I want 2 columns in a row for responsive slick slider.</p>