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/

它利用光滑的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,
});

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');

<强> Working Fiddle

Answer 3

覆盖以这种方式定位两个箭头的css规则：

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

结果：jsfiddle

Answer 4

我已经更新了JS小提琴的解决方案，即使每张幻灯片上的图像高度不同，也始终保持箭头与图像中间对齐。

Working JSFiddle here

Answer 5

您需要做的就是覆盖top:%50和.slick-prev上的.slick-next媒体资源。

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

See fiddle

将Slick轮播导航箭头与幻灯片图像垂直对齐，而不是其下方的文本

5 个答案: