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

Question

我正在使用Slick-Slider来构建滑块.箭头的位置在里面picture.但是如果图例太大,则箭头与文本重叠(垂直居中).我想让箭头垂直居中于图片上方.我怎么能建立这个？

感谢您的帮助/想法!

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个滑块代替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个滑块,而是使用Slick的asNavFor功能将它们分成2个不同的滑块,这些滑块彼此同步.通过这种方式,您可以继续使用Slick,而无需使用某种"黑客".