123

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.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <link href='//fonts.googleapis.com/css?family=Oswald:300' 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="prev"></span>
  <span class="next"></span>
</div>

<div class="pager">
</div>
  
<ul class="slideshow">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
  
  
  <div id="show"><i class="fa fa-bars fa-fw fa-2x"></i>
</div>
            
          
!
            
              // Notes
// - Each slide must have the same height
//   * Personal note, can there be a subtle way to transition elements of diff height?
// - A Slide transition must be set
//   * Personal note, add fade?
// - The slideshow active variable should match the active setting within the js call 

// =================================================
// 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;
        }
    }
}


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

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


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

html { 
  height: 100%;
  font-family: 'Oswald';
  background: #46629E; 
  }
  body { 
    height: 100%;
    min-height: 100%;
    margin: 0; 
  }


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

.slideshow {
  li {
    &:before {
      position: absolute;
      top: 50%;
      left: 50%;
      font-size: 15vw;
      color: rgba(#fff, .5);
      text-transform: uppercase;
      transform: translate(-50%, -50%);
    }
    &:nth-child(1) { 
      background: #291f37; 
    	  &:before {
        content: 'One';
      }
    }
    &:nth-child(2) { 
      background: #2c929b; 
    	  &:before {
        content: 'Two';
      }
    }
    &:nth-child(3) { 
      background: #66cf33; 
    	  &:before {
        content: 'Three';
      }
    }
    &:nth-child(4) { 
      background: #cf3358; 
    	  &:before {
        content: 'Four';
      }
    }
  }
}


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

// Possible transitions
// - slide
// - drop
$slide-transition: slide;
$slide-active-class: active;

.slideshow {
  margin: 0;
  padding: 0;
  overflow: hidden;
  li { 
    position: absolute;
    top: 0;
    left: 0; 
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    line-height: 0;
    transition: 1s;
    
    min-height: 100vh;
    // Move the all slides out view to the right
    @if $slide-transition == slide {
      @include css(csstransforms3d) {
        transform: translate3d(100%, 0, 0);
      }
      @include css(csstransforms3d, false) {
        transform: translate(100%);
      }
      @include css(csstransforms, false) {
        left: 100%;
      }
    }
    // Move the all slides out view to the bottom
    @else if $slide-transition == drop {
      @include css(csstransforms3d) {
        transform: translate3d(0, 100%, 0);
      }
      @include css(csstransforms3d, false) {
        transform: translate(100%);
      }
      @include css(csstransforms, false) {
        top: 100%;
      }
    }
    &:nth-child(even) {
      // Move the even slides out of view to the left
      @if $slide-transition == slide {
        @include css(csstransforms3d) {
          transform: translate3d(-100%, 0, 0);
        }
        @include css(csstransforms3d, false) {
          transform: translate(-100%);
        }
        @include css(csstransforms, false) {
          left: -100%;
        }
      }
      // Move the even slides out of view to the top
      @else if $slide-transition == drop {
        @include css(csstransforms3d) {
          transform: translate3d(0, -100%, 0);
        }
        @include css(csstransforms3d, false) {
          transform: translate(-100%);
        }
        @include css(csstransforms, false) {
          top: -100%;
        }
      }
    }
    &.#{$slide-active-class} {
      position: relative;
      @include css(csstransforms3d) {
        transform: translate3d(0, 0, 0);
      }
      @include css(csstransforms3d, false) {
        transform: translate(0);
      }
      @if $slide-transition == slide {
        @include css(csstransforms, false) {
          left: 0;
        }
      }
      @else if $slide-transition == drop {
        @include css(csstransforms, false) {
          top: 0;
        }
      }
    }
  }
    img { width: 100%; }
}


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

$control-color: #fff;
$circumference: 10em;

.controls {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  z-index: 20;
  pointer-events: none;
  span { 
    position: absolute;
    width: 15%;
    height: 100%;
    margin: 0 1%;
    cursor: pointer;
    pointer-events: auto;
    &:before {
      position: absolute;
      top: 50%;
      display: block;
      z-index: 40;
      font-family: 'FontAwesome';
      font-size: 6em;
      font-size: 6vw;
      line-height: 1;
      text-align: center;
      color: $control-color;
      color: rgba($control-color, .75);
    }
    &:after {
      position: absolute;
      top: 50%;
      content: '';
      width: $circumference;
      height: $circumference;
      border: .2em solid transparent;
      border: .2vw solid transparent;
      -webkit-border-radius: 100%;
      border-radius: 100%;
      transition: .3s;
    }
    &.prev{
      left: 5%;
      &:after,
      &:before {
        left: 50%;
        transform: translate(-50%, -50%);
      }
      &:after { }
      &:before { content: '\f104'; }
    }
    &.next {
      right: 5%;
      &:after,
      &:before {
        right: 50%;
        transform: translate(50%, -50%);
      }
      &:after { }
      &:before { content: '\f105'; }
    }

    &:hover {
      &:after {
        border: .5em solid rgba($control-color, .75);
        border: .5vw solid rgba($control-color, .75);
      }
    }
  }
}


