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 lang="en"> 
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  
<script src="http://sorgalla.com/projects/jcarousel/lib/jquery.jcarousel.min.js"></script> 
  <link rel="stylesheet" type="text/css" href="http://sorgalla.com/projects/jcarousel/skins/tango/skin.css" /> 
  <meta http-equiv="content-type" content="text/html; charset=UTF8">
  <title>jQuery UI Autocomplete Combobox Demo</title> 
 
<style type="text/css"> 
 
​
  /*  THIS IS THE PART YOU NEED ---------------------------- */
 
  
.jcarousel-control {
    margin-bottom: 10px;
    text-align: center;
}
 
.jcarousel-control a {
    font-size: 75%;
    text-decoration: none;
    padding: 0 5px;
    margin: 0 0 5px 0;
    border: 1px solid #fff;
    color: #eee;
    background-color: #4088b8;
    font-weight: bold;
}
 
.jcarousel-control a:focus,
.jcarousel-control a:active {
    outline: none;
}
 
.jcarousel-scroll {
    margin-top: 10px;
    text-align: center;
}
 
.jcarousel-scroll form {
    margin: 0;
    padding: 0;
}
 
.jcarousel-scroll select {
    font-size: 75%;
}
 
#mycarousel-next,
#mycarousel-prev {
    cursor: pointer;
    margin-bottom: -10px;
    text-decoration: underline;
    font-size: 11px;
}
  
  /**
 *  Horizontal Buttons
 */
.jcarousel-next-horizontal {
    position: absolute;
    top: 43px;
    left: 300px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(http://sorgalla.com/projects/jcarousel/skins/tango/next-horizontal.png) no-repeat 0 0;
}
​
.jcarousel-next-horizontal:hover {
    background-position: -32px 0;
}
​
.jcarousel-next-horizontal:active {
    background-position: -64px 0;
}
​
 .jcarousel-next-disabled-horizontal,
 .jcarousel-next-disabled-horizontal:hover,
 .jcarousel-next-disabled-horizontal:active {
    cursor: default;
    background-position: -96px 0;
}
​
 .jcarousel-prev-horizontal {
    position: absolute;
    top: 43px;
    left: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(http://sorgalla.com/projects/jcarousel/skins/tango/prev-horizontal.png) no-repeat 0 0;
}
​
 .jcarousel-prev-horizontal:hover {
    background-position: -32px 0;
}
​
 .jcarousel-prev-horizontal:active {
    background-position: -64px 0;
}
​
.jcarousel-prev-disabled-horizontal,
 .jcarousel-prev-disabled-horizontal:hover,
 .jcarousel-prev-disabled-horizontal:active {
    cursor: default;
    background-position: -96px 0;
}
  
  /* THIS IS THE PART YOU NEED-------------------------------------- */
  
  
  body { text-align:center }
  
  
  #my_custom_button_container { position:relative; width:300px; height:50px; margin: 0 auto } 
  
  
  
</style> 
  
</head>
<body>
  
  
  <!--/  THIS IS THE PART YOU NEED /-->
  
  <div id="my_custom_button_container"> 
   <!--/  ADD TO YOUR OWN PREV BUTTON THIS CLASS class="jcarousel-prev jcarousel-prev-horizontal" /-->
     <div class="jcarousel-prev jcarousel-prev-horizontal" href="#" id="mycarousel-prev"></div> 
    
     <div class="jcarousel-next jcarousel-next-horizontal" href="#" id="mycarousel-next"></div> 
    <!--/  ADD TO YOUR OWN NEXT BUTTON THIS CLASS class="jcarousel-next jcarousel-next-horizontal" /-->    
  </div>
  
   <!--/  THIS IS THE PART YOU NEED /-->
  
  
  
<div id="wrap"> 
  <h1>jCarousel</h1> 
  <h2>Riding carousels with jQuery</h2> 
 
  <h3>Carousel with external controls</h3> 
  <p> 
    This carousws how to control it from outside.
  </p> 
 
  
  <div id="mycarousel" class="jcarousel-skin-tango"> 
    <div class="jcarousel-control"> 
      <a href="#">1</a> 
      <a href="#">2</a> 
      <a href="#">3</a> 
      <a href="#">4</a> 
      <a href="#">5</a> 
      <a href="#">6</a> 
      <a href="#">7</a> 
      <a href="#">8</a> 
      <a href="#">9</a> 
      <a href="#">10</a> 
    </div> 
 
    <ul> 
      <li><img width="75" height="75" src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" alt="" /></li> 
      <li><img width="75" height="75" src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" alt="" /></li> 
      <li><img width="75" height="75" src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" alt="" /></li> 
      <li><img width="75" height="75" src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" alt="" /></li> 
      <li><img width="75" height="75" src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" alt="" /></li> 
      <li><img width="75" height="75" src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" alt="" /></li> 
      <li><img width="75" height="75" src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" alt="" /></li> 
      <li><img width="75" height="75" src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" alt="" /></li> 
      <li><img width="75" height="75" src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" alt="" /></li> 
      <li><img width="75" height="75" src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" alt="" /></li> 
    </ul> 
 
   
    
    <div class="jcarousel-scroll"> 
      <form action=""> 
  
        <select> 
          <option value="1">Scroll 1 item per click</option> 
          <option value="2">Scroll 2 items per click</option> 
          <option value="3">Scroll 3 items per click</option> 
          <option value="4">Scroll 4 items per click</option> 
          <option value="5">Scroll 5 items per click</option> 
        </select> 
       
      </form> 
    </div> 
 
  </div> 
 
</div> 
  
​
 
</body> 
</html>
Output 300px

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