title: How do I create a JQuery content slider that uses 4 images to navigate rather than text?
body: <p>I have for images with a number on it.  Those numbers are 1-4.  I want to place them numerically and when the user clicks on 1, i want them to go to slide 1 and if they click on 2, then slide 2.  This also needs to have a sliding effect.  </p>
  
  <p>I am using this particular javascript code below for left and right options but i am not sure if I can re-use this for my purpose: </p>
  
  <p>HTML would be something like: </p>
  
  <pre><code>&lt;img src="#" class="image_one"&gt;
  &lt;img src="#" class="image_two"&gt;
  &lt;img src="#" class="image_three"&gt;
  &lt;img src="#" class="image_four"&gt;
  
  &lt;div class="content_for_image_One" id="slide1"&gt;
  You see this when you click on image 1
  &lt;/div&gt;
  
  &lt;div class="content_for_image_two" id="slide2"&gt;
  You see this when you click on image 2
  &lt;/div&gt;
  
  &lt;div class="content_for_image_three" id="slide3"&gt;
  You see this when you click on image 3
  &lt;/div&gt;
  
  &lt;div class="content_for_image_four" id="slide4"&gt;
  You see this when you click on image 4
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
              $(document).ready(function () {
  
                  var $sliderMask = $('#slider_mask');
                  var $slideContainer = $('#slide_container');
  
                  var $slides = $slideContainer.find('.slide');
  
                  var slideCount = $slides.length;
                  var slideWidth = $sliderMask.width();
  
                  $slideContainer.width(slideCount * slideWidth);
                  $slides.width(slideWidth);
  
                  var currentSlide = 0;
  
                  function animate() {
                      $slideContainer.stop().animate({ marginLeft: -(currentSlide * slideWidth) + 'px' }, 'slow');
                  }
  
                  $('#left_button').on('click', function () {
                      currentSlide = (currentSlide - 1 + slideCount) % slideCount;
                      animate();
                  });
  
                  $('#right_button').on('click', function () {
                      currentSlide = (currentSlide + 1) % slideCount;
                      animate();
                  });
  
                  $('#click_left').on('click', function () {
                      currentSlide = (currentSlide - 1 + slideCount) % slideCount;
                      animate();
                  });
  
                  $('#click_right').on('click', function () {
                      currentSlide = (currentSlide + 1) % slideCount;
                      animate();
                  });
  
  
              });
  
  &lt;/script&gt;
  </code></pre>