cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

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

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div>
  <ul>
    <li class="pointer">
    <li><!-- Note that we're not closing these tags (yep, still HTML5 compliant), so that we don't get 4px white-space gaps between the inline blocks (or use another hack) -->
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
  </ul>
  <a class="button button-back">&lt;</a>
  <a class="button button-forward">&gt;</a>
</div>

<div class="description">
  <h3>"Spread of cards" responsive carousel layout 2.1</h3>
  <p><i>There is a bug with multiple "+" CSS selectors in Mac/iOS Safari 8.0 - it's fixed in nightly 10600.1.25.1, r175941, so the next version of iOS8.1 can't come fast enough!</i></p>
  <p><i>UPDATE 12/12/14: still not fixed in OSX Safari8.0.2 or iOS8.1.2, and still fixed in the webkit nightly. Come on Apple...</i></p>
  <p><i>UPDATE 19/1/15: nope - still no shipping fix for Safari. But... <a href="https://codepen.io/pixelthing/pen/OPmWrE">here's a variation</a> that <b>DOES</b> work around the Safari bug - even if it's built just slightly different.</i></p>
  <p>Fork of the <a href="https://codepen.io/pixelthing/pen/fbajl">spread of cards layout</a>, removing the calc() measurements in transitions to fix the animation in IE10+ (IE doesn't like mixing calc and transition). </p>
  <p>It's removed the gutters around the cards, but if you're not afraid of nesting more mark-up, that's easily solved with an element inslide the &lt;LI&gt;s.</p>
  <p>Now with CSS transform goodness to keep the animations smooth.</p>
  <hr>
  <p><i>From original codepen:</i></p>
    <p>If you really need a carousel, you need a responsive one.</p>
  <p>This demo is just an early test of a different sort of carousel layout. Generally you need javascript to be in control of the not only the events, but monitoring for viewport size changes, setting the size of the carousel and the position of the cards on and off canvas.</p>
  <p>The tricky bit is that the CSS - not the JS - is controlling the media queries and the basic layout. So why fight it with JS resize events and setting explicitly defined sizes? In this demo, JS only changes one thing in the DOM when you click left or right - it selects the next card that is the first visible one.</p>
  <p>Everything else is taken care of in CSS.</p>
  <p>1. It's not just one long (mostly off-canvas) strip, which still uses up compositing memory, even if it's not painted to the viewable screen. Instead, it uses a stack off cards left and right. Hopefully that means using less memory (depending on your browser).</p>
  <p>2. As a byproduct of the stacks offscreen, you get a neat animation.</p>
  <p>3. Because there are no floats or absolute positioning, the height of the overall carousel is controlled only by the content, containers don't need a complimentary fixed height to maintain shape.</p>
  <p>4. Design decisions like the width of the carousel, the cards and how many cards (across all screen sizes) are much easier to deal with in the stuff that defines them - the CSS. Not to mention the reduction in JS events fired by window resizing - and the jank that causes.</p>
  <p>5. This was originally built to work with an angular.js website (not like the jQ version here) and it suits that pattern as each card can have a ng-class directive and the controller just changes a value in the scope to activate the first card you want shown.</p>
</div>
            
          
!
            
              @import "compass/css3";

$card-width:       180px;

ul {
  white-space:    nowrap; /* allows the inline blocks to stick in a long line, not wrap like masonry. */
}
li {
  width:          $card-width;
  margin:         0;
  background:     #fc0;
  opacity:        0.1;
  @include transition( all 800ms, margin-left 0 );
}

/* ONE CARD WIDE */

div {
  width: $card-width;
}
li {
  margin-left: -100%; /* the bit that makes it all work. Each card has a default margin that makes it fold over itself, stacking them on top of each other */
}
.pointer {
  margin-left: 0;
  opacity: 1;
}

/* TWO CARDS WIDE */

@media (min-width: $card-width*3) and (max-width: ($card-width*4)-1px) {
  div {
    width: $card-width*2;
  }
  li {
    margin-left: -50%;
  }
  .pointer+li+li {
    margin-left: 50%;
  }
  .pointer+li {
    opacity: 1;
    @include translate(100%,0);
  }
}

/* THREE CARDS WIDE */

@media (min-width: $card-width*4) and (max-width: ($card-width*5)-1px) {
  div {
    width: $card-width*3;
  }
  li {
    margin-left: -33.333%;
  }
  .pointer+li+li+li {
    margin-left: 66%;
  }
  .pointer+li {
    opacity: 1;
    @include translate(100%,0);
  }
  .pointer+li+li {
    opacity: 1;
    @include translate(200%,0);
  }
}


/* FOUR CARDS WIDE */

@media (min-width: $card-width*5) {
  div {
    width: $card-width*4;
  }
  li {
    margin-left: -25%;
  }
  .pointer+li+li+li+li {
    margin-left: 75%;
  }
  .pointer+li {
    opacity: 1;
    @include translate(100%,0);
  }
  .pointer+li+li {
    opacity: 1;
    @include translate(200%,0);
  }
  .pointer+li+li+li {
    opacity: 1;
    @include translate(300%,0);
  }
}





/* not so interesting formatting */
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  max-width: 100%;
  overflow: hidden;
  background: #eee;
  font-family: sans-serif;
  font-size: 16px;
  color: #999;
}
div {
  position: relative;
  margin: 20px auto 0;
  padding: 0;
  background: #fff;
  box-shadow: inset 0 1px 1px 1px rgba(0,0,0,0.1);
  counter-reset: cards;
}
ul {
  margin: 0;
  padding: 0;
}
li {
  position: relative;
  display: inline-block;
  list-style: none;
  height: 250px;
  padding: 0;
  counter-increment: cards;
}
li:before {
  content: counter(cards);
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin-top: -0.5em;
  color: rgba(255,255,255,0.7);
  font-size: 120px;
  line-height: 1;
  text-align: center;
}
.pointer {
  box-shadow: inset 0 0 0 10px #fa0;
}
.pointer:after {
  content: '.pointer';
  display: block;
  position: absolute;
  top: 12px;
  left: 12px;
  color: #f90;
}
.button {
  position: absolute;
  left: -0.25em;
  top: 50%;
  width: 2em;
  height: 2em;
  margin-top: -1em;
  padding: 0.5em;
  color: #fff;
  background: #999;
  border-radius: 50%;
  line-height: 1;
  text-align: center;
  font-family: impact;
  cursor: pointer;
}
.button-forward {
  left: auto;
  right: -0.25em;
}
.description {
  padding: 10px 20px;
}
            
          
!
            
              /* 

An awfully unoptimised jQuery script  that isn't terribly interesting apart from that it's trying to make as few decisions as possible. 

For instance, it never directly controls any dimensions or positions, never explicitly says how many cards should be visible, or which ones are off to the left or the right. 

It deals with the clickevents, takes a measure of the current state to determine how many cards are in view, and moves the .pointer class forward or back (after checking it's within range).

*/

$('.button-forward').click(function() {
  slide('forward');
});
$('.button-back').click(function() {
  slide('backward');
});
var slide = function(direction) {
  var deckWidth = $('ul').outerWidth();
  var cardWidth = $('li').first().outerWidth();
  var cardsInSpread = deckWidth/cardWidth;
  var walking = $('.pointer');
  for (var i=0;i<cardsInSpread;i++) {
    if (direction=='backward' && !walking.is(':first-child')) {
      walking = walking.prev();
    } else if (direction=='forward') {
      walking = walking.next();
    }
  }
  if ( walking.length ) {
    $('.pointer').removeClass('pointer');
    walking.addClass('pointer');
  }
};

            
          
!
999px
Loading ..................

Console