Utilizing the slick slider from http://kenwheeler.github.io/slick/ to showcase 3 slides side by side with the center slide displayed in the middle.
This website is built on Bootstrap 4 framework and I want the slides to have the same width as the Bootstrap container. This way, the active (centered) slide will perfectly align with the other elements within the container. The left and right slides should expand to the edges of the screen.
In essence, the slider should occupy the full width so that the left and right slides can stretch to the end of the screen while only the active slide is aligned with the container DIV.
Refer to this example for a visual representation: https://codepen.io/cray_code/pen/BXzxgP
Here's my current code:
$('.slider').slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
centerMode: true,
enterPadding: '60px',
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container bg-light py-5 my-5">
<h1>Container</h1>
<h4>The slides should be the same width as the container
<h4>
</div>
<div class="slider bg-light py-5 my-5">
<div class="bg-dark text-white py-5">
<h2>Slide 1</h2>
</div>
<div class="bg-dark text-white py-5">
<h2>Slide 2</h2>
</div>
<div class="bg-dark text-white py-5">
<h2>Slide 3</h2>
</div>
<div class="bg-dark text-white py-5">
<h2>Slide 4</h2>
</div>
<div class="bg-dark text-white py-5">
<h2>Slide 5</h2>
</div>
</div>
<div class="container bg-light py-5 my-5">
<h1>Container</h1>
</div>I attempted to assign fixed widths to the slides across various viewports, but faced issues due to variable slide widths.
Is there an alternative solution to achieve this?