• HTML
• CSS
• JS

HTML

<div class="container-slider">
    <ul class="slider">
        <li>
              <img src="https://compositu.com/template/web/img/extra/modal_2.png" alt="">
           
            <div class="description">
                <h1>Título 1</h1>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore.
                </p>
            </div>
        </li>
        <li>
           <img src="https://compositu.com/template/web/img/extra/modal_1.png" alt="">
            <div class="description">
                <h1>Título 2</h1>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore.
                </p>
            </div>
        </li>
        <li>
            <img src="https://compositu.com/template/web/img/extra/modal_3.png" alt="">
            <div class="description">
                <h1>Título 3</h1>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore.
                </p>
            </div>
        </li>
    </ul>
    
    <ul class="pagination">
        <li></li>
        <li></li>
        <li></li>
    </ul>
    
    <div class="left">
        <span class=" icon-left-open-2"></span>
    </div>
    
    <div class="right">
        <span class=" icon-right-open-2"></span>
    </div>
    
</div>

CSS

*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

body{
    font-family:sans-serif;
    background:#34495e;
}

ul {
    list-style:none;
}

.container-slider{
    width:100%;
    height:100%;
    position:relative;
}
.slider li{
    display:none;
}
.slider li img{
    width:100%;
    height:200px;
}
.slider li:nth-child(1){
    display:block;
}
.pagination{
    width:100%;
    position:absolute;
    left:0;
    bottom:14px;
    
    display:flex;
    justify-content:center;
    z-index:2;
}
.pagination li{
    margin:0px 6px;
    padding:7px;
    display:block;
    border-radius:50%;
    background:#eaeded;
    cursor:pointer;
}
.description{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    padding:0px 10px;
    
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    
    text-align:center;
    color:#17202a;
    z-index:1;
}
.description h1{
    background:#34495e;
    color:#fff;
    padding:7px 10px;
    border-radius:3px;
    margin-bottom:4px;
}
.description p{
    display:none;
}
.left,.right{
    position:absolute;
    top:0;
    height:100%;
    
    display:flex;
    align-items:center;
    color:#3498db;
    font-size:30px;
    z-index:2;
    cursor:pointer;
}
.left{
    left:10px;
}
.right{
    right:10px;
}

@media screen and (min-width:600px){
    .slider li img{
        height:400px;
    }
    .description p{
        display:block;
    }
}

@media screen and (min-width:900px){
    .slider li img{
        height:550px;
    }
}

JS

$(function(){
    
    var imgItems = $('.slider li').length;
    var imgPos   = 1;
    
    $('.pagination li:first').css({'background':'#3498db'});

    $('.pagination li').click(pagination);
    $('.right').click(nextSlider);
    $('.left').click(prevSlider);
    

    function pagination(){
        var paginationPos = $(this).index()+1;
        
        $('.slider li').hide();
        $('.slider li:nth-child('+paginationPos+')').fadeIn();
        
        $('.pagination li').css({'background':'#eaeded'});
        $(this).css({'background':'#3498db'});
    }
    
    function nextSlider(){
        if(imgPos >= imgItems)
            imgPos = 1;
        else 
            imgPos++;
        view(imgPos);
    }
    
    function prevSlider(){
        if(imgPos <= 1)
            imgPos = imgItems;
        else
            imgPos--;
        view(imgPos);
        
        
    }
    
    function view(){
        
        $('.slider li').hide();
        $('.slider li:nth-child('+imgPos+')').fadeIn();
        
        $('.pagination li').css({'background':'#eaeded'});
        $('.pagination li:nth-child('+imgPos+')').css({'background':'#3498db'});
        
    }
    
});