Why it’s tricky?

Unfortunately the library pgwslideshow doesn’t offer a very fine control. All you can do is initialize the gallery giving a selector pointing at a <ul> element having some given requirements.

There are no events to intercept when the current picture changed so you are forced to check which is the image currently shown only when the link is actually clicked.

And there’s no way to inject html to build the caption if not just the plain text content in the data-description attribute. So that also won’t be a way to inject the download link.

Proposed solution (…and fallacies)

You could do it on your own since the carousel has a clear structure and for example the caption element has class ps-caption but it’s a weak strategy because anyway some carousel elements are positioned absolute and it’s annoying to fit some other stuff in there plus those elements are in control of the library that could mess up with our plans. I’m not saying it won’t be a good path, it’s probably the best entry point to deliver the best result. But it would take some effort going too far from the point here.

So here I used your same approach: adding a div element inside the <ul> at the very beginning. It’s not valid html of course since a list should only contain list items. Anyway to adapt to how the pgwslideshow works, it could be a place to put the element with the DOWNLOAD button for the sake of showing here how you could download the correct file corresponding to the currently shown picture.

It’s worth saying that the only reason you are seeing that download link there between the big picture and the list of thumbnails, it’s because it happens to be sitting just under where the absolute positioned big picture is ending. So it’s actually an invalid approach but it seems to work because it’s the first list item before the others following but yet it’s not a <li> so it won’t be affected by the styles.

The key

The key is having a static element defined in advance to contain a general link. Of course you can’t make list of links like you did in your example because you have no way to show only the current picture in the gallery.

That’s the anchor element we decided to put at the beginning of our <ul> list inside a div with class download. I tried to use valid html wrapping it inside a li but it messed up with the gallery.

Then you can add a click event handler to that unique link, that will query the gallery to know what’s the currently shown picture and use that index to find what’s the url where the browser should be redirected.

The url where the anchor point at, it’s mapped by the <img> data attribute like this: data-archive-src="https://host/to/squirrel.zip"

Once the url is known, the strategy to trigger the actual download, is creating an anchor element from scratch with the correct download attribute and trigger its click event before removing it from the dom like it never existed.

References:

• https://pgwjs.com/pgwslideshow/

  getCurrentSlide – Returns the current image number.
  pgwSlideshow.getCurrentSlide();

• And here I found the cdn urls for the assets:

  https://www.webjs.net/en/p/pgwslideshow—responsive-slideshow-gallery-carousel-for-jquery-zepto-826.html

• SO / Download file using javascript

  Download File Using JavaScript/jQuery

var animalsCarousel;

$(document).ready(function() {
  animalsCarousel = $('#pgwContainer').pgwSlideshow();
  $('.download > a').on('click', () => {
    downloadCurrent();
  });
});

function downloadCurrent() {
  const i = animalsCarousel.getCurrentSlide();
  const url = $(`#pgwContainer li:nth-child(${i+1}) img`).data('archive-src');
  console.log(url);
  triggerBrowserDownload(url);
}

function triggerBrowserDownload(url, filename){

  if(!filename) filename = url.split('/').pop();
  
  console.log(`Downloading ${url}...`);
 
  var templink = document.createElement("a");
  templink.setAttribute('download', filename);
  templink.href = url;
  document.body.appendChild(templink);
  templink.click();
  templink.remove();
}

#pgwContainer {
  width: 100% !important;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#pgwContainer>li {
  float: none !important;
}

.download {
  display: block;
  outline: solid 3px red;
  flex-grow: 1;
  margin-top: 10px;
  padding: .2em 1em;
  font-size: 2rem;
  text-align: center;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src='https://cdn.rawgit.com/Pagawa/PgwSlideshow/master/pgwslideshow.min.js'></script>

<link rel='stylesheet' href='https://cdn.rawgit.com/Pagawa/PgwSlideshow/master/pgwslideshow.min.css'>

<ul id="pgwContainer" class="pgwSlideshow">

  <!-- This is technically invalid in terms of HTML5 spe-->
  <div class="download">
    <a href="#">Download Picture</a>
  </div>

  <li>
    <img
      src="https://iili.io/HuycWGV.jpg"
      alt="Squirrel"
      data-description="The squirrel is a rodent..."
      data-large-src="https://iili.io/Huycwa1.jpg"
      data-archive-src="https://host/to/squirrel.zip">
  </li>
  <li>
    <img
      src="https://iili.io/HuycX6B.jpg"
      alt="Fox"
      data-description="The fox is a very smart predator..."
      data-large-src="https://iili.io/Huycj3P.jpg"
      data-archive-src="https://host/to/fox.zip">
  </li>
  <li>
    <img
      src="https://iili.io/HuycN8F.jpg"
      alt="Lion"
      data-description="The lion is a big predator living..."
      data-large-src="https://iili.io/HuycOyg.jpg"
      data-archive-src="https://host/to/lion.zip">
  </li>
</ul>