If you are tired of looking for JQuery plugins to build a horizontal scrolling showcase for you website; If you feel the pain to customize somebody else's plugin to fit your needs. Why not learn the techniques of building one for yourself.
In this tutorial, we will go through the steps on how to build a js horizontal scrolling showcase for your website. It does not taka third party plugin, all it requires is a few lines of JQuery codes.

Table Of Content

  1. Preparation
  2. Html codes
  3. Css codes
  4. Javascript codes
  5. Put them together
  6. Download

Content

1.Preparation
2.Html codes

  • Create "index.html" and place following codes into body section. As we can see, belowing codes create showcase area surrounded by a left arrow and a right arrow.

    <div class="hs">
        <div class="left-arrow">
             <a href="#prev">
             <img src="images/scroller_left.gif"
             		name="scroller_left"
                    width="22" 
                    height="197" 
                    border="0">
             </a>
        </div>
     
        <div class="showcase">    
            <ul style="width:99999px;">
            <li><img src="images/photos/Blue hills.jpg"
            width="200" height="197"/></li>
            <li><img src="images/photos/Sunset.jpg" 
            width="200" height="197"/></li>
            <li><img src="images/photos/Water lilies.jpg"
            width="200" height="197"/></li>
            <li><img src="images/photos/Winter.jpg"
            width="200" height="197"/></li>
             <li><img src="images/photos/Winter.jpg"
             width="200" height="197"/></li>
            </ul>    
        </div>
        
        <div class="right-arrow">
        	<a href="#next">
            <img src="images/scroller_right.gif" 
            		name="scroller_right" 
                    width="22" 
                    height="197" 
                    border="0">
            </a>
        </div>
    </div>

     

3. Css codes

  • Create a css file "style.css" and place following css styles into the file. It specifies a layout as: 

    .hs{
    	width:912px;
    	margin:auto;
    }

    .hs ul{
    	list-style:none;
    	margin:0;
    	padding:0;	
    }

    .hs ul li{
    	width:200px;
    	float:left;
    	margin-right:12px;
    }

    .showcase {
      /* Set it so we could calculate the offsetLeft */
      position: relative;
      height: 197px;
      width: 836px;
      /* Add scroll-bars */
      overflow: auto;
      float:left;
    }

    .left-arrow{
    	width:22px;
    	height:197px;
    	display:block;
    	margin-right:10px;
    	float:left;
    }

    .right-arrow{
    	width:22px;
    	height:197px;
    	display:block;
    	margin-left:10px;
    	float:left;	
    }

     

4.Javascript codes

  • Copy and past following javascript codes into the header section of "index.html".

    <script type="text/javascript">
    $(document).ready(function () {
       //find div
        var div = $('div.showcase');
        //find ul width
        var liNum = $(div).find('ul').children('li').length;
        var speed = 1000;
        var containerWidth = 848;
        var itemWidth = 212;
        //Remove scrollbars
        $(div).css({overflow: 'hidden'});
        $('div.right-arrow').click(function(e){	
              if(($(div).scrollLeft()+containerWidth)<(liNum*itemWidth)){
                 $(div).animate({
                    scrollLeft: '+='+containerWidth
                  }, speed);
              }
        });	
        $('div.left-arrow').click(function(e){	
            if(($(div).scrollLeft()+containerWidth)>containerWidth){
                    $(div).animate({
                    scrollLeft: '-='+containerWidth
                  }, speed);
            }
        });
    });
    </script>

     

5.Put them together

Let us put everything together by linking css file and JQuery to index.html. Put following codes into header section of "index.html" before javascript we did at step 4.

<header>

<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>  

*** other codes ***

<header/>

 

6.Download

You can download the entire code package from www.startutorial.com/downloads/hs/easy-horizental-showcase.zip. If you like our tutorial, please follow us on Twitter and help spread the word. We need your support to continue.