0

I was using a bootstrap carousel for my website when I realized that you could use other buttons for the carousel navigation(other buttons than the default ones of course).

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Does anyone know how to change the navigation buttons in this carousel. Thanks in advance !!

buzz
  • 171
  • 1
  • 3
  • 13
Muhammad Abdullah
  • 168
  • 1
  • 11
  • Does this answer your question? [change-bootstrap-4-carousel-control-colors](https://stackoverflow.com/questions/49391266/change-bootstrap-4-carousel-control-colors) – yinsweet Jun 12 '20 at 15:55
  • @yinsweet no it doesn't. I want to change the arrow images that are used to navigate through the carousel. – Muhammad Abdullah Jun 12 '20 at 17:32

1 Answers1

0

A dirty hack would be to override the carousel-control-prev-icon and carousel-control-next-icon classes.

See pen - https://codepen.io/buzztnt/pen/WNrjvbM

buzz
  • 171
  • 1
  • 3
  • 13