javascript - 将 Slick 旋转木马导航箭头与幻灯片图像而不是其下方的文本垂直对齐

Question

无论窗口宽度是多少，我都需要将导航箭头与幻灯片图像垂直对齐。目前，它占整个幻灯片的 50%。我希望能够用 CSS 做到这一点，但似乎它可能需要用 JavaScript 来完成。如果是这样的话，jQuery 没问题，它只需要支持现代浏览器 (IE 11+)。

关于此的棘手部分是它需要占图像的 50% 而不是整个容器，因为图像下方的文本可以有不同的高度。

目前正在做什么:

我需要它做什么:(注意导航箭头与图像垂直居中，无论窗口宽度如何)

这是一个 JSFiddle:https://jsfiddle.net/thebluehorse/2wuq3feb/5/

<div class="container">
  <div class="list clearfix">
    <div class="slide">
      <img src="http://placehold.it/800x350">

      <ul>
        <li>Ut in integer pulvinar maiores, mi sapien litora nunc ut, neque netus in ac. Et nullam, donec sapien laoreet, ullamcorper vestibulum et sed at arcu, erat scelerisque vehicula justo nam malesuada vehicula, per nibh nibh elit justo. Tempus omnis, mattis taciti cras a.</li>
      </ul>
    </div>

    <div class="slide">
      <img src="http://placehold.it/800x350">
      <ul>
        <li>Lorem ipsum dolor sit amet, et hymenaeos elit orci, rutrum dolor magna pellentesque ante euismod magna, sodales turpis quos class condimentum. Integer in vel etiam. Etiam pellentesque nibh phasellus sed, eget ipsum enim sed in et at, non ligula quis egestas sed quis. Lectus vitae, lobortis vestibulum maecenas auctor lorem eros, luctus vitae aliquam aliquam ipsum ligula nascetur, habitasse eu lectus imperdiet leo. Ut est fusce class conubia nunc felis, proin aliquam vitae nunc accumsan orci. A eu erat in.</li>
        <li>Ut in integer pulvinar maiores, mi sapien litora nunc ut, neque netus in ac. Et nullam, donec sapien laoreet, ullamcorper vestibulum et sed at arcu, erat scelerisque vehicula justo nam malesuada vehicula, per nibh nibh elit justo. Tempus omnis, mattis taciti cras a.</li>
      </ul>
    </div>

<div class="slide">
      <img src="http://placehold.it/800x350">
      <ul>
        <li>Ut in integer pulvinar maiores, mi sapien litora nunc ut, neque netus in ac. Et nullam, donec sapien laoreet, ullamcorper vestibulum et sed at arcu, erat scelerisque vehicula justo nam malesuada vehicula, per nibh nibh elit justo. Tempus omnis, mattis taciti cras a.</li>
      </ul>
    </div>
  </div>
</div>

<style>
.container {
  position: relative;
  width: 80%;
  margin: auto;
}

.slide {
  float: left;
  height: 100%;
  min-height: 1px;
}

img {
  width: 100%;
  display: block;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

body {
  background-color: #aaa;
}
</style>

<script>
$('.list').slick({
  dots: true,
  infinite: true,
  speed: 300,
  slidesToShow: 1,
  adaptiveHeight: true
});
</script>

Answer 1

那么，使用 2 个轮播怎么样？一个用于图像，带有箭头，另一个用于没有箭头的流动内容。这是我能想到的最干净的解决方案:https://jsfiddle.net/mq9avx5g/2/

它利用 slick 的 asNavFor 使两个轮播作为一个:

$('#list_above').slick({
  infinite: true,
  speed: 300,
  slidesToShow: 1,
  adaptiveHeight: true,
  dots: false,
  asNavFor: '#list_below',
});

$('#list_below').slick({
    dots: true,
  arrows: false,
  slidesToShow: 1,
  asNavFor: '#list_above',
  adaptiveHeight: true,
});