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 type="text/javascript" src="http://sorgalla.com/projects/jcarousel/lib/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://sorgalla.com/projects/jcarousel/lib/jquery.jcarousel.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
 jQuery('#mycarousel').jcarousel({wrap: 'circular',scroll: 5});
});
</script>
  
<style type="text/css">
.jcarousel-skin-tango {
    width:1100px;
  height: 275px;
  margin:0 auto 0;
}
​
.jcarousel-skin-tango .jcarousel-container {
    width:1100px;
}
​
.jcarousel-skin-tango .jcarousel-container-horizontal {
  width: 1036px;
  padding: 0 32px;
}
​
.jcarousel-skin-tango .jcarousel-clip {
  overflow: hidden;
}
​
.jcarousel-skin-tango .jcarousel-clip-horizontal {
  width:  1030px;
  height: 274px;
  margin:5px 0;
    border-left:3px solid #ff9c2e;
    border-right:3px solid #ff9c2e;
    border-top:0px solid #ff9c2e;
    border-bottom:0px solid #ff9c2e;
}
​
.jcarousel-skin-tango .jcarousel-item {
  width: 200px;
  height: 275px;
}
​
.jcarousel-skin-tango .jcarousel-item-horizontal {
    margin:0 3px 0 3px;
}
​
/**Horizontal_Buttons**/
​
.jcarousel-skin-tango .jcarousel-next-horizontal {
  position: absolute;
  top: 113px;
  right: 0;
  width: 32px;
  height: 54px;
  cursor: pointer;
  background: transparent url("http://dogmatist.nbr.by/templates/D0Gmatist/images/next-horizontal.png") no-repeat 0 0;
}
​
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal {
  left: 5px;
  right: auto;
  background-image: url("http://dogmatist.nbr.by/templates/D0Gmatist/images/prev-horizontal.png");
}
​
.jcarousel-skin-tango .jcarousel-next-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-horizontal:focus {
  background-position: -32px 0;
}
​
.jcarousel-skin-tango .jcarousel-next-horizontal:active {
  background-position: -64px 0;
}
​
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:focus,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
  cursor: default;
  background-position: -96px 0;
}
​
.jcarousel-skin-tango .jcarousel-prev-horizontal {
  position: absolute;
  top: 113px;
  left: 0;
  width: 32px;
  height: 54px;
  cursor: pointer;
  background: transparent url("http://dogmatist.nbr.by/templates/D0Gmatist/images/prev-horizontal.png") no-repeat 0 0;
}
​
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal {
  left: auto;
  right: 5px;
  background-image: url("http://dogmatist.nbr.by/templates/D0Gmatist/images/next-horizontal.png");
}
​
.jcarousel-skin-tango .jcarousel-prev-horizontal:hover, 
.jcarousel-skin-tango .jcarousel-prev-horizontal:focus {
  background-position: -32px 0;
}
​
.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
  background-position: -64px 0;
}
​
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:focus,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
  cursor: default;
  background-position: -96px 0;
}  
  
.minipost {
  border:1px solid #ff9c2e;
  height:272px;
  width:198px;
}
  
.info {
  display:none;
}
  
.minipost:hover .info {
  position: absolute;
  display:block;
  width:350px;
  height:232px;
  background:#ccc;
  border:1px solid #ff9c2e;
  float:right;
  margin:40px 0 0 198px;
}
  
/* реверс класса */
.minipost:hover .revers {
  position: absolute;
  display:block;
  width:350px;
  height:232px;
  background:#ccc;
  border:1px solid #ff9c2e;
  float:right;
  margin:40px 0 0 -352px;
}
​
</style>
    
</head>
​
<body>
  
​
<ul id="mycarousel" class="jcarousel-skin-tango">
​
<li><div class="minipost"><div class="info"></div>1</div></li>
<li><div class="minipost"><div class="info"></div>2</div></li>
<li><div class="minipost"><div class="info"></div>3</div></li>
<li><div class="minipost"><div class="info"></div>4</div></li>
<li><div class="minipost"><div class="info"></div>5</div></li>
<li><div class="minipost"><div class="info"></div>6</div></li>
<li><div class="minipost"><div class="info"></div>7</div></li>
<li><div class="minipost"><div class="info"></div>8</div></li>
<li><div class="minipost"><div class="info"></div>9</div></li>
<li><div class="minipost"><div class="info"></div>10</div></li>
  
<!-- реврес класса -->
<script type="text/javascript">
    $(".info").slice(3).addClass("revers");
</script>
​
</ul>
​
​
  
</body>
</html>
​
 
​
 
​
​
Output

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

Dismiss x
public
Bin info
D0Gmatistpro
0viewers