<!--Setup with CDN sources-->
<!-- 1. Link to jQuery (1.8 or later), -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- 33 KB -->
<!-- fotorama.css & fotorama.js. -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet"> <!-- 3 KB -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script> <!-- 16 KB -->
// Setup with NPM
yarn add fotorama
npm i --save fotorama
<!--HTML Usage-->
<div class="fotorama" data-auto="false" data-transition="crossfade" data-shuffle="true" data-nav="thumbs">
<img src="http://s.fotorama.io/1.jpg">
<img src="http://s.fotorama.io/2.jpg">
</div>
// JS Settings
$('.fotorama').fotorama({
width: '100%',
maxheight: '75%',
ratio: 4 / 3,
ratio: 16/9,
nav: 'thumbs',
fit: 'cover',
glimpse: '15%',
arrows: 'always',
thumbheight: 60,
thumbwidth:80,
thumbmargin: 4,
thumbborderwidth: 0,
thumbmargin: 20,
loop: 'true',
margin: 10,
allowfullscreen: true,
click: false
});
<!--HTML setting-->
<div id="nl-slider" class="fotorama" data-auto="false" data-transition="crossfade">