将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>

- Cofey

Answer 1

那么，使用两个旋转木马怎么样？一个用于带有箭头的图像，另一个用于没有箭头的流动内容。这是我能想到的最干净的解决方案：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,
});

- AVAVT

Answer 2

你可以使用 JQuery 在图像中间设置以下箭头键的方式。

$(window).on('load resize', function () {
 changepos();
});

function changepos() {
  var toppos = ($('.slick-active').find("img").height()/2);
  $('.slick-arrow').css('top',toppos+'px');
}

$('.list').slick({
  dots: true,
  infinite: true,
  speed: 300,
  slidesToShow: 1,
  adaptiveHeight: true
}).on('afterChange',function(event){
  var toppos = ($('.slick-active').find("img").height()/2);
  $('.slick-arrow').css('top',toppos+'px');
}).trigger('afterChange');

可运行示例

- ketan

Answer 3

覆盖CSS规则，以此方式定位两个箭头：

body .slick-next, body .slick-prev{
  top: 40%;
}

结果: jsfiddle

- silviagreen

---

尝试更改幻灯片并注意箭头由于额外的内容而向下移动页面。 :( - Cofey

如果图像高度不会发生变化，您可以使用固定大小（top: 145px;)来解决此问题。 - silviagreen

Answer 4

我已经更新了JS Fiddle，解决了即使每个幻灯片上的图像高度不同，箭头始终与图像垂直居中的问题。

function fixVerticalArrows(){
    var h = ($('.slick-active').find("img").height()/2);
    $('.slick-arrow').css('top',h+'px');
}
$(document).ready(function(){
  $('.list').slick({
    dots: true,
    infinite: true,
    speed: 300,
    slidesToShow: 1,
    adaptiveHeight: true
  }).on('afterChange',function(event){
    fixVerticalArrows();
  }).trigger('afterChange');
  $(window).resize(function(){
    fixVerticalArrows();
  })
});

这里有一个可工作的JSFiddle

- Nadeem Manzoor

---

谢谢Nadeem。我注意到一个问题，如果窗口大小调整（或方向改变），箭头不在正确的位置。有什么想法如何解决？ - Cofey

我已经更新了jsfiddle，修复了问题，在窗口大小调整时，我们会调用修复函数进行重新计算。 - Nadeem Manzoor

Answer 5

你所需要做的就是覆盖 .slick-prev 和 .slick-next 上的 top:%50 属性。

.slick-prev {
  top:100px;
}
.slick-next {
  top:100px;
}

查看fiddle。

- Tim Mullen

Answer 6

$('.list').slick({
    dots: true,
    infinite: true,
    speed: 300,
    slidesToShow: 1,
    adaptiveHeight: true
}).on('setPosition',function(event){
    var img = $(event.currentTarget).find('.slick-active img');
    var toppos = img.height()/2;
    toppos-=$(event.currentTarget).find('.slick-arrow').height()/2;
    $(event.currentTarget).find('.slick-arrow').css('top',toppos + 'px');
}).trigger('afterChange');

- pabicz