Pen Settings

HTML

CSS

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.

+ add another resource

JavaScript

Babel includes JSX processing.

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.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <link href='//fonts.googleapis.com/css?family=Josefin+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

<div class="controls">
  <span class="controls__handle controls__handle--prev"></span>
  <span class="controls__handle controls__handle--next"></span>
</div>
  
<div class="slideshow">  
  <ul class="slideshow__pivot">
    <!-- //css-tricks.com/fighting-the-space-between-inline-block-elements/ -->
    <li class="slideshow__item">
    <li class="slideshow__item">
    <li class="slideshow__item">
    <li class="slideshow__item">
    <li class="slideshow__item">
    <li class="slideshow__item">
    <li class="slideshow__item">
    <li class="slideshow__item">
    <li class="slideshow__item">
    <li class="slideshow__item">
    <li class="slideshow__item">
    <li class="slideshow__item">
    <li class="slideshow__item">
  </ul>
</div>
              
            
!

CSS

              
                // ========================
// Simplified Media Query Mixin
// ========================

@mixin media($query) {
  @media screen and (min-width: $query) { 
    @content; 
  }
}


// ========================
// Modernizr
// ========================

// Modernizr mixin to create .modernizr selector
// https://codepen.io/sturobson/pen/xcdha

@mixin css($property, $support: true) {
    @if $support == true {
        .#{$property} & {
            @content;
        }
    }
    @else {
        .no-#{$property} & {
            @content;
        }
    }
}


// ========================
// Variables
// ========================

// Pick a color to make it hott
$page-bg: #94bc13;

// Placeholder just for this demo
// You never know how many slides the client will add @_@
$slide-count: 13 + 1;

// horizontal - default
// vertical
$slideshow-orientation: horizontal;

// Default slide transition speed
// This is applied to .slideshow__pivot
$slide-transition-speed: 1s;

// At what query should the slides be grouped in 1?
// Hey man mobile first
// At what query should the slides be grouped in 2?
$mq-duo: 40em;
// At what query should the slides be grouped in 3?
$mq-trio: 60em;
// At what query should the slides be grouped in 4?
$mq-quad: 80em;


// ========================
// Resets
// ========================

*,
*:before,
*:after {
  box-sizing: border-box;
  position: relative;
}
*:before,
*:after { 
  pointer-events: none; 
}


// ========================
// Structure
// ========================

