Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ 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

Auto Save

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

              
                <div class="arrows prev"></div>

<div class="wrapper" id="wrapper">

  <p>I GOT A JOB!!!! My interviewer was super impressed by the skills I took the initiative to learn on my own. I was able to "talk the talk," so to speak, which was great! I feel confident going into my new role in just 2 weeks!
  </p>

  <p>My life has completely changed! All of my friends and family are so impressed, and it has brought a certain kind of confidence in my abilities not only as a "techie" but as a mom, and person in general that I could switch careers and understand and
    DO it. </p>

  <p>This quote is also inspirational!!!! Super inspirational! Because everything is awesome!</p>

  <ul class="dots-wrap">
    <li class="dot"></li>
    <li class="dot"></li>
    <li class="dot"></li>
  </ul>
  
</div>

<div class="arrows next"></div>
              
            
!

CSS

              
                body,
html {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  font-size: 100%;
  background: rgba(255, 99, 71, 0.82);
  font-family: Georgia, serif;
  /* lets the fonts look a bit better */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.wrapper {
  position: relative;
/* moves the wrapper up on y axis */
  transform: translateY(-50%);
  top: 50%;
  margin: 0 auto;
  width: 75%;
  overflow: hidden;
}

.wrapper p {
  position: absolute;
  left: 100%;
  width: 100%;
  font-size: 2em;
  color: #ffffff;
  top: 0;
  opacity: 0;
  transition: left 1.8s, opacity 0.5s ease;
}

.wrapper p.activeText {
  position: relative;
  left: 0;
  opacity: 1;
}

.wrapper p.slideLeft {
  left: -100%;
  opacity: 0.1;
}

.wrapper p:before {
  content: "\201C";
  font-size: 3em;
  line-height: 0.1em;
  margin-right: 0.1em;
  vertical-align: -0.4em;
}

.wrapper p:after {
  content: "\201D";
  font-size: 3em;
  line-height: 0.1em;
  margin-left: 0.1em;
  vertical-align: -0.45em;
}

ul {
  margin: 0;
  padding: 0;
  text-align: center;
}

ul li {
  list-style: none;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 100px;
  background: #7f8c8d;
  display: inline-block;
  text-align: center;
  cursor: pointer;
}

.active {
  background: #ecf0f1;
}

/* Arrows */

.arrows {
  color: rgba(127, 140, 141, 0.62);
  width: 1em;
  height: 1em;
  position: absolute;
  top: 50%;
  margin-top: -31px;
}

.prev {
  border-bottom: 6px solid;
  border-left: 6px solid;
  transform: rotate(45deg);
  left: 10px;
}

.next {
  border-bottom: 6px solid;
  border-left: 6px solid;
  transform: rotate(-135deg);
  right: 10px;
}

.prev:active, .next:active {
  color: white;
}

              
            
!

JS

              
                // shoutout to cassiecodes for this JS! Go team Skillcrush!
// SimpleSlider is an immediately invoked function expression (IIFE)
// It returns an object with public methods and properties that can be used to configure and control the slider without modifying the source code
// it obscures private functions and variables
const SimpleSlider = (function ($) {

  // initialize "global" variables
  let slider = {},
    $container,
    $slides,
    $prev,
    $next,
    $dots;

  // set slider config defaults
  slider.config = {
    slideDuration: 5000,
    auto: true,
    containerSelector: '#simpleSlider',
    slideSelector: 'p',
    prevArrowSelector: '.prev',
    nextArrowSelector: '.next',
    dotsSelector: '.dot'
  };

  // initialize slider with config
  slider.init = config => {
    // if config provided, merge it with default config
    if (config && typeof(config) == 'object') {
      $.extend(slider.config, config);
    }
    // get slider element
    $container = $(slider.config.containerSelector);
    // get slides
    $slides = $container.find(slider.config.slideSelector);
    // get prev button element
    $prev = $(slider.config.prevArrowSelector);
    // get next button element
    $next = $(slider.config.nextArrowSelector);
    // get dots container element
    $dots = $(slider.config.dotsSelector);
    // hook up prev button
    $prev.click(slider.prev);
    // hook up next button
    $next.click(slider.next);
    // hook up dots nav
    $dots.each( (i, dot) => {
      $(dot).click( () => {
        slider.setSlideByIndex($dots.index(dot));
      });
    });
    // activate first slide
    $($slides[0]).addClass('activeText');
    // activate first dot
    $($dots[0]).addClass('active');
    // Slide Automatically or Nah...
    if (slider.config.auto) autoNext();
  };

  // Slide Automatically
  // private function
  function autoNext() {
    setInterval(slider.next, slider.config.slideDuration);
  }

  // Navigate to next slide
  // public method
  slider.next = () => {
    // get active slide
    const activeSlide = $slides.filter('.activeText');
    // get active dot
    const activeDot = $dots.filter('.active');
    // get current index
    const currentIndex = $slides.index(activeSlide);
    // remove active class from active slide
    activeSlide.removeClass('activeText');
    activeDot.removeClass('active');
    // apply activeText class to next slide
    // if on last slide
    if (currentIndex === $slides.length -  1) {
      // make first slide active
      $($slides[0]).addClass('activeText');
      // make first dot active
      $($dots[0]).addClass('active');
    } else {
      // make next slide active
      $($slides[currentIndex + 1]).addClass('activeText');
      // make next slide dot
      $($dots[currentIndex + 1]).addClass('active');
    }
  };

  // Navigate to previous slide
  slider.prev = () => {
    // get active slide
    const activeSlide = $slides.filter('.activeText');
    // get active dot
    const activeDot = $dots.filter('.active');
    // get current index
    const currentIndex = $slides.index(activeSlide);
    // remove active class from active slide
    activeSlide.removeClass('activeText');
    activeDot.removeClass('active');
    // apply activeText class to next slide
    // handle when next slide is first slide
    if (currentIndex === 0) {
      // make last slide active
      $slides[$slides.length - 1].classList.add('activeText');
      // make last dot active
      $dots[$dots.length - 1].classList.add('active');
    } else {
      // make prev slide active
      $($slides[currentIndex - 1]).addClass('activeText');
      // make prev dot active
      $($dots[currentIndex - 1]).addClass('active');
    }
  };

  // Navigate to slide by index
  slider.setSlideByIndex = index => {
    // get active slide
    const activeSlide = $slides.filter('.activeText');
    // get active dot
    const activeDot = $dots.filter('.active');
    // remove active class from active slide & dot
    activeSlide.removeClass('activeText');
    activeDot.removeClass('active');
    // make slide at given index active
    $($slides[index]).addClass('activeText');
    // make slide at given index active
    $($dots[index]).addClass('active');
  };

  // return the slider object with public methods
  return slider;
}(jQuery)); //pass in any needed global variables


// This can also be placed in the HTML file inside a script tag. 
// Doesn't seem to want to work that way in Codepen
  SimpleSlider.init({
    containerSelector: "#wrapper", //default: "#simpleSlider"
    auto: false //default: true
  });
              
            
!
999px

Console