css - 光滑，箭头仅以图片高度为中心，而不是图片宽度

Question

我正在使用 Slick-Slider构建 slider 。箭头的位置在图片内。但如果图例太大，箭头会与文本重叠(垂直居中)。我想让箭头仅在图片上方垂直居中。我该如何构建它？

感谢您的帮助/想法!

HTML:

<div class="mgu-basic-slider">
  <div>
    <picture>
      <source srcset="demo-ressoures/16zu9_topf_d.jpg">
      <img src="demo-ressoures/16zu9_topf_d.jpg" alt="xxx">
    </picture>
    <div class="mgu-basic-slider-caption">
      <div class="slick-legend">
        <p>Pfanne mit Deckel, Dampfeinsatz, Gargut, Gewürze Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorpe.</p>
      </div>
      <div class="slick-counter">1/6</div>
      <div class="clear"></div>
    </div>
  </div>
<div>
<picture>
  <source srcset="demo-ressoures/16zu9_topf_d.jpg">
  <img src="demo-ressoures/16zu9_topf_d.jpg" alt="xxx">
</picture>
<div class="mgu-basic-slider-caption">
  <div class="slick-legend">
    <p>Pfanne mit Deckel, Dampfeinsatz, Gargut, Gewürze</p>
  </div>
  <div class="slick-counter">2/6</div>
  <div class="clear"></div>
</div>

JS:

$(".mgu-basic-slider").slick({
  dots:false,
  adaptiveHeight: true,
  arrows : true,
  appendArrows: $('picture')
})

Answer 1

我会在这里建议我自己的解决方案，使用 2 个 slider 而不是 1 个。查看此演示:

$(".mgu-basic-slider-legend").slick({
  dots: false,
  arrows: false,
  adaptiveHeight: true,
  asNavFor: '.mgu-basic-slider'
});
$(".mgu-basic-slider").slick({
  dots: false,
  adaptiveHeight: true,
  arrows: true,
  asNavFor: '.mgu-basic-slider-legend'
});

img {
  width: 100%;
}

.mgu-basic-slider .slick-next{
  right: 0;
  z-index: 1;
}

.mgu-basic-slider .slick-prev{
  left: 0;
  z-index: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet" />
<link href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css" rel="stylesheet" />
<script src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>

<div class="mgu-basic-slider">
  <div>
    <picture>
      <source srcset="http://placehold.it/400x100">
        <img src="http://placehold.it/400x100">
    </picture>
  </div>
  <div>
    <picture>
      <source srcset="http://placehold.it/400x150">
        <img src="http://placehold.it/400x150">
    </picture>
  </div>
  <div>
    <picture>
      <source srcset="http://placehold.it/400x250">
        <img src="http://placehold.it/400x250">
    </picture>
  </div>
</div>

<div class="mgu-basic-slider-legend">
  <div>
    <div class="mgu-basic-slider-caption">
      <div class="slick-legend">
        <p>Pfanne mit Deckel, Dampfeinsatz, Gargut, Gewürze Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
          sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
          Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
          Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorpe.</p>
      </div>
      <div class="slick-counter">1/6</div>
      <div class="clear"></div>
    </div>
  </div>
  <div>
    <div class="mgu-basic-slider-caption">
      <div class="slick-legend">
        <p>Pfanne mit Deckel, Dampfeinsatz, Gargut, Gewürze</p>
      </div>
      <div class="slick-counter">2/6</div>
      <div class="clear"></div>
    </div>
  </div>
  <div>
    <div class="mgu-basic-slider-caption">
      <div class="slick-legend">
        <p>Pfanne mit Deckel, Dampfeinsatz, Gargut, Gewürze</p>
      </div>
      <div class="slick-counter">2/6</div>
      <div class="clear"></div>
    </div>
  </div>
</div>

此代码段中的 CSS 仅用于演示目的，要点是我们没有使用 1 个 slider ，而是将它们分成 2 个不同的 slider ，这些 slider 使用 Slick 的 asNavFor 功能相互同步。通过这种方式，您可以继续按原样使用 Slick，而无需求助于某种“黑客”。