html { 
  height: 100%;
  font-family: 'Josefin Sans';
  font-size: 10vw;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
  background: $page-bg; 
  color: rgba(#fff, .5);
  
  @include media($mq-duo) {
    font-size: 5.35vw;
  }
  @include media($mq-trio) {
    font-size: 5.15vw;
  }
  @include media($mq-quad) {
    font-size: 4.5vw;
  }
  
  &:before {
    position: absolute;
    top: 50%;
    right: 0;
    padding: 0 25% 1.5vw 0;
    width: 80%;
    content: 'The End';
    text-align: right;
    text-transform: none;
    border-bottom: .1vw solid rgba(#fff, .5);
    transform: translate(0, -50%);
  }
}
  
  body { 
    height: 100%;
  }


// ========================
// Presentation
// ========================

// Basic BEM-ing
// //www.alwaystwisted.com/post.php?s=2014-02-27-even-easier-bem-ing-with-sass-33
.slideshow {
  // Individual items within the slideshow
  &__item {
    @for $slideIndex from 1 to $slide-count {
      &:nth-child(#{$slideIndex}) { 
        background: 
          adjust-hue($page-bg, 10% * $slideIndex);
        
        &:hover {
          // Is it more appropriate to stack values like this?
          background: 
            adjust-color(
              $page-bg, 
              $hue: 10% * $slideIndex, 
              $lightness: .4% * $slideIndex);
        }
      }
    }
    
    &:before {
      position: absolute;
      top: 50%;
      left: 0;
      padding: 0 1vw 1.5vw;
      width: 100%;
      text-align: center;
      transform: translate(0, -50%);
    }
    
    &:nth-child(1) {
      &:before {
        content: 'Lettuce Begin';
        border-bottom: .02em solid rgba(#fff, .5);
      }
    }
    &:nth-child(2) {
      &:before {
        content: 'Feather Lover';
      }
    }
    &:nth-child(3) {
      &:before {
        content: 'Gold Friend';
      }
    }
    &:nth-child(4) {
      &:before {
        content: 'Cheeky Mama';
      }
    }
    &:nth-child(5) {
      &:before {
        content: 'Poppy Collars';
      }
    }
    &:nth-child(6) {
      &:before {
        content: 'Rockin Socks';
      }
    }
    &:nth-child(7) {
      &:before {
        content: 'Salty Rocks';
      }
    }
    &:nth-child(8) {
      &:before {
        content: 'Jumpin Hose';
      }
    }
    &:nth-child(9) {
      &:before {
        content: 'Swirly Butts';
      }
    }
    &:nth-child(10) {
      &:before {
        content: 'Hoppy Limes';
      }
    }
    &:nth-child(11) {
      &:before {
        content: 'Tooty Booty';
      }
    }
    &:nth-child(12) {
      &:before {
        content: 'Curly Cuties';
      }
    }
    &:nth-child(13) {
      &:before {
        content: 'Lovin Hubbin';
        border-bottom: .02em solid rgba(#fff, .5);
        @include media($mq-duo) {
          border-bottom: 0;
        }
      }
    }
    &:nth-child(14) {
      &:before {
        content: 'Choco Poyo';
      }
    }
    &:nth-child(15) {
      &:before {
        content: 'Ravin Dobes';
      }
    }
    &:nth-child(16) {
      &:before {
        content: 'Swivel Lady';
      }
    }
  }
}


// ========================
// Slideshow
// ========================

.slideshow {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  
  // This is the container that will shift positions with each control click
  // By shifting the parent container you can move it's children regardless of their width
  &__pivot {
    margin: 0;
    padding: 0;
    white-space: nowrap;
    list-style: none;
    // I wonder how far autoprefixer goes here
    // //cubic-bezier.com/#.38,-0.29,.53,1.27
    transition: 
      left $slide-transition-speed,
      transform $slide-transition-speed cubic-bezier(.38, -0.29, .53, 1.27);
    
    @if $slideshow-orientation == vertical {
      height: 100vh;
    }
    
    // For vertical slideshow orientation
    &:after {
      clear: both;
      content: '';
      display: table;
    }
    
    @for $pivotPoint from 1 to 30 {
      @if $slideshow-orientation == horizontal {
        &.transform-to-set-#{$pivotPoint} { 
          // Let's say the browser supports 2d transformations
          @include css(csstransforms) {
            transform: translate(-100% * $pivotPoint, 0);
          }
          // If they do && they support 3d
          // Let's overwrite the 2d transformation with a 3d one
          @include css(csstransforms3d) {
            transform: translate3d(-100% * $pivotPoint, 0, 0);
          }
          // If they don't support either just use the left property
          @include css(csstransforms, false) {
            left: -100% * $pivotPoint;
          }
        }
      }
      @else if $slideshow-orientation == vertical {
        &.transform-to-set-#{$pivotPoint} { 
          // Let's say the browser supports 2d transformations
          @include css(csstransforms) {
            transform: translate(0, -100% * $pivotPoint);
          }
          // If they do && they support 3d
          // Let's overwrite the 2d transformation with a 3d one
          @include css(csstransforms3d) {
            transform: translate3d(0, -100% * $pivotPoint, 0);
          }
          // If they don't support either just use the left property
          @include css(csstransforms, false) {
            top: -100% * $pivotPoint;
          }
        }
      }
    }
  }
  
    // Individual items within the slideshow
    &__item {  
      padding: 0;
      min-height: 100vh;
      width: 100%;
      white-space: normal;
      transform: scale(1);
      transition:
        background .3s,
        transform .3s;
      
      @if $slideshow-orientation == horizontal {
        // Why does display inline-block && height 100vh cause a scrollbar?
        display: inline-block;
        // Spacing from display inline-block was removed
        // //css-tricks.com/fighting-the-space-between-inline-block-elements/
        margin: 0 0 -.25em;
      }
      @else if $slideshow-orientation == vertical {
        float: left;
        margin: 0;
      }

      // Float 2 items next to each other
      @include media($mq-duo) {
        width: 50%;
      }

      // Float 3 items next to eachother
      @include media($mq-trio) {
        width: 33.33%;
      }

      // Float 3 items next to eachother
      @include media($mq-quad) {
        width: 25%;
      }
      
      &:hover {
        transform: scale(1.2);
      }
    }
}


// ========================
// Slideshow Controls
// ========================

.controls {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 20;
  overflow: hidden;
  height: 30%;
  width: 100%;
  pointer-events: none;
  
  &__handle { 
    position: absolute;
    width: 50%;
    height: 100%;
    cursor: pointer;
    pointer-events: auto;
    transform: scale(1);
    transition:
      transform .3s;
    
    &:before {
      position: absolute;
      top: 50%;
      display: block;
      z-index: 40;
      font-family: 'FontAwesome';
      line-height: 1;
      text-align: center;
    }
    
    &:hover {
      transform: scale(1.35);
    }
  }
  
  &__handle--prev {
    left: 0;

    &:before {
      left: 50%;
      transform: translate(-50%, -50%);
      
      @if $slideshow-orientation == horizontal {
        content: '\f104';
      }
      @else if $slideshow-orientation == vertical {
        content: '\f106';
      }
    }
  }
  
  &__handle--next {
    right: 0;

    &:before {
      right: 50%;
      transform: translate(50%, -50%);
      
      @if $slideshow-orientation == horizontal {
        content: '\f105';
      }
      @else if $slideshow-orientation == vertical {
        content: '\f107';
      }
    }
  }
}
              
            
!

JS

              
                // =================================================
// Global Variables
// =================================================

// What's each slide called?
var $slide = $('.slideshow__item');
var slideCount = $slide.length;

// Which element is controlling the slideshow?
var $control = $('.controls__handle');
// What are the modifier names of previous and next?
var $controlPrev = $('.controls__handle--prev');
var $controlNext = $('.controls__handle--next');

// What is the pivot container called?
// Ideally this is the ul inside of a container
var $pivotContainer = $('.slideshow__pivot');
var currentPivot = 1;
var activeClassIteration = 'transform-to-set-';


// =================================================
// Controller Events
// =================================================

// Set's an interval to click on the handle--next control
setInterval('continueOnwards()', 12000);

// When the user clicks on the next control handle
$controlPrev.click(function() {
  
  // If the current pivot == 1
  // That means the pivot should not transform any further
  if (currentPivot == 1) {
    // Remove the last pivot point class
    $pivotContainer.removeClass(activeClassIteration + currentPivot);
  }
  else {
    // Decrease the current pivot position by 1
    currentPivot = currentPivot - 1;
    
    // Remove the last pivot point class
    $pivotContainer.removeClass(activeClassIteration + currentPivot);
  }
  
});


// When the user clicks on the next control handle
$controlNext.click(function() {
  
  // If the current pivot == 1
  // That means the pivot should not transform any further
  if (currentPivot == slideCount) {
    
  }
  else {
    // Add a class to the pivot container
    $pivotContainer.addClass(activeClassIteration + currentPivot);
    
    // Move to the next pivot point
    currentPivot = currentPivot + 1;
  }
  
});


// =================================================
// Changes at different media queries
// =================================================

// //wicky.nillia.ms/enquire.js/
enquire
  .register("screen and (max-width: 39.9375em)", { 
    match : function() {
      setsOf(1);
    }
  })
  // At what media query should the slides be grouped in 2?
  .register("screen and (min-width: 40em)", { 
    match : function() {
      setsOf(2);
    }
  })
  // At what media query should the slides be grouped in 3?
  .register("screen and (min-width: 60em)", { 
    match : function() {
      setsOf(3);
    },
    unmatch: function() {
      setsOf(2);
    }
  })
  // At what query should the slides be grouped in 4?
  .register("screen and (min-width: 80em)", {
    match : function() {
      setsOf(4);
    },
    unmatch: function() {
      setsOf(3);
    }
  }, true);


// Find out how many sets you should have given the items in each set
function setsOf($set) {
  // Create a local variable
  $groups = $set;
  
  // Report the number of items in each group
  console.log('set-of-' + $groups);
  // Reset the count of slides
  slideCount = $slide.length;
  // Create a variable representing the number of groups
  slideCount = slideCount / $groups;
  // Round that up yo!
  // If you ever round down you might be hiding content
  slideCount = Math.ceil(slideCount);
  // Report the number of groups
  console.log('pivot-count-' + slideCount);
  
  // Reset the pivot
  currentPivot = 1;
  $pivotContainer.attr('class', 'slideshow__pivot');
}

function continueOnwards() {
    $('.controls__handle--next').trigger('click');
}
              
            
!
999px

Console