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

Posted 2023-03-05

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

【英文标题】：Vertically align Slick carousel navigation arrows with slide image and not the text beneath it

【发布时间】：2016-06-01 08:16:08

【问题描述】：

无论窗口宽度如何，我都需要将导航箭头与幻灯片图像垂直对齐。目前，它占整个幻灯片的 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>

【参考方案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,
);

【参考方案2】：

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

.slick-prev 
  top:100px;

.slick-next 
  top:100px;

See fiddle.

【参考方案3】：

我已经用解决方案更新了 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();
  )
);

Working JSFiddle here

【讨论】：

谢谢纳迪姆。我注意到的一个问题是，如果窗口调整大小（或方向改变），箭头不在正确的位置。任何想法如何解决？

我已经用修复更新了 jsfiddle，在调整窗口大小时我们调用修复函数重新计算。

【参考方案4】：

您可以使用 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

【参考方案5】：

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

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

结果：jsfiddle

【讨论】：

尝试更改幻灯片并注意箭头如何在页面下方移动，因为附加内容。 :(

如果图片高度不变，可以使用固定尺寸（top: 145px;）解决问题