• HTML
• CSS
• JS

HTML

<div  class="container">
    <div class="container-slider">
        
        <ul class="slider">
            
            <li>
               <img src="https://compositu.com/template/web/img/extra/modal_3.png" alt="">
            </li>
            <li>
              <img src="https://compositu.com/template/web/img/extra/modal_1.png" alt="">
            </li>
            <li>
                <img src="https://compositu.com/template/web/img/extra/modal_2.png" alt="">
            </li>
        </ul>
        
        <ul class="pagination">
            <li></li>
            <li></li>
            <li></li>
        </ul>
        
    </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;
}
.pagination li{
    margin:0px 6px;
    padding:7px;
    display:block;
    border-radius:50%;
    background:#eaeded;
    cursor:pointer;
}

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

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

JS

$(function(){
    
    $('.pagination li:first').css({'background':'#3498db'});

    $('.pagination li').click(pagination);
    

    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'});
    }
    
});