CodePen

HTML

            
              <div id="content">
  <h1>Responsive Infinite Carousel</h1>
  <p style="text-align: right;"><i>By <a href="https://github.com/randombrad" target="new_window" title="Bradley Wood's Github">Bradley Wood and <a href="https://github.com/Robert-Frampton" target="new_window" title="Rober Frampton's Github">Robert Frampton</a></i></p>
  <div class="carousel" style="margin: 100px auto 0;">
      <div class="clear"></div>
      <div id="slides"> 
        <ul>
          <li>
            <img src="http://i45.tinypic.com/2ro56yq.jpg"  alt="Slide 1"/><br/>
            <img src="http://i45.tinypic.com/2ro56yq.jpg"  alt="Slide 1"/><br/>
            <img src="http://i45.tinypic.com/2ro56yq.jpg"  alt="Slide 1"/>
          </li>
          <li>
            <img src="http://i47.tinypic.com/1gp15d.jpg"  alt="Slide 2"/><br/>
            <img src="http://i47.tinypic.com/1gp15d.jpg"  alt="Slide 2"/><br/>
            <img src="http://i47.tinypic.com/1gp15d.jpg"  alt="Slide 2"/>
          </li>
          <li>
            <img src="http://i48.tinypic.com/10riej4.jpg" alt="Slide 3"/><br/>
            <img src="http://i48.tinypic.com/10riej4.jpg" alt="Slide 3"/><br/>
            <img src="http://i48.tinypic.com/10riej4.jpg" alt="Slide 3"/>
          </li>
          <li>
            <img src="http://i45.tinypic.com/29wwqat.jpg" alt="Slide 4"/><br/>
            <img src="http://i45.tinypic.com/29wwqat.jpg" alt="Slide 4"/><br/>
            <img src="http://i45.tinypic.com/29wwqat.jpg" alt="Slide 4"/>
          </li>
          <li>
            <img src="http://i46.tinypic.com/wankuc.jpg" alt="Slide 5"/><br/>
            <img src="http://i46.tinypic.com/wankuc.jpg" alt="Slide 5"/><br/>
            <img src="http://i46.tinypic.com/wankuc.jpg" alt="Slide 5"/>
          </li>
          <li>
            <img src="http://i47.tinypic.com/i1guqb.jpg" alt="Slide 6"/><br/>
            <img src="http://i47.tinypic.com/i1guqb.jpg" alt="Slide 6"/><br/>
            <img src="http://i47.tinypic.com/i1guqb.jpg" alt="Slide 6"/>
          </li>
        </ul>
        <div class="clear"></div>
      </div>
    </div>
 <div>
            
          
!
via HTML Inspector

CSS

            
              body {
  background: #DDD;
}


#content {
  max-width: 960px;
  margin: 0 auto;
}

h1 {
  font-family: 'Rambla', Arial, Helvetica, sans-serif;
  color: #524b45;
  font-size: 3.2em;
  line-height: 1.35em;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
}

