javascript - 如何将光滑 slider 直接对齐到容器中底部元素的上方？

Question

我正在使用光滑的 slider https://kenwheeler.github.io/slick/ 。我想将 slider 直接对齐在容器底部的文本上方。结果应该如下所示 >

下面是我迄今为止所掌握的有效内容的片段。

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>