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
  • …
 
<html>
    <head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" type="text/css" />
    </head>
    <body>
<div id="main">
 <div id="content-slider"></div>
 <div id="content-scroll">
   <div id="content-holder">
     <div class="content-item">
        Content 1
     </div>
     <div class="content-item">
       Content 2
     </div>
     <div class="content-item">
       Content 3
     </div>
     <div class="content-item">
       Content 4
     </div>
     <div class="content-item">
       Content 5
     </div>
   </div>
 </div>
 </div>
</body>
</html>
 
#main {
   width: 510px;
   margin: 0 auto;
 }
 
 #content-slider {
   width: 490px;
   height: 6px;
   margin: 5px;
   background: #BBBBBB;
   position: relative;
 }
 
 .ui-slider-handle {
   width: 8px;
   height: 14px;
   position: absolute;
   top: -4px;
   background: #478AFF;
   border: solid 1px black;
 }
 
 #content-scroll {
   width: 500px;
   height: 300px;
   margin-top: 10px;
   overflow: hidden;
   border: solid 1px black;
 }
 
 #content-holder {
   width: 1500px;
   height: 270px;
 }
 
 .content-item {
   width: 290px;
   height: 270px;
   padding: 5px;
   float: left;
 }
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers