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>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<style type="text/css">
.slider-box {
    background: none repeat scroll 0 0 #FAFAFA;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 3px #333333;
    margin: 0 auto;
    width: 675px;
    overflow: hidden;
}
#slider-wrapper {
    margin: 0 auto;
    padding: 10px;
}
#jslider-container {
    border: 2px solid #FFFFFF;
    max-width: 550px;
    position: relative;
    text-align: left;
    z-index: 90;
}
</style>
<link href="http://project.dimpost.com/image-slider/wowslider/css/wow-slider.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
​
<div class="slider-box">
<div id="slider-wrapper">
<div id="jslider-container">
    <div class="jslider_images">
      <ul>
        <li><a href="http://dimpost.com">
        <img src="http://1.bp.blogspot.com/-8PTU1PEcmLI/Uc2n85UpHUI/AAAAAAAAB4k/j6NY9ZqIyRY/s550/sample1.jpg" title="Sunset"/>
        </a>A boat with beautiful sunset.</li>
        <li><a href="#">
        <img src="http://2.bp.blogspot.com/--GmwV2nAsUQ/Uc2oEd7wNBI/AAAAAAAAB40/ETmQqqlBgvk/s550/sample2.jpg" title="Rainbow"/>
        </a></li>
        <li><a href="#">
        <img src="http://1.bp.blogspot.com/-6g4P9qoMRmI/Uc2oOy08cOI/AAAAAAAAB48/XZ09I9967yU/s550/sample3.jpg" title="True Nature"/>
        </a>Tree in field with blue sky.</li>
        <li><a href="#">
        <img src="http://4.bp.blogspot.com/-gHD47bEFHb8/Uc2oBkNydjI/AAAAAAAAB4s/pT6e5eMXCCc/s550/sample4.jpg" title="Sunrise""/>
        </a>Amaizing sunrise moment</li>
        <li><a href="#">
        <img src="http://4.bp.blogspot.com/-_Fl22hwvf4g/Uc2oRuUPfOI/AAAAAAAAB5M/-paJ0C3ecTw/s550/sample5.jpg" title="CAR in HDR Nature"/>
        </a></li>
        <li><a href="#">
        <img src="http://3.bp.blogspot.com/-cOF07FfXZ0I/Uc2oQ5cFN2I/AAAAAAAAB5E/RTzFpK-6oMM/s550/sample6.jpg" title="Sunshine"/>
        </a></li>
      </ul>
    </div> 
    
    <div class="jslider_thumbs">
        <div>
        <a href="#" title="Sunset"><img src="http://1.bp.blogspot.com/-EV9QJIgCZVs/Uc2sZ302fAI/AAAAAAAAB5c/aw2ncIBTWPI/s85/sample1.jpg"/></a>
        <a href="#" title="Rainbow"><img src="http://4.bp.blogspot.com/-ScQ2WF7eUb4/Uc2saKrS2_I/AAAAAAAAB5g/QacTeCtKU-c/s85/sample2.jpg"/></a>
        <a href="#" title="True Nature"><img src="http://1.bp.blogspot.com/-zQzvkfDsyzg/Uc2sbpceU3I/AAAAAAAAB5s/PN7wNSrydbM/s85/sample3.jpg"/></a>
        <a href="#" title="Sunrise"><img src="http://3.bp.blogspot.com/-R4gOTYCU9dQ/Uc2sbxFqTqI/AAAAAAAAB50/ESHZD7VlnXY/s85/sample4.jpg"/></a>
        <a href="#" title="CAR in HDR Nature"><img src="http://1.bp.blogspot.com/-b5dbnH0-dMg/Uc2scRDvV4I/AAAAAAAAB54/4P9RYqtJdDM/s85/sample5.jpg"/></a>
        <a href="#" title="Sunshine"><img src="http://3.bp.blogspot.com/-L8rLW2XCv7I/Uc2sdkpcx8I/AAAAAAAAB6E/uRfT9gYb5rM/s85/sample6.jpg"/></a>
        </div>
    </div>
    
</div>
</div>
</div>
<script type="text/javascript" src="http://dimpost.googlecode.com/files/wow-slider.js"></script>
</body>
</html>
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers