Horizontal scrolling on Mouse Wheel

Question

I have a single row table containing images with horizontal scroll bar, and I want to scroll images horizontally using mouse wheel. Here is my html.

<div class="container">
  <div class="image-gallery">
    <table>
      <tr>
        <td class="images">
          <div class="img"><img src="../Images/small_Image_1.jpg" /><div class="description"><a class="image-slider-studets-names" href=" ">Alia Bhatt</a></div> </div>
        </td>
        <td class="images">
          <div class="img"><img src="../Images/small_Image_2.jpg" /><div class="description"><a class="image-slider-studets-names" href="">sonia gandhi</a></div> </div>
        </td>
        <td class="images">
          <div class="img"><img src="../Images/small_Image_3.jpg" /><div class="description"><a class="image-slider-studets-names" href="">Barney Stinson</a></div> </div>
        </td>
        <td class="images">
          <div class="img"><img src="../Images/small_Image_4.jpg" /><div class="description"><a class="image-slider-studets-names" href="">Ranjit Choudary</a></div> </div>
        </td>
        <td class="images">
          <div class="img"><img src="../Images/small_Image_5.jpg" /><div class="description"><a class="image-slider-studets-names" href="">Gangadhar Shastri</a></div> </div>
        </td>
        <td class="images">
          <div class="img"><img src="../Images/small_Image_6.jpg" /><div class="description"><a class="image-slider-studets-names" href="">Mountain</a></div> </div>
        </td>
      </tr>
    </table>
  </div>
</div>

Answer 1

You can use Mouse Wheel, a jQuery Plugin to achieve horizontal scrolling. Mouse Wheel provides two helper methods called mousewheel and unmousewheel that act just like other event helper methods in jQuery and you code should look like this:

<div class="container">
 <div class="image-gallery">
     <table>
  <tr>
    <td class="images">
      <div class="img"><img src="../Images/small_Image_1.jpg" /><div class="description"><a class="image-slider-studets-names" href=" ">Alia Bhatt</a></div> </div>
    </td>
    <td class="images">
      <div class="img"><img src="../Images/small_Image_2.jpg" /><div class="description"><a class="image-slider-studets-names" href="">sonia gandhi</a></div> </div>
    </td>
    <td class="images">
      <div class="img"><img src="../Images/small_Image_3.jpg" /><div class="description"><a class="image-slider-studets-names" href="">Barney Stinson</a></div> </div>
    </td>
    <td class="images">
      <div class="img"><img src="../Images/small_Image_4.jpg" /><div class="description"><a class="image-slider-studets-names" href="">Ranjit Choudary</a></div> </div>
    </td>
    <td class="images">
      <div class="img"><img src="../Images/small_Image_5.jpg" /><div class="description"><a class="image-slider-studets-names" href="">Gangadhar Shastri</a></div> </div>
    </td>
    <td class="images">
      <div class="img"><img src="../Images/small_Image_6.jpg" /><div class="description"><a class="image-slider-studets-names" href="">Mountain</a></div> </div>
    </td>
  </tr>
</table>
    </div>
  </div>


<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>
<script>
$(document).ready(function(){
      $("body").mousewheel(function(event, delta) {

         //The "30" represents speed. preventDefault ensures the page won't scroll down.
         this.scrollLeft -= (delta * 30);
        event.preventDefault();

 });
});
</script>

Here is a DEMO Fiddle

Answer 2

Instead of using <div> to wrap the image and description, use <span> because it aligns inline be default.

Working Code Snippet:

<div class="container">
  <div class="image-gallery">
    <table>
      <tr>
        <td class="images"><span class="img"><img src="../Images/small_Image_1.jpg" /><div class="description"><a class="image-slider-studets-names" href=" ">Alia Bhatt</a></div> </span></td>
        <td class="images"><span class="img"><img src="../Images/small_Image_2.jpg" /><div class="description"><a class="image-slider-studets-names" href="">sonia gandhi</a></div> </span></td>
        <td class="images"><span class="img"><img src="../Images/small_Image_3.jpg" /><div class="description"><a class="image-slider-studets-names" href="">Barney Stinson</a></div> </span></td>
        <td class="images"><span class="img"><img src="../Images/small_Image_4.jpg" /><div class="description"><a class="image-slider-studets-names" href="">Ranjit Choudary</a></div> </span></td>
        <td class="images"><span class="img"><img src="../Images/small_Image_5.jpg" /><div class="description"><a class="image-slider-studets-names" href="">Gangadhar Shastri</a></div> </span></td>
        <td class="images"><span class="img"><img src="../Images/small_Image_6.jpg" /><div class="description"><a class="image-slider-studets-names" href="">Mountain</a></div> </span></td>
        <!-- duplicating it/adding more to get the horizontal scrollbar -->
        <td class="images"><span class="img"><img src="../Images/small_Image_6.jpg" /><div class="description"><a class="image-slider-studets-names" href="">Mountain</a></div> </span></td>
        <td class="images"><span class="img"><img src="../Images/small_Image_6.jpg" /><div class="description"><a class="image-slider-studets-names" href="">Mountain</a></div> </span></td>
        <td class="images"><span class="img"><img src="../Images/small_Image_6.jpg" /><div class="description"><a class="image-slider-studets-names" href="">Mountain</a></div> </span></td>            
        <td class="images"><span class="img"><img src="../Images/small_Image_6.jpg" /><div class="description"><a class="image-slider-studets-names" href="">Mountain</a></div> </span></td>            
        <td class="images"><span class="img"><img src="../Images/small_Image_6.jpg" /><div class="description"><a class="image-slider-studets-names" href="">Mountain</a></div> </span></td>            
        <td class="images"><span class="img"><img src="../Images/small_Image_6.jpg" /><div class="description"><a class="image-slider-studets-names" href="">Mountain</a></div> </span></td>
      </tr>
    </table>
  </div>
</div>