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来建议我自己的解决方案。请参阅此演示：

＆＃13;

$(".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'
});

＆＃13;

img {
  width: 100%;
}

.mgu-basic-slider .slick-next{
  right: 0;
  z-index: 1;
}

.mgu-basic-slider .slick-prev{
  left: 0;
  z-index: 1;
}

＆＃13;

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

＆＃13;

此代码段中的CSS仅用于演示目的，主要的不是使用1个滑块，而是使用Slick的asNavFor功能将它们分成2个不同的滑块，这些滑块彼此同步。通过这种方式，您可以继续使用Slick，而不必诉诸某种“黑客”。

Answer 2

您必须更改CSS中箭头的位置，它应位于slick-theme.css文件中CSS之后：

.slick-prev, .slick-next {
  font-size: 0;
  line-height: 0;
  position: absolute;
  top: 50%; /* update the value from here as per your requirement */
  display: block;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  padding: 0;
  cursor: pointer;
  color: transparent;
  border: none;
  outline: none;
  background: transparent;
}

Answer 3

如果图像的容器总是与卡中的高度相同，则可以手动设置top和.slick-next btns的slick-prev css属性。例如，就像在这个例子中一样：

HTML：

 <div class="mgu-basic-slider">
    <div>
        <div class="img-wrapper">
            <img src="images/complianceMod.jpg" alt="">
        </div>
        <div class="text-wrapper">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum earum, blanditiis totam similique natus, amet. Reprehenderit dolores vero, repudiandae blanditiis, assumenda dignissimos consectetur a voluptate libero consequatur enim. Commodi, enim.
            </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum earum, blanditiis totam similique natus, amet. Reprehenderit dolores vero, repudiandae blanditiis, assumenda dignissimos consectetur a voluptate libero consequatur enim. Commodi, enim.
            </p>
        </div>
    </div>
    <div>
        <div class="img-wrapper">
            <img src="images/example-608web_w608.jpg" alt="">
        </div>
        <div class="text-wrapper">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
        </div>
    </div>
    <div>
        <div class="img-wrapper">
            <img src="images/examples-of-pestle-analysis.jpg" alt="">
        </div>
        <div class="text-wrapper">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt distinctio, earum enim suscipit veniam? Ab eaque molestiae, repellendus </p>
        </div>
    </div>
    <div>
        <div class="img-wrapper">
            <img src="images/Optimal-solution_conceptual.jpg" alt="">
        </div>
        <div class="text-wrapper">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, corporis! Consectetur eum porro quasi cumque deserunt modi, sint voluptatibus reiciendis nisi voluptatem minus id quibusdam voluptate officiis blanditiis nam consequatur.</p>
        </div>
    </div>
</div>

CSS：

.mgu-basic-slider {
    width: 400px;
    margin: 0 auto;

    .slick-slide {
        .img-wrapper {
            height: 300px;
            img {
                width: 100%;
                height: 100%;
            }
        }
    }

    .slick-next, .slick-prev{
        top: 150px;
        z-index: 9999;
        &:before {
            color: #cecece;
            font-size: 30px;
        }
    }

    .slick-next {
        right: 25px;
    }

    .slick-prev {
        left: 25px;
    }
}

JS：

$(".mgu-basic-slider").slick({
        dots:false,
        adaptiveHeight: true,
        arrows : true,
        infinite: true,
        slidesToShow: 1,
        slidesToScroll: 1
    });

如果不是你的情况并且你不希望所有图像的高度始终相同，你可以使用光滑事件和一些jquery代码动态计算这个top属性，如：

JS：

$('.mgu-basic-slider').on('afterChange', function(event, slick, direction){
          var imgHeight = $('.mgu-basic-slider .slick-current .img-wrapper').height();
          console.log('imgHeight', imgHeight);
          var top = imgHeight / 2;

          console.log('top', top);
          $('.mgu-basic-slider .slick-next').css('top', top+'px');
          $('.mgu-basic-slider .slick-prev').css('top', top+'px');
        });


          var imgHeight = $('.mgu-basic-slider .slick-current .img-wrapper').height();
          console.log('imgHeight', imgHeight);
          var top = imgHeight / 2;

          console.log('top', top);
          $('.mgu-basic-slider .slick-next').css('top', top+'px');
          $('.mgu-basic-slider .slick-prev').css('top', top+'px');

我希望这个idae可以帮助你

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

HTML：

JS：

3 个答案: