startv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource
via CSS Lint

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource
via JS Hint

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Want a Run Button?

If active, the preview will update automatically when you change code.

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>
            
          
!

CSS

            
              @import "compass/css3";

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;
      }
    }
  }
}
            
          
!

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));

     });
    }
);
            
          
!
999px
Loading ..................

Console