javascript - Fotorama 4 禁用箭头

Question

我需要有关 fotorama 4 的帮助。我想禁用导航箭头

data-arrow="false" data-arrows="false" $('#my-fotorama').fotorama({arrows: 'false'}); $('#my-fotorama').fotorama({arrows: 'null'}); 不工作。

Answer 1

如果您使用最新版本（目前为 Fotorama 4.5.2），现在有一个内置选项：

箭头- true / false / 'always'

$(".fotorama").fotorama({ arrows: false });

Answer 2

首先你应该下载未压缩的版本，然后，添加一些更改......

我添加了一个选项：

 arrows: true // default option, could be false, too =>2636. line of code...

而且，setOptions 函数的一些小变化：

function setOptions () {
    o_fade = opts.transition === 'crossfade' || opts.transition === 'dissolve';

    o_loop = opts.loop && (size > 2 || o_fade);

    var classes = {add: [], remove: []};

    if (size > 1) {
      o_nav = opts.nav;
      o_navTop = opts.navPosition === 'top';
      classes.remove.push(selectClass);
if(opts.arrows) {
      $arrs.show();
}

else {
     $arrs.hide();
}
      arrsUpdate();
    } else {
      o_nav = false;

      $arrs.hide();
    }

现在您可以直接在 html 中设置箭头选项（显示/隐藏），如下所示：

<div class="fotorama" data-arrows="false">

完整、更新的代码： http: //pastebin.com/zg4yJCCb

Answer 3

嗯...我推荐一种 CSS 方法：

.fotorama__arr {
  display: none !important;
}

在您的样式中添加这个，而不是fotorama.css.

另外我不建议更改fotorama.js. 但是，当然，如果您不关心将来的升级，您可以这样做。