Fotorama中的箭头有可能改变吗？答案

【问题标题】：Is that possible that in Fotorama arrows can change?Fotorama中的箭头有可能改变吗？
【发布时间】：2022-09-23 22:21:33
【问题描述】：

我需要更改Fotorama 库的箭头滑块。那可能吗？我阅读了文档，但找不到任何东西。

我的代码

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

我在 jquery 中试过但没有用

$(\'#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\" >\'
});

你在 Magento 中实现这个？
@VivekK。没有 Laravel。
我在文档fotorama.io/docs/4/options 中没有看到任何设置箭头 HTML 的选项，您必须使用 CSS 进行更改。

标签： javascript jquery fotorama

【解决方案1】：

执行此操作以设置导航图像

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

也可以使用 jquery when 在 fotorama 加载后应用 prev & next

$(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)");
  });
});

【讨论】：