How to add Left/Right arrows to jQuery Slider (Sterling HTML Template)

Overview

This article provides instructions on how to add Left and Right Arrows to the jQuery Slider.

General Instructions:

  • Open up page-template-homepage-jquery.html or page-template-homepage-jquery-sidebar.html file
  • At the bottom of the file, find this code:
         <script type="text/javascript">         jQuery(document).ready(function($){             // Homepage slider setup. Issued in the footer to accept user-set variables.             $('#slides').slides({                 preload: false,                 //preloadImage: 'http://files.truethemes.net/themes/sterling-wp/ajax-loader.gif',                 autoHeight: true,                 effect: 'fade',                 slideSpeed: 1000,                 play: 3000,                 randomize: false,                 hoverPause: true,                 pause: 3000,          	  });          });       </script>
  • Replace that entire block of code with the following:
         <script type="text/javascript">         jQuery(document).ready(function($){             // Homepage slider setup. Issued in the footer to accept user-set variables.             $('#slides').slides({                 preload: false,                 //preloadImage: 'http://files.truethemes.net/themes/sterling-wp/ajax-loader.gif',                 autoHeight: true,                 effect: 'slide',                 slideSpeed: 1000,                 play: 3000,                 randomize: false,                 hoverPause: false,                 pause: 3000,                 generateNextPrev: true            });              // Allows for custom nav buttons to remain outside of #slides container.             $('.banner-slider .next').click(function(){                 $('#slides .next').click();             });             $('.banner-slider .prev').click(function(){                 $('#slides .prev').click();             });         });     </script>
  • Scroll up and find the following block of code at around line 194:
     <div class="shadow top"></div>        <div class="shadow bottom"></div>        <div class="tt-overlay"></div>
  • Immediately after that, add this code:
    <a href="#" class="next tt-sliderbutton">Next</a> <a href="#" class="prev tt-sliderbutton">Prev</a>
  • Save the file
  • Open up stylesheet _style.css and add this block of code:
    #slides .next, #slides .prev { display: none; } .banner-slider .next, .banner-slider .prev { background:url(../images/global/sprite.png); background-position: 0 -5799px; cursor: pointer; display: block; height: 51px; margin: -20px 0 0; opacity: 0.6; position: absolute; text-indent: -9999px; top: 50%; width: 54px; z-index: 9999; } .banner-slider .prev { left: 0; } .banner-slider .next { background-position: 0 -5859px; right: 0; } .banner-slider .next:hover, .banner-slider .prev:hover { opacity: 0.9; }
  • Download the attached sprite.png
  • Save it in /images/global/ folder
  • That is all 🙂