Slick Slider Carousel

HTML

<h2>Basic Slick Example</h2>
<p>This one is just using the default settings. <code>	$(".slider-one").slick();</code></p>
<div class='slider-one'>
<div class='slide slide-1'>some stuff</div>
<div class='slide slide-2'>some stuff</div>
<div class='slide slide-3'>some stuff</div>
</div>

<h2>Auto Slick Carousel</h2>
<p>Here we add some auto scrolling to the slider rather than it waiting for use input.</p>
<div class='slider-two'>
<div class='slide slide-1'>some stuff</div>
<div class='slide slide-2'>some stuff</div>
<div class='slide slide-3'>some stuff</div>
</div>

CSS

.slide {
width:100%;
height:300px;
background:#CCC;
color:#FFF;
text-align:center;
font-size:34px;
font-weight:bold;
padding-top:100px;
}
.slider-one,.slider-two,.slider-three {
margin-bottom:30px;
}
.slide-2 {
background:#EEE;
}
.slide-1 {
background:url(https://kruxor.com/images/pexels-photo-4389409.jpeg) center no-repeat;
background-size:cover;
}
.slide-2 {
background:url(https://kruxor.com/images/server-rack.jpg) center no-repeat;
background-size:cover;
}
.slide-3 {
background:url(https://kruxor.com/images/pexels-photo-709552.jpg) center no-repeat;
background-size:cover;
}

Scripts

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" integrity="sha256-UK1EiopXIL+KVhfbFa8xrmAWPeBjMVdvYMYkTAEv/HI=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" integrity="sha256-4hqlsNP9KM6+2eA8VUT0kk4RsMRTeS7QGHIM+MZ5sLY=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js" integrity="sha256-NXRS8qVcmZ3dOv3LziwznUHPegFhPZ1F/4inU7uC8h0=" crossorigin="anonymous"></script>

Javascript

$(document).ready(function(){
// slider one
	$(".slider-one").slick();

// slider two
$('.slider-two').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 2000,
  dots: true,
  arrows:true
});
});