In this example we will use slick slider because is fully responsive and is very customizable you can move arrows/dots when you need with built in functionality, or you can create your own html for arrows and so on.

Basically all you need to initialize the slick slider is the following line of code 

jQuery(element).slick();

There are a lot of settings you can use from slick slider such as: responsive (for every breakpoint you need), how many slides to show or to scroll, you can activate or dezactivate the swipe on mobile or drag on desktop, is fully customizable, I mean you can add your own effects when new slide comes.

In our example we will construct a basic slider with 3 slides.

We will use the following HTML structure:

<div class="main-slick-slider">
  <div class="item item1">
    <p>Slide 1<p>
  </div>
  <div class="item item2">
    <p>Slide 2<p>
  </div>
  <div class="item item3">
    <p>Slide 3<p>
  </div>
</div>

On the main-slick-slider we will initialize the slider. The slider will automatically create 3 slides because it has three direct childrens, if you need to target other class you can to this from slick settings.

CSS:

.main-slick-slider .item{
   height:400px;
   position:relative;
}
.main-slick-slider .item p{
   font-size:42px;
   position:absolute;
   left:50%;
   top:50%;
   transform:translateX(-50%) translateY(-50%);
}
.main-slick-slider .item1{background:#fff;}
.main-slick-slider .item2{background:#f2f2f2;}
.main-slick-slider .item3{background:#3b3b3b;}

It's all clear in our css we used there translateX and translateY a css3 declaration with which help to center vertically and horizontally the <p> element. In other words translateX pull the element half of its size to the left, and translateY pull the element half of its size to the top, because we used -50%.

jQuery:

jQuery('.main-slick-slider').slick({
   	slidesToShow:1,
   	slidesToScroll:1,
   	dots:true
});

We used here few settings of slider you can see the rest of them on their website.