<div id="links" class="links">
    <a href="https://farm1.static.flickr.com/938/42813532974_9e7c491f8f_b.jpg" title="Puffin" data-gallery="">
        <img src="https://farm1.static.flickr.com/938/42813532974_9e7c491f8f_s.jpg">
    </a>
    <a href="https://farm1.static.flickr.com/854/29656848268_6b4195e2f8_b.jpg" title="Osprey 7_20" data-gallery="">
        <img src="https://farm1.static.flickr.com/854/29656848268_6b4195e2f8_s.jpg">
    </a>
  
   <a href="https://farm1.static.flickr.com/852/28863381917_ba25919b70_b.jpg" title="bee eater" data-gallery="">
     <img src="https://farm1.static.flickr.com/852/28863381917_ba25919b70_s.jpg"></a>
    <a href="https://farm2.static.flickr.com/1772/43802753721_3809c7bb30_b.jpg" title="Desert Nights" data-gallery="">
      <img src="https://farm2.static.flickr.com/1772/43802753721_3809c7bb30_s.jpg"></a>
    <a href="https://farm2.static.flickr.com/1794/28868415067_caf8f1c13d_b.jpg" title="Lavanda Panoramica" data-gallery="">
      <img src="https://farm2.static.flickr.com/1794/28868415067_caf8f1c13d_s.jpg"></a>
    <a href="https://farm1.static.flickr.com/938/29924735128_74779fc320_b.jpg" title="Viceroy Butterfly" data-gallery="">
      <img src="https://farm1.static.flickr.com/938/29924735128_74779fc320_s.jpg"></a>
    <a href="https://farm1.static.flickr.com/930/43807501201_c02bc0019d_b.jpg" title="Tellurium" data-gallery="">
      <img src="https://farm1.static.flickr.com/930/43807501201_c02bc0019d_s.jpg"></a>
    <a href="https://farm1.static.flickr.com/936/42905663835_3fe0c793da_b.jpg" title="Guillemots" data-gallery="">
      <img src="https://farm1.static.flickr.com/936/42905663835_3fe0c793da_s.jpg"></a>
    <a href="https://farm2.static.flickr.com/1820/43756964872_70b64f6a0f_b.jpg" title="Sturnelle des prés / Eastern Meadowlark" data-gallery="">
      <img src="https://farm2.static.flickr.com/1820/43756964872_70b64f6a0f_s.jpg"></a><a href="https://farm1.static.flickr.com/860/41984939910_01f1a8c1ed_b.jpg" title="Emerald Green Ruby" data-gallery="">
  <img src="https://farm1.static.flickr.com/860/41984939910_01f1a8c1ed_s.jpg"></a>
    <a href="https://farm1.static.flickr.com/939/43803451851_09f6493161_b.jpg" title="" data-gallery="">
      <img src="https://farm1.static.flickr.com/939/43803451851_09f6493161_s.jpg"></a>
    <a href="https://farm2.static.flickr.com/1839/29937188458_40a4188447_b.jpg" title="Am AgrippinaUfer" data-gallery="">
      <img src="https://farm2.static.flickr.com/1839/29937188458_40a4188447_s.jpg"></a>
    <a href="https://farm2.static.flickr.com/1818/43798757251_b8bfd2db40_b.jpg" title="Apostroph . . . Semicolon . . ." data-gallery="">
      <img src="https://farm2.static.flickr.com/1818/43798757251_b8bfd2db40_s.jpg"></a>
    <a href="https://farm2.static.flickr.com/1798/43748011402_b236c910b2_b.jpg" title="Summer Sunset" data-gallery="">
      <img src="https://farm2.static.flickr.com/1798/43748011402_b236c910b2_s.jpg"></a>
    <a href="https://farm1.static.flickr.com/853/29928898708_e0b1d18e8b_b.jpg" title="love her from the get-go, pick her up from heathrow" data-gallery="">
      <img src="https://farm1.static.flickr.com/853/29928898708_e0b1d18e8b_s.jpg"></a>
</div>

<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
    <div class="slides"></div>
    <h3 class="title"></h3>
    <a class="prev">‹</a>
    <a class="next">›</a>
    <a class="close">×</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
</div>
.blueimp-gallery > .indicator > li {
  display: inline-block;
  width: 50px;
  height: 50px;
  margin: 6px 3px 0 3px;
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
  border: 1px solid transparent;
  background: #ccc;
  background: rgba(255, 255, 255, 0.25) center no-repeat;
  border-radius: 2px;
  box-shadow: 0 0 2px #000;
  opacity: 0.5;
  cursor: pointer;
}
.blueimp-gallery>.indicator{
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}
document.getElementById('links').onclick = function (event) {
	event = event || window.event;
	var target = event.target || event.srcElement,
			link = target.src ? target.parentNode : target,
			options = { index: link, event: event },
			links = this.getElementsByTagName('a');
	// blueimp.Gallery(links, options);
	var gallery = blueimp.Gallery(
			links,
			{
			index: link, event: event,
			onopen: function () {
					// Callback function executed when the Gallery is initialized.
			},
			onopened: function () {
					// Callback function executed when the Gallery has been initialized
					// and the initialization transition has been completed.
			},
			onslide: function (index, slide) {
					//console.log("onslide:"+index);
					// Callback function executed on slide change.
					var get_index = index+1;
					var get_w = $('.indicator').width();
					var get_item_num = Math.floor(get_w/52)-1;
					 var page_index =  Math.floor(get_index/get_item_num);
					console.log("onslideend:"+get_index+"/"+get_w+"num:"+get_item_num+"page:"+page_index);
					$('.indicator').scrollLeft(page_index*get_w);
			},
			onslideend: function (index, slide) {
					var get_index = index+1;
					var get_w = $('.indicator').width();
					var get_item_num = Math.floor(get_w/52);
					var page_index =  Math.floor(get_index/get_item_num);
					console.log("onslideend:"+get_index+"/"+get_w+"num:"+get_item_num+"page:"+page_index);
					$('.indicator').scrollLeft(page_index*get_w);
					// Callback function executed after the slide change transition.
			},
			onslidecomplete: function (index, slide) {
					// Callback function executed on slide content load.
			},
			onclose: function () {
					// Callback function executed when the Gallery is about to be closed.
			},
			onclosed: function () {
					// Callback function executed when the Gallery has been closed
					// and the closing transition has been completed.
			}
			}
	);
};

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/blueimp-gallery/2.33.0/css/blueimp-gallery.css
  2. https://cdnjs.cloudflare.com/ajax/libs/blueimp-gallery/2.33.0/css/blueimp-gallery-indicator.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/blueimp-gallery/2.33.0/js/blueimp-helper.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/blueimp-gallery/2.33.0/js/blueimp-gallery.min.js
  4. https://cdnjs.cloudflare.com/ajax/libs/blueimp-gallery/2.33.0/js/blueimp-gallery-fullscreen.min.js
  5. https://cdnjs.cloudflare.com/ajax/libs/blueimp-gallery/2.33.0/js/blueimp-gallery-indicator.min.js
  6. https://cdnjs.cloudflare.com/ajax/libs/blueimp-gallery/2.33.0/js/jquery.blueimp-gallery.min.js