Carousel Usando jCarousel v3

carousel.js

/*
  Scripts usados nessa página

  Índice de funções para esse arquivo:
  * carousel.init();
  * carousel.init_events();
*/

var carousel;

(function( window, document, $, undefined ) {

  carousel = (function() {

    var $carousel = $( 'div.carousel-pictures' ).find( 'div.wrap-carousel' ),
      $nav_carousel = $( 'a.nav-carousel' ),
      $carousel_target;

    return {

      /*--------------------------------------------------------------------------------------
       *
       * @name: init
       * @description: Todas as funções que devem iniciar ao carregar a página
       *
       *-------------------------------------------------------------------------------------*/
      init : function() {

        console.log( 'carregou /assets/_js/app/carousel.js' );

        // Inicia Carousel
        carousel.init_carousel();

        // Eventos
        carousel.init_events();

      }, // init










      /*--------------------------------------------------------------------------------------
       *
       * @name: init_events
       * @description: Eventos
       *
       *-------------------------------------------------------------------------------------*/
      init_events : function() {

        // Passar imagens do carousel
        $nav_carousel.on( 'click', carousel.next_prev_carousel );

      }, // init_events










      /*--------------------------------------------------------------------------------------
       *
       * @name: init_carousel
       * @description: Inicia o Carousel
       *
       *-------------------------------------------------------------------------------------*/
      init_carousel : function() {



        $carousel.jcarousel({ wrap : 'both' });

      }, // init_carousel










      /*--------------------------------------------------------------------------------------
       *
       * @name: next_prev_carousel
       * @description: Navegação do Carousel
       *
       * @params {Object} e Dados do evento
       *
       *-------------------------------------------------------------------------------------*/
      next_prev_carousel : function( e ) {

        e.preventDefault();
        var $this = $( this );

        $carousel.find( 'li' ).removeClass( 'active' );

        if( $this.hasClass( 'nav-prev' ) ) {
          $carousel.jcarousel( 'scroll', '-=1' );
        }
        else {
          $carousel.jcarousel( 'scroll', '+=1' );
        }

        $carousel_target = $carousel.jcarousel( 'visible' ).addClass( 'active' );

      } // next_prev_carousel

    }; // return

  })(); // carousel

})( window, document, jQuery );

index.html

<div class="carousel-pictures">
  <div class="wrap-carousel">
    <ul>
      <li>
        <img src="http://lorempixel.com/600/460/" alt="" />
      </li>
      <li>
        <img src="http://lorempixel.com/600/460/" alt="" />
      </li>
      <li>
        <img src="http://lorempixel.com/600/460/" alt="" />
      </li>
      <li>
        <img src="http://lorempixel.com/600/460/" alt="" />
      </li>
      <li>
        <img src="http://lorempixel.com/600/460/" alt="" />
      </li>
    </ul> 
  </div> <!-- .wrap-carousel -->


  <a class="nav-carousel nav-prev">Prev</a>
  <a class="nav-carousel nav-next">Next</a>
</div> <!-- .carousel-pictures -->

style.sass

.carousel-pictures
  position: relative

  .wrap-carousel
    height: 460px
    overflow: hidden
    width: 600px

  ul
    float: left
    margin: 0
    padding: 0
    position: relative
    width: 2000em

  li
    float: left
    list-style: none

  img
    display: block

  .nav-carousel
    cursor: pointer
    position: absolute
    top: 0

  .nav-prev
    left: 0

  .nav-next
    right: 0