title: Slick Slider: align slide width to Bootstrap container width
body: <p>I'm using the slick slider (<a href="http://kenwheeler.github.io/slick/" rel="nofollow noreferrer">http://kenwheeler.github.io/slick/</a>) to display 3 slides side by side. The slides are centered and the active slides shows in the middle.</p>
  
  <p>The website is based on Bootstrap 4. I now want the slides in the same width as the Boostrap container. So the active (centered) slide will be perfectly aligned with the other container elements of the site. The left and right slides should grow to the sides.</p>
  
  <p>To be clear: he slider should have the full width. So that the left/right slides can grow to the end of the screen. Only the active slide should be aligned with the container DIV.</p>
  
  <p><strong>Here's an example for what I need/want: <a href="https://codepen.io/cray_code/pen/BXzxgP" rel="nofollow noreferrer">https://codepen.io/cray_code/pen/BXzxgP</a></strong></p>
  
  <p>And here's my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.slider').slick({
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    centerMode: true,
    enterPadding: '60px',
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="container bg-light py-5 my-5"&gt;
  
    &lt;h1&gt;Container&lt;/h1&gt;
    &lt;h4&gt;The slides should be the same width as the container
      &lt;h4&gt;
  
  &lt;/div&gt;
  
  
  &lt;div class="slider bg-light py-5 my-5"&gt;
    &lt;div class="bg-dark text-white py-5"&gt;
      &lt;h2&gt;Slide 1&lt;/h2&gt;
    &lt;/div&gt;
    &lt;div class="bg-dark text-white py-5"&gt;
      &lt;h2&gt;Slide 2&lt;/h2&gt;
    &lt;/div&gt;
    &lt;div class="bg-dark text-white py-5"&gt;
      &lt;h2&gt;Slide 3&lt;/h2&gt;
    &lt;/div&gt;
    &lt;div class="bg-dark text-white py-5"&gt;
      &lt;h2&gt;Slide 4&lt;/h2&gt;
    &lt;/div&gt;
    &lt;div class="bg-dark text-white py-5"&gt;
      &lt;h2&gt;Slide 5&lt;/h2&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;div class="container bg-light py-5 my-5"&gt;
  
    &lt;h1&gt;Container&lt;/h1&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I tried to give the slides a fixed width for every viewport. But that doesn't work because the slide width is variable.</p>
  
  <p>Is there any other solution for that?</p>