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

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

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