Question

我如何在圆点ul列表中附加圆箭头？我想要这样的结果：

我的jQuery代码

$(".my-slider").slick({
  arrows: true,
  pauseOnDotsHover: true,
  accessibility: true,
  responsive: [{
    arrows: false,
    breakpoint: 1024,
    nextArrow: $('.slick-dots .next'),
    prevArrow: $('.slick-dots .previous')
  }]
});
$("<li class='next'></li>").prependTo(".slick-dots");
$("<li class='previous'></li>").appendTo(".slick-dots");

我的HTML结果

<ul class="slick-dots" role="tablist" style="display: block;">
  <li class='next'></li>
  <li class="slick-active"><button type="button" role="tab" id="slick-slide-control00" aria-controls="slick-slide00" aria-label="1 of 5" tabindex="0" aria-selected="true">1</button></li>
  <li><button type="button" id="slick-slide-control01">2</button></li>
  <li><button type="button" id="slick-slide-control02">3</button></li>
  <li><button type="button" id="slick-slide-control03">4</button></li>
  <li><button type="button" id="slick-slide-control04">5</button></li>
  <li class='previous'></li>
</ul>

我想要的结果

<ul class="slick-dots" role="tablist" style="display: block;">
  <li><button class="slick-prev slick-arrow" aria-label="Previous" type="button" style="display: block;">Previous</button></li>
  <li class="slick-active"><button type="button" role="tab" id="slick-slide-control00" aria-controls="slick-slide00" aria-label="1 of 5" tabindex="0" aria-selected="true">1</button></li>
  <li><button type="button" id="slick-slide-control01">2</button></li>
  <li><button type="button" id="slick-slide-control02">3</button></li>
  <li><button type="button" id="slick-slide-control03">4</button></li>
  <li><button type="button" id="slick-slide-control04">5</button></li>
  <li><button class="slick-next slick-arrow" aria-label="Next" type="button" style="display: block;">Next</button></li>
</ul>

Answer 1

我发现使用slick可以使用自己的类名创建自己的div。

HTML

<div class="slider-controls">
 <button type="button" class="slide-m-prev">prev</button>
 <div class="slide-m-dots"></div>
 <button type="button" class="slide-m-next">next</button>
</div>

然后您可以在slick函数中调用这些类。

JS

$(".slides").slick({
      dots: true,
      arrows: true,
      appendDots: $(".slide-m-dots"),
      prevArrow: $(".slide-m-prev"),
      nextArrow: $(".slide-m-next")
    });

Answer 2

看起来您正在使用基于Jquery的库，并且不确定何时添加此HTML，但是假设您是在页面加载时执行此操作（如果您需要在用户调用函数slick（），在回调函数中添加/添加），您就快到了。代替添加<li class='next'></li>，而是按如下所示添加整个内容：

$('<li><button class="slick-prev slick-arrow" aria-label="Previous" type="button" style="display: block;">Previous</button></li>').prependTo('.slick-dots');

或不同的语法，结果相同：

$('.slick-dots').prepend('<li><button class="slick-prev slick-arrow" aria-label="Previous" type="button" style="display: block;">Previous</button></li>');

但是为什么不修改HTML而不是使用脚本呢？

如何在圆点列表内附加圆滑箭头？

2 个答案: