<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section class="slider"> <div class="frst">slide-0</div> <div class="scnd">slide-1</div> <div class="thrd">slide-2</div> <div class="frth">slide-3</div> <div class="frst">slide-4</div> <div class="thrd">slide-5</div> </section> <span class="pagingInfo"></span>

.frst{ background: #3a8999; } .scnd{ background: #e84a69; } .thrd{ background: #980505; } .frth{ background: #094602; } .slider { width: auto; margin: 30px 50px 50px; } .slick-slide { color: white; padding: 40px 0; font-size: 30px; font-family: "Arial", "Helvetica"; text-align: center; } .slick-prev:before, .slick-next:before { color: black; } .slick-dots { bottom: -30px; } a.dot{ padding:10px 10px; } a.dot:hover{ background:#ddd; }

jQuery('.slider').slick({ dots: true, customPaging : function(slider, i) { var thumb = jQuery(slider.$slides[i]).data(); // return '<a>'+(i+1)+'</a>'; // <-- old return '<a>'+('0'+(i+1)).slice(-2)+'</a>'; // <-- new } });