能否修改Fotorama图库的滑块箭头？已尝试jQuery方法无效

问题描述 #

我需要修改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" >'
});

可行方案 #

方案1：CSS自定义箭头样式 #

Fotorama默认箭头通过伪元素实现，可通过覆盖CSS替换为自定义箭头：

/* 清除默认箭头的文字内容 */
.fotorama__arrow--prev:before,
.fotorama__arrow--next:before {
  content: "";
}

/* 为箭头设置自定义背景图 */
.fotorama__arrow--prev {
  background: url("/path-to-image/Previous.png") center center no-repeat;
  background-size: 30px 30px;
}

.fotorama__arrow--next {
  background: url("/path-to-image/Next.png") center center no-repeat;
  background-size: 30px 30px;
}

/* 可选：调整箭头容器的尺寸，适配自定义图片 */
.fotorama__arrow {
  width: 40px;
  height: 40px;
}

方案2：初始化后修改DOM元素 #

若CSS方法无法满足需求，可在Fotorama初始化完成后替换箭头的HTML结构：

// 监听初始化完成事件，确保DOM已生成
$('#fotorama').on('fotorama:ready', function () {
  // 替换上一页箭头内容
  $('.fotorama__arrow--prev').html('<img src="/path-to-image/Previous.png" width="30" height="30" >');
  // 替换下一页箭头内容
  $('.fotorama__arrow--next').html('<img src="/path-to-image/Next.png" width="30" height="30" >');
});

说明：你之前尝试的配置无效，是因为Fotorama官方并未提供arrowPrev和arrowNext这两个配置参数。

内容的提问来源于stack exchange，提问作者Rahil Ali