Beautiful Automatic Photo Gallery/Slider With jQuery

This is a jQuery/HTML/CSS powered automatic gallery/slider/carousel where the users are able to manually switch between images by clicking the thumbnails in the bottom scroller.

Also provides a fullscreen mode that displays the image slider (without the thumbnail scroller) in a fullscreen modal popup.

How to use it:

1. Add thumbnails together with the slider controls to the webpage.

<section id="content">
  <div id="gallery_img">
    <div id="image"></div>
    <img src="images/icons/left.png" id="lefty">
    <img src="images/icons/right.png" id="righty">
    <img src="images/icons/play.png" id="play">
    <img src="images/icons/pause.png" id="pause">
    <img src="images/icons/expand.png" id="expand">
  </div>
  <div id="thumbs">
    <div class="thumbs_style"> <img src="images/thumbs/a.jpg"> </div>
    <div class="thumbs_style"> <img src="images/thumbs/b.jpg"> </div>
    <div class="thumbs_style"> <img src="images/thumbs/c.jpg"> </div>
    <div class="thumbs_style"> <img src="images/thumbs/d.jpg"> </div>
    <div class="thumbs_style"> <img src="images/thumbs/e.jpg"> </div>
    ...
  </div>
</section>

2. The basic styling of the slider.

#content{ 
  width:845px;
  height:1000px;
  margin:0px auto;
  border-radius:3px;
}

#gallery_img{
  width:845px;
  height:500px;
  float:left;
  position:relative;
}

#lefty{
  width:23px;
  position:absolute;
  top:235px;
  left:10px;
}

#righty{
  width:23px;
  position:absolute;
  top:235px;
  right:10px;
}

#play, #pause{
  width:12px;
  position:absolute;
  top:239px;
  right:40px;
}

#play{
  display:none;
}

#expand{
  width:18px;
  position:absolute;
  top:478px;
  right:6px;
}

#thumbs{  
  height:100px;
  width:845px;
  float:left;
  overflow:auto;
  margin-top:10px;
  white-space:nowrap;
}

.thumbs_style{
  display:inline-block;
}

.thumbs_style img{
  width:105px;
  height:80px;
  border-radius:3px;
  border:3px solid rgba(0,0,0,0.4);
}

.gallery_img_style{
  width:845px;
  height:500px;
  border-radius:3px;
  position:absolute;
}

3. The slider requires the latest jQuery JavaScript library to work.

<script src="https://code.jquery.com/jquery-3.3.1.js" 
        integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" 
        crossorigin="anonymous">
</script>

4. Load the main JavaScript after jQuery. Done.

<script src="js/script.js"></script>

---

This awesome jQuery plugin is developed by tonytenorio. For more Advanced Usages, please check the demo page or visit the official website.