Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style type="text/css" media="screen">
​
body { font: 1em "Trebuchet MS", verdana, arial, sans-serif; font-size: 100%; }
input, textarea { font-family: Arial; font-size: 125%; padding: 7px; }
label { display: block; } 
​
.infiniteCarousel {
  width:940px;
  position: relative;
}
​
.infiniteCarousel .wrapper {
  width: 860px; /* .infiniteCarousel width - (.wrapper margin-left + .wrapper margin-right) */
  overflow: auto;
  min-height: 10em;
  margin: 0 40px;
  position: absolute;
  top: 0;
}
​
.infiniteCarousel ul a{}
.infiniteCarousel ul a img {
padding:5px;
border:0;
}
​
.infiniteCarousel .wrapper ul {
  width: 9999px;
  list-style-image:none;
  list-style-position:outside;
  list-style-type:none;
  margin:0;
  padding:0;
  position: absolute;
  top: 0;
}
​
.infiniteCarousel ul li {
  display:block;
  float:left;
  padding: 10px;
  height: 85px;
  width: 85px;
}
​
.infiniteCarousel ul li a img {
  display:block;
}
​
.infiniteCarousel .arrow {
  display: block;
  height: 19px;
  width: 20px;
  text-indent: -9999px;
  position: absolute;
  top:48px;
  cursor: pointer;
}
​
.infiniteCarousel .forward:hover {
  background-position: 0 -36px;
}
​
.infiniteCarousel .back:hover {
  background-position: 0 -108px;
}
​
.infiniteCarousel .forward {
background: url(img/right.png) no-repeat 0 0;
  background-position: 0 0;
  right: 0;
}
​
.infiniteCarousel .back {
background: url(img/left.png) no-repeat 0 0;
left: 0;
}
​
.infiniteCarousel .forward:hover, .infiniteCarousel .back:hover{
  background-position: 0 -20px;
}
​
​
.itemDecription{
margin:0 auto;
padding:1%;
min-height:50px;
text-align:center;
height:50px
​
}
​
.itemDecription p{
font-size:14px;
font-weight:bold;
text-align:center;
color:#999;  
}
​
.infiniteCarousel ul li a span{
display:block;
font:11px Verdana, Geneva, sans-serif;
color:#999;
text-align:center;
text-decoration:none;
width:100%;
margin:0 10px;
}
​
​
</style>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="js/jquery.infinite-carousel-new.js"></script>
        
        
        
        <script type="text/javascript">
    $(document).ready(function () {
  $('#carousel-1 div.infiniteCarousel').infiniteCarousel().showText();
  //$('#carousel-1 div.infiniteCarousel').infiniteCarousel();
  
 $('#carousel-1 div.wrapper ul li a').showText();
  
});
    
    
    </script>
​
    </head>
    <body >
<div class="carouselWrapper" style="margin-bottom:100px;" id="carousel-1">
<div class="itemDecription">
    <p></p>
  </div>
     <div class="infiniteCarousel">
            <div class="wrapper">
            <ul>
                <li><a href="" title="This is the icon description for address book "><img src="img/AddressCard.png" width="96" height="96" alt="Address book"  /><span>Address book</span></a></li>
                <li><a href="" title="This is the icon description for Alert"><img src="img/BarGraph.png" width="96" height="96" alt="Alert"/><span>Alert</span></a></li>
                <li><a href="" title="This is the icon description for Documents "><img src="img/Documents.png" width="96" height="96" alt="Documents"/><span>Docs</span></a></li>
                <li><a href="" title="This is the icon description for Calendar "><img src="img/Notes.png" width="96" height="96" alt="Calendar"/><span>Calendar</span></a></li>
                <li><a href="" title="This is the icon description for clock "><img src="img/Clock.png" width="96" height="96"  alt="Clock"/><span>clock</span></a></li>
                <li><a href="" title="This is the icon description for User"><img src="img/User.png" width="96" height="96" alt="Computer"/><span>User</span></a></li>
                <li><a href="" title="Draft "><img src="img/Draft.png" width="96" height="96" alt="Draft"/><span>Draft</span></a></li>
                <li><a href="" title="This is the icon description for Portfolio"><img src="img/Portfolio.png" width="96" height="96" alt="Flag"/><span>Portfolio</span></a></li>
                <li><a href="" title="This is the icon description for Milestone"><img src="img/Milestone.png" width="96" height="96" alt="Floppy"/><span>Milestone</span></a></li>
               </ul>
         </div>
            <!-- END wrapper --> 
  </div>
          <!-- END carousel --> 
          
          
          
 <div class="carouselWrapper" style="padding-top:100px;" id="carousel-2">
<div class="itemDecription">
    <p></p>
  </div>
     <div class="infiniteCarousel">
            <div class="wrapper">
            <ul>
                <li><a href="" title="This is the icon description for address book "><img src="img/AddressCard.png" width="96" height="96" alt="Address book"  /><span>Address book</span></a></li>
                <li><a href="" title="This is the icon description for Alert"><img src="img/BarGraph.png" width="96" height="96" alt="Alert"/><span>Alert</span></a></li>
                <li><a href="" title="This is the icon description for Documents "><img src="img/Documents.png" width="96" height="96" alt="Documents"/><span>Docs</span></a></li>
                <li><a href="" title="This is the icon description for Calendar "><img src="img/Notes.png" width="96" height="96" alt="Calendar"/><span>Calendar</span></a></li>
                <li><a href="" title="This is the icon description for clock "><img src="img/Clock.png" width="96" height="96"  alt="Clock"/><span>clock</span></a></li>
                <li><a href="" title="This is the icon description for User"><img src="img/User.png" width="96" height="96" alt="Computer"/><span>User</span></a></li>
                <li><a href="" title="Draft "><img src="img/Draft.png" width="96" height="96" alt="Draft"/><span>Draft</span></a></li>
                <li><a href="" title="This is the icon description for Portfolio"><img src="img/Portfolio.png" width="96" height="96" alt="Flag"/><span>Portfolio</span></a></li>
                <li><a href="" title="This is the icon description for Milestone"><img src="img/Milestone.png" width="96" height="96" alt="Floppy"/><span>Milestone</span></a></li>
               </ul>
         </div>
            <!-- END wrapper --> 
  </div>
          <!-- END carousel --> 
          
        </div>
<!-- END container -->
 
          
        </div>
<!-- END container -->
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers