Question

我正在使用Slick进行幻灯片放映，我需要箭头里面幻灯片内容，因此我可以相对于幻灯片内容而不是外部容器定位它们。我为此使用appendArrows选项，但随后箭头会多次附加，导航不再起作用（在this question中也有提及）。我需要箭头左右显示链接（标题和链接文本当然可以有任意长度）。有没有办法实现这个目标？

JS：

$('.product-slideshow').slick({
  appendArrows: '.slider-nav'
});

HTML：

<div class="product-slideshow">
  <div class="slide">
    <div class="content-wrapper">
      <h2 class="text-xxl text-centered">Produkt 1</h2>
      <div class="slider-nav text-centered">
        <a href="#product-1">zum Produkt</a>
      </div>
      <img src="/inc/images/product-1.jpg" alt="Beschreibung Produkt 1" />
    </div>
  </div>
  <div class="slide">
    <div class="content-wrapper">
      <h2 class="text-xxl text-centered">Produkt 2</h2>
      <div class="slider-nav text-centered">
        <a href="#product-2">zum Produkt</a>
      </div>
      <img src="/inc/images/product-2.jpg" alt="Beschreibung Produkt 2" />
    </div>
  </div>
</div>

Answer 1

是的，你可以简单地添加你想用作箭头的html元素，然后选择它们作为上一个或下一个箭头。

$('.product-slideshow').slick({
    prevArrow: $('.prev-slide'),
    nextArrow: $('.next-slide'),
});

在这个例子中，你可以有一个html元素，其中.prev-slide类用于后箭头，而一个元素的类为.next-slide用于前箭头。

Answer 2

对于您的个人项目，您可以使用appendArrows选项非常简单地完成此操作：

$(".slider").slick({  
    appendArrows: ".container"
});

在幻灯片内容中添加光滑箭头

2 个答案: