There are situations when you need a very simple image gallery which showcases your images on click previous and next links. Following is a simple code written in HTML, CSS and jQuery to achieve this goal.

Demo

HTML

Lets start with the simple HTML code. I am using sample images from lorempixel to display how it works.

The image gallery and the nav elements are both wrapped in the gallery wrapper. The images are contained in the div with id gallery and each image is in the div of class image. It is a pretty simple setup.

<div id="gallery-wrapper">
<div id="gallery">
<div class="image"><img src="http://placehold.it/350x150"></div>
<div class="image"><img src="http://lorempixel.com/350/150/"></div>
<div class="image"><img src="http://lorempixel.com/350/150/sports/"></div>
<div class="image"><img src="http://lorempixel.com/350/150/sports/1/Dummy-Text/"></div>
</div>

<div id="nav">
  <div id="previous"><img src="http://vivekarora.com/images/il.png"></div>
  <div id="next"><img src="http://vivekarora.com/images/ir.png"></div>
</div>
</div>

<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

CSS

jQuery

That is it. I will be making improvements to this image gallery to make it play automatically. So, stay tuned.