title: Using jQuery "swipe" function to navigate an array of images
body: <p>I'm building a simple slideshow that is controlled by buttons when viewed on a computer and by swiping gestures on touch screen devices. <a href="http://jsfiddle.net/admiringtheorchid/pfe2n05p/1/" rel="nofollow">This is a demo with 3 images</a>. </p>
  
  <p>Each image, its corresponding caption and the navigation are contained within one div. Here's the first one:</p>
  
  <pre><code>&lt;div class="item" id="1"&gt;
      &lt;img src="..."&gt;
      &lt;div class="caption"&gt;
          caption 1
      &lt;/div&gt;
      &lt;div class="navigation"&gt;
          &lt;a href="#" id="1prev"&gt;&amp;lt&lt;/a&gt; 1 / 3 &lt;a href="#" id="1next"&gt;&amp;gt&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>These divs are shown or hidden using the "click" and "swipeleft / swiperight" functions. </p>
  
  <pre><code>$(document).ready(function () {
      $("#1prev").click(function () {
          $("#1").hide();
          $("#3").show();
      });
      $("#1").on("swipeleft", function () {
          $("#1").hide();
          $("#3").show();
      });
      $("#1next").click(function () {
          $("#1").hide();
          $("#2").show();
      });
      $("#1").on("swiperight", function () {
          $("#1").hide();
          $("#2").show();
      });
  });
  </code></pre>
  
  <p>The slideshow will contain as many as 40 images in total. Is there a way to condense the script? Is this a relatively efficient and accessible solution? Is the code written properly? Can it be improved?</p>