// =================================================
// Slideshow Pager
// =================================================

.pager {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
  display: block;
  width: 100%;
  font-size: 1.5em;
  text-align: center;
  a {
    border: .1em solid rgba(#fff, .75);
    -webkit-border-radius: 100%;
    border-radius: 100%;
    display: inline-block;
    height: 1em;
    width: 1em;
    margin: 1% .5%;
    transition: .3s;
    &:before {
      background: rgba(#fff, .75);
      -webkit-border-radius: 100%;
      border-radius: 100%;
      content: '';
      height: 100%;
      width: 100%;
      opacity: 0;
      pointer-events: none;
      position: absolute;
      top: 0;
      left: 0;
      transition: .3s;
     }
    
    &:hover {
      box-shadow: inset 0 -.2em 0 0 rgba(#fff, .75);
    }
    
    &.active {
      background: rgba(#fff, .75);
    }
   }
}




#show {background-color:rgb(246,252,255);width:40px;height:32px; position:fixed;top:0px;right:0px;
color: #0ea4fc ; text-align:center;
  padding-top:6px; border:2px solid #0ea4fc ; border-radius:10px;z-index:999; }


            
          
!
            
              // notes for the futures
// set defaults to the elements i'm passing in

//github.com/abrad45/jquery.group.js/blob/master/jquery.group.js

//github.com/jquery-boilerplate/jquery-boilerplate
// for structure of a plugin, think about chaining
// line 27

// data type of jquery
// var string = 'something.class';
// var $elem = $('something.class');
 
// make things more optional like prev and next
// $('elem').sonicSlide({'prev': '#elem .prev'});

// Currently pager does not work with more than 1 active slide
sonicSlide('.controls', '.slideshow li', 1, 'active');

function sonicSlide(listController, listElement, listActiveStep, listActiveClass) {
  // Controller - What's the container called that container prev and next?
  // Element - Which element are you going to cycle?
  // ActiveStep - How many elements do you want to cycle at a time?
  // ActiveClass - What should the active class be called?
  var controller = listController;
    var controllerElement = controller + ' span';
    var prev = controller + ' .prev';
    var next = controller + ' .next';
  var element = listElement;
    var slideCount = $(listElement).parent().children().length;
  var activeStep = listActiveStep;
  var activeClass = listActiveClass;
    var activeElement = element + '.' + activeClass;

  // listLength - Find the length of the list
  // lastSet - I'm not sure
  var listLength = $(element).length;
  var lastSet = listLength - activeStep;

  // Utilize first and last child classes
  $(element + ':first-child').addClass('first-child');
  $(element + ':last-child').addClass('last-child');

  // For all the elements in the array
  // Add a class of active to each one until x <= activeStep
  // This makes sure there are active slides on page load
  for(var x = 0; x <= activeStep; x++) {
    $(element + ':nth-child(' + x + ')').addClass(activeClass);
  }

  // Setup Pager items
  for (var y = 0; y < slideCount; y++) {
    $('.pager').append('<a href="#"></a>');
  }
  // Add active class to the pager item with the current slide's index
  $('.pager a:nth-child(1)').addClass(activeClass);
  
  // When the user clicks to view the previous slide
  $(prev).click(function() {
    // If one of the active elements has a class of first-child
    if($(activeElement).hasClass('first-child')) {
      $(activeElement)
        .removeClass(activeClass);
      $(element)
        .slice(lastSet, listLength)
        .addClass(activeClass);
    }
    
    else {
      $(activeElement)
        .removeClass(activeClass)
        .prevAll()
        .slice(0, activeStep)
        .addClass(activeClass);
    }
  });
  
  // When the user clicks to view the next slide
  $(next).click(function() {
    // If one of the active elements has a class of last-child
    if($(activeElement).hasClass('last-child')) {
      $(activeElement)
        .removeClass(activeClass);
      $(element)
        .slice(0, activeStep)
        .addClass(activeClass);
    }
    
    else {
      $(activeElement)
        .removeClass(activeClass)
        .nextAll()
        .slice(0, activeStep)
        .addClass(activeClass);
    }
  });
  
  $(controllerElement).click(function() {
    // Find the index of the active slide
    var slideIndex = $(activeElement).index() + 1;
    
    // Remove the activeClass from all pager items
    $('.pager a').removeClass(activeClass);
    
    // Add active class to the pager item with the current slide's index
    $('.pager a:nth-child(' + slideIndex + ')').addClass(activeClass);
  });
  
  $('.pager a').click(function() {
    // Find the index of the pager item that was clicked on
    var slideIndex = $(this).index() + 1;
    
    // Remove the activeClass from all pager items
    $('.pager a').removeClass(activeClass);
    // Add a class to the current pager item
    $(this).addClass(activeClass);
    // Remove the activeClass from all slides
    $(activeElement).removeClass(activeClass);
    
    // Add active class to the slide with the current pager item's index
    $(listElement + ':nth-child(' + slideIndex + ')').addClass(activeClass);
  });
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console