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 PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
  <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
  <title>jQuery 3D Infinite Carousel</title> 
  <script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js'></script> 
  <style type="text/css" media="screen"> 
body {
  width:100%;
  height:100%;
  background: #1a1a1a;
  text-align: center;
  margin: 0;
  padding: 0;
}
.carousel {
  display:none;
  width: 505px;
  position: relative;
  overflow: hidden;
  margin: 0;
  height: 300px;
  float:left;
  left:50px
}
.carousel img {
  position: absolute;
  border: 3px solid #aaa;
}
.inactive {
  width: 0;
  left: 130px;
  display: none;
}
.active {
  left: 90px;
  width: 320px;
  z-index: 2;
  display: inline-block;
  cursor:pointer;
}
.right, .left {
  width: 240px;
  top: 30px;
  z-index: 1
}
.right {
  left: 260px;
}
.left {
  left: 0px;
}
.button {
  cursor: pointer;
  width: 48px;
  height: 48px;
  position: absolute;
  float: left;
  top: 85px;
}
#left {
  background: url(http://cdn.iconfinder.net/data/icons/oxygen/48x48/actions/go-next-rtl.png) no-repeat
}
#right {
  background: url(http://cdn.iconfinder.net/data/icons/oxygen/48x48/actions/go-previous-rtl.png) no-repeat;
  right: 0
}
#carousel_wrapper {
  position: relative;
  height: 220px;
  width: 605px;
  margin: 100px auto;
}
  </style> 
  
  
  
 
</head> 
<body>
​
    <div class='carousel'>
      <img src='http://l.yimg.com/g/images/home_photo_visualpanic.jpg'  alt="" /> 
      <img src='http://l.yimg.com/g/images/home_photo_rappensuncle.jpg' alt="" /> 
      <img src='http://l.yimg.com/g/images/home_photo_lyn.jpg' alt=""  /> 
      <img src='http://l.yimg.com/g/images/home_photo_aussiegall.jpg' alt="" /> 
      <img src='http://l.yimg.com/g/images/home_photo_ende.jpg' alt="" /> 
      <img src='http://l.yimg.com/g/images/home_photo_notsogoodphotography.jpg' alt="" /> 
      <img src='http://l.yimg.com/g/images/home_photo_kk.jpg' alt="" /> 
      <img src='http://l.yimg.com/g/images/home_photo_megansoh.jpg' alt="" /> 
      <img src='http://l.yimg.com/g/images/home_photo_codepoet.jpg' alt="" />       
    </div> 
  
 
</body> 
</html>
 
$(function() {
$('.carousel').carousel();
});
​
(function($) {
$.fn.carousel = function() {
​
    $carousel = $(this);
    $carousel.wrap('<div id="carousel_wrapper"></div>');
    $carousel.parent().append('<div class="button" id="left"></div>'+
                              '<div class="button" id="right"></div>');
  
    $('img',this).attr('class', 'inactive');
    $('img:eq(1)',this).attr('class', 'left');
    $('img:eq(2)',this).attr('class', 'active');
    $('img:eq(3)',this).attr('class', 'right');
    
    $carousel.fadeIn(500);
  
    $('.button').live('click', function(e) {
        e.preventDefault();
      
        var mode = this.id;
        var $button = $('.' + mode );
      
        $button.css({ 
            'z-index' : 9999 , 
            'opacity': 0.8
        }).animate({
            'left': '90px',
            'width': '320px',
            'top': '0px',
            'opacity': 1
        }, 500, function() {
          $(this).attr({'class':'active','rel':'lightbox'}).removeAttr('style');
          $(this).siblings().removeAttr('rel');
        });
        
        $button.prev().css({
            'opacity': 0.5 
        }).animate({
            'left': '0px',
            'width': '240px',
            'top': '30px',
            'opacity': 1
        }, 400, function() {
            
            $(this).attr('class', 'left').removeAttr('style');
            $(this).prevAll().attr('class', 'inactive');
        });
        
        $button.next().css({
            'opacity': 0.5 
        }).animate({
            'left': '260px',
            'width': '240px',
            'top': '30px',
            'opacity': 1
        }, 400, function() {
            
            $(this).attr('class', 'right').removeAttr('style');
            $(this).nextAll().attr('class', 'inactive');
        });
​
        if (mode == 'left') 
        $('img:last' , $carousel).prependTo($carousel);
        if (mode == 'right') 
        $('img:first' , $carousel).appendTo($carousel);
        
    });
}
})(jQuery);
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers