Is it possible that in Fotorama arrows can change?

Question

I need to change arrows slider of Fotorama library. Is that possible? I read documentation, but can not find anything.

My codes

  <div id="fotorama" class="fotorama" data-width="100%" data-allowfullscreen="native"
                        data-transition="slide" data-arrows="true" data-click="true" data-swipe="true" data-keyboard="true"
                        data-clicktransition="dissolve" data-nav="thumbs" data-autoplay="true">
                        <img
                            src="https://images.unsplash.com/photo-1555636222-cae831e670b3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1477&q=80">
                        <img
                            src="https://images.unsplash.com/photo-1494526585095-c41746248156?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80">
                        <img
                            src="https://images.unsplash.com/photo-1554223818-aef3e2944be2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1474&q=80">
                    </div>

I tried in jquery but did not work

$('#fotorama').fotorama({
 arrowPrev: '<img src="/path-to-image/Previous.png" width="30" height="30" >',
 arrowNext: '<img src="/path-to-image/Next.png" width="30" height="30" >'
});

Answer 1

Do this to set nav images

$(".fotorama__arr--prev").css("background-image", "url(path/to/prev.png)");
$(".fotorama__arr--next").css("background-image", "url(path/to/next.png)");

You can also use jquery when to apply prev & next after fotorama is loaded

$(function () {
  $.when($('#fotorama').fotorama(options)).then(function(){
     $(".fotorama__arr--prev").css("background-image", "url(path/to/prev.png)");
     $(".fotorama__arr--next").css("background-image", "url(path/to/next.png)");
  });
});

Or do it in CSS without jQuery

.fotorama__arr--prev{
  background-image: url(path/to/prev.png) !important;
}
.fotorama__arr--next{
  background-image: url(path/to/next.png) !important;
}