Как выровнять скользящий слайдер непосредственно над нижним элементом в моем контейнере?

Question

Я использую скользящий слайдер https://kenwheeler.github.io/slick/. Я хочу выровнять ползунок прямо над текстом в нижней части моего контейнера. Результат должен выглядеть следующим образом>

Ниже приведен фрагмент того, что у меня пока работает.

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>

Ниже показано, как я пытался заставить его работать. Я попытался выровнять его так же, как выровнял текст, используя класс .push_to_bottom. Но это дает мне странные результаты.

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

Я надеюсь, что это то, что вы хотите. Я использую flexbox и предлагаю вам как можно больше избегать абсолютного позиционирования.

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>