Plugin - Fotorama carousel

Question

<!--HTML PHP use-->
<div class="fotorama" data-autoplay="false">
  <div data-img="<?php echo $issue_img_1 ?>" data-caption="<?php echo $issue_text_1 ?>" >
  <?php /*****<a href='<?php echo $issue_link_1 ?>' target='_blank'></a> 
  <span class="caption-element"><?php echo $main_text_1 ?></span>/****/?>
  </div>
  
  <div data-img="<?php echo $issue_img_2 ?>" data-caption="<?php echo $issue_text_2 ?>" > 
  </div>

  <div data-img="<?php echo $issue_img_3 ?>" data-caption="<?php echo $issue_text_3 ?>" > 
  </div>
  <div data-img="<?php echo $issue_img_4 ?>" data-caption="<?php echo $issue_text_4 ?>" > 
  </div>
  <div data-img="<?php echo $issue_img_5 ?>" data-caption="<?php echo $issue_text_5 ?>" > 
  </div>
  <div data-img="<?php echo $issue_img_6 ?>" data-caption="<?php echo $issue_text_6 ?>" > 
  </div>
  <div data-img="<?php echo $issue_img_7 ?>" data-caption="<?php echo $issue_text_7 ?>" > 
  </div>
</div>

 

Answer 1

<!--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">