<h1 class="project-title">Fully customizable slider </h1>
	<div class="slider">
	  <div class="slide">
	    <h2 class="slide-title">Lorem ipsum</h2>
	    <p class="slide-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam.
	  </div>
	  <div class="slide">
	    <h2 class="slide-title">Lorem ipsum 2</h2>
	    <p class="slide-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam.</p>
	  </div>
	  <div class="slide">
	    <h2 class="slide-title">Lorem ipsum 3</h2>
	    <p class="slide-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam.
	  </div>
	  <button class="arrow prev"><</button>
	  <button class="arrow next">></button>
		<ul class="slide-nav"></ul>
 </div>

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.project-title {
  color: #ff686b;
  font-size: 50px;
	margin: 40px 0;
  text-align: center;
  text-transform: uppercase;
}
.slider {
  background: #000;
  height: 400px;
  position: relative;
  text-align: center;
  width: 100%;
}
.arrow {
  background: black;
  border: none;
  border-radius: 10%;
  color: white;
  cursor: pointer;
  display: none;
  opacity: .4;
  padding: 10px;
  position: absolute;
  text-transform: uppercase;
  -webkit-transition: .2s;
	top: 50%;
  transition: .2s;
}
.arrow:hover {
  opacity: .8;
}
.arrow.next {
  right: 2%
}
.arrow.prev {
  left: 2%;
}
.slide {
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
  height: 100%;
  padding: 90px 0 0;
  position: absolute;
  width: 100%;
}
.slide-title {
  font-size: 40px;
  font-weight: bold;
  margin: 0 auto;
  padding: 15px 0;
  text-transform: uppercase;
}
.slide-desc {
  font-size: 20px;
  margin: 40px auto 0;
  width: 65%;
}
.slide-image,
.slide-image img{
  height: 100%;
  width: 100%;
}
.slide:first-of-type {
  background-image: url("https://images.pexels.com/photos/40120/pexels-photo-40120.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb");
}
.slide:nth-of-type(2) {
  background-image: url("https://images.pexels.com/photos/288477/pexels-photo-288477.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb");
}
.slide:last-of-type {
  background-image: url("https://images.pexels.com/photos/27665/pexels-photo-27665.jpg?w=1260&h=750&auto=compress&cs=tinysrgb");
}
.active {
  display: block;
}
.slide-nav {
  bottom: 30px;
	position: absolute;
   width: 100%;
}
.nav-item {
  background: #fff;
  border: 2px solid #ff686b;
  cursor: pointer;
  display: inline-block;
  margin-right: 20px;
  transition: background .4s;
}
.nav-item:last-of-type {
  margin-right: 0;
}
.nav-item:hover {
  transform: scale(1.3);
}
.item-active {
  background: #ff686b;
  transform: scale(1.3);
}
.dot {
  border-radius: 50%;
}
.dot,
.square{
  height: 15px;
	width: 15px;
}
.rectangle {
  height: 15px;
  width: 30px;
}

// Slider configuration
var config = {
  speed: 3000,
  auto: true, // true or false
  arrows: true, // true or false
  nav: true, // true or false
  navStyle: 'default' // square,rectangle, default
};

// Slider core
var slides = $('.slide');
var totalSlides = slides.length;
var currentIndex = 0;

function setSlides() {
  var currentSlide = slides.eq(currentIndex);
  slides.hide();
  currentSlide.fadeIn(1500);
};
setSlides();

// autoplay
if (config.auto) {
  var autoSlide = setInterval(function() {
    currentIndex += 1;
    if (currentIndex > totalSlides - 1) {
      currentIndex = 0;
    }
    setSlides();
    navigation();
  }, config.speed);
};

// navigation arrows
if (config.arrows) {
  $('.arrow').addClass('active');
  $('.prev').click(function() {
    clearInterval(autoSlide);
    currentIndex -= 1;
    if (currentIndex < 0) {
      currentIndex = totalSlides - 1;
    }
    navigation();
    setSlides();
  });
  $('.next').click(function() {
    clearInterval(autoSlide);
    currentIndex += 1;
    if (currentIndex > totalSlides - 1) {
      currentIndex = 0;
    }
    navigation();
    setSlides();
  });
};

// navigation
if (config.nav) {
	for (i = 0; i < slides.length; i+=1) {
  	$('<li/>').attr( {'class': 'nav-item','id': i}).appendTo('.slide-nav');
	};
  $('.nav-item').first().addClass('item-active');
  switch(config.navStyle) { // navigation style
    case 'square':
        $('.nav-item').addClass('square');
        break;
    case 'rectangle':
        $('.nav-item').addClass('rectangle');
        break;
    default:
        $('.nav-item').addClass('dot');
  };
  function navigation() {
    $('.nav-item').removeClass('item-active');
    $('.nav-item').eq(currentIndex).addClass('item-active');
  };
	$('.nav-item').click(function() {
  	clearInterval(autoSlide);
  	var navNumb =  $(this).attr('id');
  	currentIndex = navNumb;
  	navigation();
  	setSlides();
  });
};