Tiny Slider - Font Awesome control buttons

Question

Instead of text or images, I would like to use font-awesome for the previous & next button on the Tiny Slider plugin.

I tried the following which didn't work:

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

How can I get this working using font-awesome instead of text or images?

score 1 · Accepted Answer · answered Jul 20 '21 at 19:52

1

Did you simply tried like that:

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

answered Jul 20 '21 at 19:52

Caner

92
3

Yes, no success unfortunately, blank circle – migu Jul 21 '21 at 09:06
Do you have any playground or a demo link? – Caner Jul 21 '21 at 09:08
1

I got it to work like this. The issue was that font awesome didn't load properly. Now it works with your code. – migu Jul 21 '21 at 16:35

score 0 · Answer 2 · answered Jul 20 '21 at 19:51

0

I'm guessing you'd still need to have an actual button for the controls to work. Instead of removing the entire button, just replace the text "Prev" with your icon html. And then format the resultant button with css as per your needs.

answered Jul 20 '21 at 19:51

Siddharth Bhansali

2,017
2
10
19

Tiny Slider - Font Awesome control buttons

2 Answers2