How do I align slick slider directly above the bottom element in my container?

Question

I'm using slick slider https://kenwheeler.github.io/slick/ . I want to align the slider directly above the text at the bottom of my container. The result should look like this >

Below is a snippet of what I have so far that is working.

 jQuery(document).ready(function($) { $('.slider').slick({ speed: 500, slidesToShow: 3, slidesToScroll: 1 }); });

 html, body { background: #102131; color: white; }.container { position: relative; height: 400px; }.push_to_bottom { position: absolute; left: 50%; bottom: 0px; -webkit-transform: translateX(-50%); transform: translateX(-50%); }.slick-slider { background: #3a8999; font-size: 30px; text-align: center; }

 <link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" rel="stylesheet"/> <link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <div class="container"> <div class="slider" data-slick='{"arrows": true'}> <div>slide 1</div> <div>slide 2</div> <div>slide 3</div> <div>slide 4</div> <div>slide 5</div> </div> <div class="push_to_bottom"> <h1>Some text</h1> </div> </div>

Below is how i tried to make it work. I tried to align it the same way as i aligned the text using the class.push_to_bottom. But it's giving me some weird results.

 jQuery(document).ready(function($) { $('.slider').slick({ speed: 500, slidesToShow: 3, slidesToScroll: 1 }); });

 html, body { background: #102131; color: white; }.container { position: relative; height: 400px; }.push_to_bottom { position: absolute; left: 50%; bottom: 0px; -webkit-transform: translateX(-50%); transform: translateX(-50%); }.slick-slider { background: #3a8999; font-size: 30px; text-align: center; }

 <link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" rel="stylesheet"/> <link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <div class="container"> <div class="push_to_bottom"> <div class="slider" data-slick='{"arrows": true'}> <div>slide 1</div> <div>slide 2</div> <div>slide 3</div> <div>slide 4</div> <div>slide 5</div> </div> </div> <div class="push_to_bottom"> <h1>Some text</h1> </div> </div>

Answer 1

I hope this is something that you want. I am using flexbox and I suggest you avoid absolute positioning as much as you can.

 jQuery(document).ready(function($) { $('.slider').slick({ speed: 500, slidesToShow: 3 }); });

 html, body { background: #102131; color: white; }.container { position: relative; height: 400px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }.push_to_bottom { }.slick-slider { background: #3a8999; font-size: 30px; text-align: center; width: 90% }

 <link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" rel="stylesheet"/> <link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <div class="container"> <div class="slider" data-slick="{'arrows': true}"> <div>slide 1</div> <div>slide 2</div> <div>slide 3</div> <div>slide 4</div> <div>slide 5</div> </div> <div class="push_to_bottom"> <h1>Some text</h1> </div> </div>