Image Viewer with Prev and Next Buttons

The “Snapper” is a multi-functional slider plugin for jQuery that allows you to create image viewer with prev and next buttons. All you need to place your images in its HTML structure, then this plugin renders a beautiful image viewer. Besides next & prev buttons, it also comes with dots navigation to jump to other images.

Basically, it is a mobile-friendly image slider plugin to slide images with next and previous buttons. However, you can also use it to create an image viewer or slideshow. It also can be used to create an image slider with thumbnails navigation. But, in this tutorial, we’ll focus to create an image viewer through it. So, let’s begin the coding.

How to Create Image Viewer with Prev & Next Buttons

First of all download this image viewer project in order to create an image viewer using the “Snapper” JS plugin.

The “Snapper” plugin requires the latest version of jQuery and Toss JS (for anchor snap scrolling). So, load the jQuery JavaScript library and Toss JS into your HTML document.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- Toss JS -->
<script src="dist/toss.js"></script>

Similarly, include the plugin assets (JavaScript and CSS files) from the downloaded directory.

<!-- Snapper CSS -->
<link rel="stylesheet" href="dist/snapper.css">

<!-- Snapper JS -->
<script src="dist/snapper.js"></script>
<script src="dist/snapper-init.js"></script>

Now, create the HTML structure for image viewer and place your images links in it.

 <!-- Start Image Viewer -->
                  <div class="snapper" data-snapper-nextprev>
      <div class="snapper_pane_crop">
      	<div class="snapper_pane">
      		<div class="snapper_items">
            <div class="snapper_item" id="img-a2">
      				<img src="imgs/monkey.jpg" alt="">
      			</div>
      			<div class="snapper_item" id="img-b2">
      				<img src="imgs/large.jpg" alt="">
      			</div>
      			<div class="snapper_item" id="img-c2">
      				<img src="imgs/monks.jpg" alt="">
      			</div>
            <div class="snapper_item" id="img-d2">
      				<img src="imgs/interior.jpg" alt="">
      			</div>
      			<div class="snapper_item" id="img-e2">
      				<img src="imgs/cows.jpg" alt="">
      			</div>
            <div class="snapper_item" id="img-f2">
      				<img src="imgs/bike.jpg" alt="">
      			</div>
      		</div>
      	</div>
      </div>
    </div>
<!-- End Image Viewer -->

If you want to add the dots navigation in your image viewer, append (at the end) the following HTML inside the <div class="snapper" data-snapper-nextprev> tag.

      <div class="snapper_nav snapper_nav-dots">
        <a href="#img-a2">Slide 1</a>
        <a href="#img-b2">Slide 2</a>
        <a href="#img-c2">Slide 3</a>
        <a href="#img-d2">Slide 4</a>
        <a href="#img-e2">Slide 5</a>
        <a href="#img-f2">Slide 5</a>
      </div>

Finally, initialize the “Snapper” plugin in jQuery document ready function active the image viewer.

  <script>
    document.documentElement.className += "enhanced";
    $(function(){
      $( document ).trigger( "enhance" );
    });
  </script>

Customize with CSS

You can also customize the Snapper image viewer/slider through its main container. Use the “.snapper” selector to add your custom CSS styles. By default, it’s responsive that comes with 100% width. However, you can define custom width, border, or any other CSS property according to your project template.

  .snapper {
    max-width: 25em;
    margin: 0 auto;
  }

To set the custom size, color, and other CSS styles for next & prev buttons, use the following selectors to customize.

/* Next & Prev Buttons */
.snapper_nextprev{
       list-style: none;
       position: absolute;
    height: 70%;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

}
.snapper_nextprev_prev,
.snapper_nextprev_next{
    display: inline-block;
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    padding: 10px;
    user-select: none;
    background: #fff;
    color: #414141;
    text-align: center;
    font-size: 14px;
    top: 50%;

   
}
.snapper_nextprev_prev{
    left: 0;
}
.snapper_nextprev_next{
    right: 0;
}
.snapper_nextprev_prev:hover,
.snapper_nextprev_next:hover{
    background: #f2f2f2;
}

That’s all! I hope you like this tutorial to create an image viewer with the next and previous buttons. If you have any questions or suggestions related to snapper jQuery plugin, drop your comment below.