.carousel {
  background-color: #FFF;
  @include box-shadow(inset 0 0 10px #999);
  padding: 10px 10px 20px;
  @include border-radius(5px);
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  margin-bottom: 1em;
   @include transition-property(width);
  @include transition-duration(0.5s);
  @include transition-timing-function(ease-in);
}

/* Styling for prev and next buttons */
#buttons {
  @include border-radius(5px);
  bottom: 3px;
  left: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 0;
  z-index: 10;

  a {
    display: inline-block;
    height: 15px;
    outline: 0;
    text-indent: -999em;
    width: 15px;

    &#pause {
      background: url(http://cdn.alloyui.com/2.0.0pr4/aui-carousel/assets/skins/sam/pause.png) 0 0 no-repeat;

      &.play {
        background: url(http://cdn.alloyui.com/2.0.0pr4/aui-carousel/assets/skins/sam/play.png) 0 0 no-repeat;
      }
    }

    &#prev, &#next, &#pause {
      height: 20px;
      width: 20px;
    }

    &#prev {
      background: url(http://cdn.alloyui.com/2.0.0pr4/aui-carousel/assets/skins/sam/prev.png) 0 0 no-repeat;
    }

    &#next {
      background: url(http://cdn.alloyui.com/2.0.0pr4/aui-carousel/assets/skins/sam/next.png) 0 0 no-repeat;
    }
  }

  menu {
    display: table;
    list-style: none;
    margin: 0 auto;
    padding: 0;

    li{
      display: inline-block;
    }

    a {
      @include border-radius(20px);
      @include box-shadow(1px, 1px, 5px, #000);
      background-color: #888;
      cursor: pointer;
      margin: 0 4px;
      text-decoration: none;
      
      &.link {
        height: 10px;
        width: 10px;
        margin-bottom: 0px;
      }
      &.active {
        background-color: #DDD;
      }
    }
  }
}

a {
}

.clear {
  clear: both
}

#slides {
 
  /* fix ie overflow issue */
  overflow: hidden;
  position: relative;
  @include transition-property(width);
  @include transition-duration(0.5s);
  @include transition-timing-function(ease-in);

  /* remove the list styles, width : item width * total items */
  ul {
    display: inline-block;
    left: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    top: 0;

    /* width of the item, in this case I put 250x250x gif */
    li {
      display: block;
      float: left;
      height: 100%;

      img {
        padding: 4px;
      }
    }
  }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              // Authors:
// Bradley Wood
// Robert Frampton

AUI().use(
    'aui-base',
    'aui-debounce',
    'aui-loading-mask',
    'aui-node',
    'aui-viewport',
    'event',
    'node-event-simulate',
    'transition',
    function (A) {

      var carousels = A.all('.carousel');

      carousels.each(function(node){

        //a simple function to click next link
        //a timer will call this function, and the rotation will begin :)
        var buttons = A.Node.create('<div id="buttons"><menu></menu></div>');
        var next = A.Node.create('<li><a href="#" id="next">nextGen</a></li>');
        var prev = A.Node.create('<li><a href="#" id="prev">prevGen</a></li>');
        var pause = A.Node.create('<li><a href="#" id="pause">pause</a></li>');

        var html = A.one('html');
        var container = node.one('#slides');
        var itemList = container.one('ul');
        var menu = buttons.one('menu');
        var items = node.all('#slides li');
        var itemWidth = node.one('#slides li').get('offsetWidth');
        var totalItems = items.size();
        var index = 1;
        var autoplay = true;

        var left_value = (itemWidth * (-1));

        //rotation speed and timer
        var speed = 1000;
        var run = setInterval(function(){rotate()},speed);

        function setIndex(current, change){

          if (current >= totalItems && change > 0){
            index = 1;
          }else if (current <= 1 && change < 0 ) {
            index = totalItems;
          }else if (change > 0){
            index = current + (change);
          }else if(change < 0){
            index = current + (change);
          }
          items.toggleClass('active', false);
          items.item(index-1).toggleClass('active');

          menu.all('.link').toggleClass('active', false);
          menu.one('.menu-'+(index)).toggleClass('active');

        }

        var slide = function (direction) {
          var left_indent = left_value;
          if (direction == "prev") {
            setIndex(index, (-1));

            left_indent = 0;

          }else if(direction == "next") {
            setIndex(index, 1);
            left_indent = itemWidth * (-2);

          }
            itemList.transition({
                    easing: 'ease-in',
                    duration: .2, // seconds
                    left: left_indent + 'px'
                }, function () {
                  if (direction == "prev") {
                    itemList.prepend(itemList.one('li:last-child'));
                    left_indent = (itemWidth * (-1));
                    itemList.setStyle('left',left_indent);

                  }else if(direction == "next") {
                    itemList.append(itemList.one('li:first-child'));
                    left_indent = (itemWidth * (-1));
                    itemList.setStyle('left',left_indent);
                  }
               });
            //cancel the link behavior
            return false;
        }

        function rotate() {
            slide("next");
        }

        function interval(){
          if (autoplay == true){
            run = setInterval(function(){rotate(autoplay)},speed);
          }else if (autoplay == false) {
            clearInterval(run);
          }
        }

        var onClick = function(e){
          var clickedButton = e.currentTarget;
          e.preventDefault();

          if (clickedButton._node.id == "pause") {

            if (clickedButton.hasClass('play')) {
              autoplay = true;
              if (autoplay == true) {
                run = setInterval(
                  function() {
                    rotate(autoplay)
                  },
                  speed
                );
              }
              clickedButton.toggleClass('play');
            }
            else {
              autoplay = false;
              if (autoplay == false){
                clearInterval(run);
              }
              clickedButton.toggleClass('play');
            }
          }

          if (clickedButton._node.id == "prev") {
            throttleFn("prev");
          }

          if (clickedButton._node.id == "next") {
            throttleFn("next");
          }


          var location = parseInt(e.currentTarget.html());
            if (location > index) {
              var clicks = location - index;
              for (i = 1; i <= clicks; i++) {
                container.one('ul').append(container.one('ul').one(':first-child'));
                setIndex(index, (1));
              }
            } else if (location < index) {
              var clicks = index -location;
              for (i = 1; i <= clicks; i++) {
                container.one('ul').prepend(container.one('ul').one('li:last-child'));
                setIndex(index, (-1));

              }
            }else if (location == index){
              return false;
            }
        };

        //Responsive Layout Code

        var defaultViewportChangeFn = AUI().Viewport.viewportChange;

        var customViewportChangeFn = function() {
          defaultViewportChangeFn();
          console.log('screenChange');
          if (html.hasClass('aui-view-gt720')){
            node.setStyle('width', (itemWidth * 3 ) + 'px');
            container.setStyle('width', (itemWidth * 3) + 'px');

          }

          if (html.hasClass('aui-view-720')){
            node.setStyle('width', (itemWidth * 2) + 'px');
            container.setStyle('width', (itemWidth * 2) + 'px');
          }

          if (html.hasClass('aui-view-lt720')){
            node.setStyle('width', itemWidth + 'px');
            container.setStyle('width', itemWidth + 'px');
          }
        }


        // Init

        node.prepend(buttons);
        itemList.setStyle('width', itemWidth * totalItems);

        //Moves last item to front to prep for prev click
        itemList.prepend(itemList.one('li:last-child'));

        itemList.setStyle('left', left_value);

        // Run First Time
        customViewportChangeFn();

         // Creates Menu Items

        items.each(function(n, i){
          n.addClass('carousel-' + (i + 1));
          var menuLink = A.Node.create('<li><a href="#" class="link menu-' +(i + 1)+'"></a></li>');
          menuLink.one('a').html(i + 1);

          if (i + 1 == index){
            menuLink.one('a').toggleClass('active');
          }
          menu.append(menuLink);
        });

        menu.append(next);
        menu.prepend(prev);
        menu.prepend(pause);

        var throttleFn = A.throttle(function(direction) {

              slide(direction);

        }, 500);

        container.on(
          'mouseenter',
          function() {
            autoplay = false;
            if (autoplay == false) {
              clearInterval(run);
            }
          }
        );

        container.on(
          'mouseleave',
          function() {
            var paused = !A.one('#pause').hasClass('play');
            if (paused) {
              run = setInterval(
                function() {
                  rotate(autoplay)
                },
                speed
              );
            }
          }
        );

        // Delegates the click events for each of the menu items
        menu.delegate('click', onClick, 'a');


        AUI().getWin().on('resize', AUI().debounce(customViewportChangeFn, 50));

     });
    }
);
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................