Simple Slider with text and button

This is responsive!

by cintia_rodrigues

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="slider">
    <div class="slider-content">
        <div><img src="https://placeimg.com/400/200/people"/></div>
        <div><img src="https://placeimg.com/400/200/any"/></div>
        <div><img src="https://placeimg.com/400/200/nature"/></div>
        <div><img src="https://placeimg.com/400/200/architecture"/></div>


    </div>


    <div class="buttons">
          <div class="prev">
            <i class="fa fa-arrow-left" aria-hidden="true"></i>
          </div>
          <div class="next">
            <i class="fa fa-arrow-right" aria-hidden="true"></i>
          </div>
      </div>

</div>

<div class="explanation">
  Building a slideshow like pattern that can accurately cycle through a number of unknown divs, forwards and backwards. Trying to use as little code as possible. Leave a comment if you see a way to do it better!
</div>

CSS

.slider {
    width: 100%;
    font-size: 1em;
    margin: 0 auto;
    margin-top: 1em;
    position: relative;
    background-color:purple;
}

.slider-content {
  max-width: 100%;
  background-color: black;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

.slider-content div {
  background-color: white;
  width: 100%;
  display: inline-block;
  display: none;
}

.slider-content img {
  width: 100%;
  height: auto;
}

.buttons{
  width:100%;
  height:auto;
  background-color:transparent;
  text-align:center;
  position: absolute;
  bottom:0;
}

    .buttons .prev, .next{
      height:auto;
      background-color:black;
      width:5%;
      text-align:center;
      display:inline-block; 
      color:white;
    }
    
    
    .explanation {
      max-width: 800px;
      margin: 0 auto;
      margin-top: 2em;
      padding-top: 1em;
    }

JavaScript

var currentIndex = 0,
  items = $('.slider-content div'),
  itemAmt = items.length;

function cycleItems() {
  var item = $('.slider-content div').eq(currentIndex);
  items.hide();
  item.css('display','inline-block');
}

var autoSlide = setInterval(function() {
  currentIndex += 1;
  if (currentIndex > itemAmt - 1) {
    currentIndex = 0;
  }
  cycleItems();
}, 3000);

$('.next').click(function() {
  clearInterval(autoSlide);
  currentIndex += 1;
  if (currentIndex > itemAmt - 1) {
    currentIndex = 0;
  }
  cycleItems();
});

$('.prev').click(function() {
  clearInterval(autoSlide);
  currentIndex -= 1;
  if (currentIndex < 0) {
    currentIndex = itemAmt - 1;
  }
  cycleItems();
});