Pure JavaScript Fullscreen Image Gallery With Thumbnail Navigation

Preview:

Description:

A responsive, fullscreen image gallery/viewer with a thumbnail navigation, build using pure JavaScript and CSS. Your users are able to switch between images by click on the next/prev links and/or thumbnail images.

How to use it:

Load the following JavaScript and CSS files in the html document.

<link rel="stylesheet" href="index.css">
<script src="index.js"></script>

Embed your images together with the next and previous navigation links int the document.

<div class="carousel-container">
  <img src="1.jpg" alt="" class="current-image">
  <span class="arrow arrow-left"> Prev </span>
  <ul class="next-list">
    <li><img src="2.jpg" alt="" class="image-of-list current-image-list"></li>
    <li><img src="3.jpg" alt="" class="image-of-list"></li>
    <li><img src="4.jpg" alt="" class="image-of-list"></li>
    <li><img src="5.jpg" alt="" class="image-of-list"></li>
  </ul>
  <span class="arrow arrow-right"> Next </span>
</div>