Fotorama arrows aren't displaying

Question

I've just installed the Fotorama javascript script. However, when I use data-arrows="true" to enable arrows, which is an attribute you can set in it, they do not display at all.

This is the code with the image links removed:

<div class="fotorama" data-nav="thumbs" data-width="200;" 
data-height="200" data-arrows="true" data-click="true">

<img src="Image 1" alt="" width="200" height="200" /> 
<img src="Image 2" alt="" width="200" height="200" /> 
<img src="Image 3" alt="" width="200" height="200" />
</div>

Has anyone who has used Fotorama had this problem? Or can anyone test this and see if it's just me. You can download the script at: http://fotorama.io/

Here's a demo of how it should work: http://fotorama.io/examples/arrows-click-swipe.html

Thank you.

Answer 1

Use jQuery 1.8 or later.

Put fotorama.png and fotorama@2x.png in the same directory with the fotorama.css.

Remove the ; symbol from the data-width attribute.

It should work.

Answer 2

By default to .fotorama__wrap fotorama adds .fotorama__wrap--no-controls.

Change opacity: 0 to 1 in SCSS source

.fotorama__wrap--no-controls {
    .fotorama__arr,
    .fotorama__fullscreen-icon {
      opacity: 1;
      &:focus {opacity: 1}
    }
}