I'm trying to improve my JS-based slideshow in two respects:

1. Using arrow keys to navigate works fine, but when I click on a bullet point to a specific slide then use an arrow key, the slides overlap. How can I fix this?
2. I would like the slides to auto-play. How might I make this work?

**([Example on jsFiddle](https://jsfiddle.net/gz7xebgz/4/).)**

```js
var main = function(){

 $('.arrow-next').click(function(){
  var currentSlide = $('.active-slide');
  var nextSlide = currentSlide.next();

  var currentDot = $('.active-dot');
  var nextDot = currentDot.next();

  if (nextSlide.length === 0) {
   nextSlide = $('.slide').first();
   nextDot = $('.dot').first();
  }

  currentSlide.fadeOut(500).removeClass('active-slide');
  nextSlide.fadeIn(500).addClass('active-slide');

  currentDot.removeClass('active-dot');
  nextDot.addClass('active-dot');
 });

 $('.arrow-prev').click(function(){
  var currentSlide = $('.active-slide');
  var prevSlide = currentSlide.prev();

  var currentDot = $('.active-dot');
  var prevDot = currentDot.prev();

  if(prevSlide.length === 0) {
        prevSlide = $('.slide').last();
       prevDot = $('.dot').last();
      }
      currentSlide.fadeOut(500).removeClass('active-slide');
      prevSlide.fadeIn(500).addClass('active-slide');

      currentDot.removeClass('active-dot');
      prevDot.addClass('active-dot');
 });

 $('.dot1').click(function(){
  $('.slide').hide();
  $('#slide1').show();
 });
 $('.dot2').click(function(){
  $('.slide').hide();
  $('#slide2').show();
 });
 $('.dot3').click(function(){
  $('.slide').hide();
  $('#slide3').show();
 });
 $('.dot4').click(function(){
  $('.slide').hide();
  $('#slide4').show();
 }); 
};

$(document).ready(main);
```

```css
body {
 display: block;
 margin:0;
}

header {
 background-color: skyblue;
 height: 125px;
}

header h1 {
background: url('../images/vball.png') no-repeat; 
background-size: 100px 100px;
float: left;
height: 100px;
overflow: hidden;
text-indent: 100%;
width: 170px;
}

/*digital clock*/
.time {
 float: left;
 font-size: 24px;
 font-family: cursive;
 height: 10px;
 margin-top: 10px;
 text-align: center;
 width: 150px;
}

#clock {
 background: purple;
 border-radius: 10px;
 border: 2px solid black;
 font: 24px bold;
 float: left;
 height: 60px;
 margin-left: -150px;
 margin-top: 40px;
 padding: 14px;
 width: 150px;
}

.menu ul {
 float:right;
 font-size: 20px;
 list-style: none;
 margin: 55px 15px;
 width: 750px;
}

.menu li {
 display: inline;
 padding: 15px 75px 10px;
}

/* slider for the home page*/
.slider {
 border-bottom: 1px solid black;
 height: 750px;
 position: relative;
 width: 100%;
}

.slide {
 background: transparent  url('../images/box-gradient.png') center center no-repeat;
 background-size: cover;
 bottom: 0;
 display: none;
 height: 150%;
 position: absolute;
 top: 0;
 width: 100%;
}

.slide {
 display: none;
 height: 100%;
 left: 0;
 position: absolute;
 top: 0;
 width: 100%;
}

.active-slide {
 display: block;
}

.slide-copy h1 {
 font-size: 40px;
 font-weight: 200px;
 margin-top: 100px;
 margin-left: 0px;
}

.slide-copy p {
 color: black;
 font-family: cursive;
 font-size: 22px;
 margin-top: 10px;
 margin-left: 5px;
}

.slide-copy-1 h1{
 color: #33cccc;
 font-size: 45px;
 margin-top: 100px;
 margin-left: 10px;
}

.slide-copy-1 p {
 color: #33cccc;
 font-size: 22px;
 font-family: cursive;
 margin-top: 25px;
 margin-left: 10px;
 width: 460px;
}

/* slide 1*/
.slide-bg {
 background: url('../images/sunset.jpg') center no-repeat;
 float: left;
 height: 750px;
}

/* slide 2*/
.slide-image {
 display: inline;
 padding-bottom: 10px;
 padding-top: 10px;
}

.imageList li{
 float: right;
 list-style: none;
 margin-bottom: 10px;
 margin-right: 10px;
 margin-left: 10px;
 width: 300px;
}

.imageList img {
 height: 300px;
 text-align: right;
 width: 300px;
}

.arrow-prev {
 display: inline-block;
 margin-left: 20px;
 margin-top: 10px;
 vertical-align: top;
}

.arrow-next {
 display: inline-block;
 margin-right: 20px;
 margin-top: 10px;
 vertical-align: top;
}

/*dot sliders*/
.slider-nav {
 text-align: center;
}

.slider-dot {
 display: inline-block;
 list-style: none;
 padding-right: 40px;
}

.slider-dot li {
 display: inline;
 color: #bbbcbc;
 font-size: 30px;
 margin-left: 3px;
 margin-right: 3px;
 padding: 10px;
}

.slider-dot li.active-dot {
 color:green;
}

li:hover { 
 color:green;
 cursor: pointer;
 cursor: hand;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header>
  <div class='container'>
   <h1 class='vb'>VBall</h1>
   <div class='time'></div>
   <div id='clock'></div>
   <nav class='menu'>
    <ul>
     <li>
      <a href="#">Home</a>
     </li>
     <li>
      <a href="#">Bio</a>
     </li>
     <li>
      <a href="#">Hobbies</a>
     </li>
     <li>
      <a href="#">Link</a>
     </li>
    </ul>
   </nav>
  </div>
 </header>
<div class='slider'>
 <div class='slide active-slide slide-bg' id='slide1'>
  <div class='container'>
   <div class='row'>
     <div class='slide-copy-1 col-xs-12'>
      <h1>Surrounding</h1>
      <p>Our lives are so hectic with everyday work, business and errands that we tend to never stop and take in our surrounding.  When was the last time you stop and enjoy a nice beatiful sunset?</p>
     </div>
   </div>
  </div>
 </div>
 <div class='slide' id='slide2'>
  <div class='container'>
   <div class='row'>
    <div class='slide-copy col-xs-5'>
    <h1>Get Moving And Motivated!</h1>
    <p>In a world where digital devices is so prominent, we get lost in them.  Our strength are that we are very adaptable but it can also be our greatest weakness. </p>
    </div>
      <div class='slide-image'>
     <!-- <ul class='imageList'>
       <li><a href='#'><img src="images/jog.jpg" /></a></li>
       <li><a href='#'><img src="images/health.png" /></a></li>
       <li><a href='#'><img src="images/motivated.jpg" /></a></li>
       <li><a href='#'><img src='images/possible.jpg' /></a></li>
      </ul> -->
     </div>
   </div>
  </div>
 </div>
 <div class='slide' id='slide3'>
  <div class='container'>
   <div class='row'>
    <div class='slide-copy col-xs-5'>
    <h1>Food Delight</h1>
    <p>We have all been there before!! Food is the best type of comfort.  Eating healthy is great but nothing can satisfied your soul more than your favorite rarities.</p>
    <img src="images/sushi.jpg" />
    <form>
     <textarea class="status-box" placeholder='What is your favorite food?'></textarea>
    </form>
    </div>
   </div>
  </div>
 </div>
 <div class='slide' id='slide4'>
  <div class='container'>
   <div class='row'>
    <div class='slide-copy col-xs-5'>
    <h1>Videos</h1>
    <p>Movies, TV shows and online video are play such a huge role in our culture.  Learning, Entertainment, Visual Satisfaction etc</p>
    <iframe src=""></iframe>
    </div>
   </div>
  </div>
 </div>
</div>
 <div class='slider-nav'>
  <a href='#' class='arrow-prev'><img src="images/arrow-prev.png"></a>
   <ul class='slider-dot'>
    <li class='dot dot1 active-dot'>&bull;</li>
    <li class='dot dot2'>&bull;</li>
    <li class='dot dot3'>&bull;</li>
    <li class='dot dot4'>&bull;</li>
   </ul>
  <a href="#" class='arrow-next'><img src="images/arrow-next.png"></a>
 </div>
```