Fotorama 4 disable arrow

Question

I need help with fotorama 4. I want to disable the nav arrows

data-arrow="false" data-arrows="false" $('#my-fotorama').fotorama({arrows: 'false'}); $('#my-fotorama').fotorama({arrows: 'null'}); not working.

Answer 1

First you should download uncompressed version, and then, add few changes...

I have added one option:

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

And, few small changes in setOptions function:

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

now you can set arrows options (show/hide) directly in html, like this:

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

complete, updated code: http://pastebin.com/zg4yJCCb

Answer 2

If you use the recent version (Fotorama 4.5.2 at the moment), there is now a built-in option for that:

arrows - true / false / 'always'

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

Answer 3

Hmm... I recommend a CSS approach:

.fotorama__arr {
  display: none !important;
}

Add this somewhere in your styles, not fotorama.css.

Also I do not recommend to change the fotorama.js. But, of course, you can do it if you don’t care about upgrades in the future.