<%~init array photos_loop%>
<%~set index = 0%>
<%~loop 1 .. 20%>
  <%~set image_path = Plugins::UI::retrieve_param("Image_largest_path", $loop_value)%>
  <%~set image_caption = Plugins::UI::retrieve_param('Image_description', $loop_value)%>
  <%~set thumbnail_path = Plugins::UI::retrieve_param("Image_thumbnail_path", $loop_value)%>
  <%~if image_path%>
    <%~init hash image%><%set image.path = $image_path%><%set image.caption = $image_caption%><%set image.thumb = $thumbnail_path%>
    <%~set photos_loop.$index = $image%>
    <%~set index += 1%>
  <%~endif%>
<%~endloop%>
<div class="swiper-container swiper-content" style="position: relative">
  <div class="swiper-wrapper">
    <%~loop photos_loop%>
    <div class="swiper-slide">
      <div class="swiper-holder">
        <img src="<%path%>" class="img-responsive" />
        <div class="index italic right"><%row_num%> of <%photos_loop.length%> photo<%if photos_loop.length > 1%>s<%endif%></div>
        <%~if $photos_loop.length%>
        <div class="slideshow-controller mobile">
          <div class="btn btn-prev">&lt;</div>
          <div class="btn btn-next">&gt;</div>
        </div>
        <%~endif%>
      </div>
      <div class="caption">
        <%caption || ''%>
      </div>
    </div>
    <%~endloop%>
  </div>
</div>

<%~if photos_loop.length%>
<div class="slideshow-controller">
  <div class="btn btn-prev">PREV</div>
  <div class="btn btn-next">NEXT</div>
  <div class="index italic right"><span>1</span> of <%photos_loop.length%> photo<%if photos_loop.length > 1%>s<%endif%></div>
</div>

<div class="swiper-container swiper-nav">
  <div class="swiper-wrapper">
    <%~loop photos_loop%>
    <div class="swiper-slide<%if row_num == 1%> active-nav<%endif%>"><img src="<%thumb%>" width="107" height="80"  /></div>
    <%~endloop%>
  </div>

  <div class="swiper-button-next swiper-button"> &gt; </div>
  <div class="swiper-button-prev swiper-button"> &lt; </div>
</div>
<%~endif%>
<!-- end Slider -->