Tiny Slider - 字体真棒控制按钮

Question

我想在 Tiny Slider 插件上的上一个和下一个按钮上使用 font-awesome，而不是文本或图像。

我尝试了以下方法，但没有用：

<div id="controls">
  <!--<button class="previous">Prev</button>-->
  <i class="fas fa-chevron-left previous"></i>
</div>

<div class="slider">
  <article>
    <img src="1.jpg" />
  </article>
  <article>
    <img src="2.jpg" />
  </article>  
</div>

<script type="module">
  var slider = tns({
    container: '.slider',
      controlsContainer: '#controls',
      prevButton: '.previous',
  });
</script>

如何使用 font-awesome 而不是文本或图像来实现此功能？

Answer 1

我猜您仍然需要一个实际的按钮才能使控件正常工作。不要删除整个按钮，只需将文本“Prev”替换为您的图标 html。然后根据您的需要使用 css 格式化结果按钮。

Answer 2

你是不是就这样试过了:

<div id="controls">
  <button class="previous"><i class="fas fa-chevron-left"></i></button>
</div>

Tiny Slider - 字体真棒控制按钮

Tiny Slider - Font Awesome control buttons

html

css

tiny-slider