如何将光滑的滑块直接对准容器中底部元素的上方？

Question

我正在使用光滑的滑块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 >

下面是我目前可用的部分片段。

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>

以下是我尝试使其工作的方法。我尝试以与使用 class .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>

如何将光滑的滑块直接对准容器中底部元素的上方？

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

html

javascript

css

jquery

slick.js