A tiny carousel with jQuery

I have been wanting to do this for a long time. Finally I made this: a really tiny carousel.

It is good for:

  • a light weight carousel / image slider without fancy animation except sliding right or left.

It is not easy to:

  • extend since the width and height are fixed pixels. Need to adjust css code to make it extendable.

Here is the code:

HTML

 <div id="imageContainer">
     <div id="myCarousel">
         <div id="myCarousel-left"><i class="fa fa-chevron-left"></i></div>
         <ul>
             <li>
                 <img src="http://geniuscarrier.com/images/red.jpg" alt="red" />
             </li>
             <li>
                 <img src="http://geniuscarrier.com/images/blue.jpg" alt="blue" />
             </li>
             <li>
                 <img src="http://geniuscarrier.com/images/purple.jpg" alt="purple" />
             </li>
         </ul>
         <div id="myCarousel-right"><i class="fa fa-chevron-right"></i></div>
     </div>
 </div>

CSS

 #imageContainer
 {
     width: 1300px;
     height: 620px;
     margin: 0 auto;
 }
 #myCarousel
 {
     position: relative;

     float: left;
     overflow: hidden;

     width: 1300px;
 }
 #myCarousel ul
 {
     width: 3900px;
     margin: 0;
     padding: 0;
 }
 #myCarousel ul li
 {
     float: left;

     width: 1300px;
     height: 620px;

     list-style: none;

     text-align: center;
 }
 #myCarousel-left,
 #myCarousel-right
 {
     font-size: 4em;
     line-height: 620px;

     position: absolute;
     top: 0;

     display: none;

     height: 620px;

     cursor: pointer;
     text-align: center;

     color: #fff;
     opacity: 0.4;
 }
 #myCarousel-left
 {
     left: 0;

     margin-left: 20px;
 }
 #myCarousel-right
 {
     right: 0;

     margin-right: 20px;
 }

JavaScript

  function move(direction) {
       var myCarousel = $('#myCarousel ul');
       if (!myCarousel.is(':animated')) {
           if (direction === 'left') {
               myCarousel.animate({
                   marginLeft: -1300
               }, 500, function () {
                   myCarousel.find("li:last").after(myCarousel.find("li:first"));
                   myCarousel.css('marginLeft', 0);
               });
           } else {
               myCarousel.find('li:first').before(myCarousel.find('li:last'));
               myCarousel.css('marginLeft', '-1300px').animate({
                   marginLeft: 0
               }, 500);
           }
       }
   }

   $('#myCarousel').hover(function () {
       $('#myCarousel-left, #myCarousel-right').show();
   }, function () {
       $('#myCarousel-left, #myCarousel-right').hide();
   });

   var t = setInterval(function () {
       move('left');
   }, 5000);

   $('#myCarousel-left').click(function () {
       move('left');
   });

   $('#myCarousel-right').click(function () {
       move('right');
   });

Demo

If you can implement the same feature with less code, please leave a comment.

Yang Zhao

Read more posts by this author.


Comment