CL226

I need the code to add the dot under my slide, what should I add in? Here is my code: <style> .slick-prev, .slick-next { width: 30px !important; height: 30px !important; } .autoplay .slick-prev { position: absolute; top: 110%; left: 44%; right: auto; z-index: 1; } .autoplay .slick-next { position: absolute; top: 110%; right: 44%; left: auto; z-index: 1; } .autoplay .slick-prev, .autoplay .slick-prev:focus { background: url("/data/cms/images/previous(1).png") no-repeat 0px 0px; background-size: 30px; } .autoplay .slick-prev:hover, .autoplay .slick-prev:active { background: url("/data/cms/images/hover_previous(2).png") no-repeat 0px 0px; background-size: 30px; } .autoplay .slick-next, .autoplay .slick-next:focus { background: url("/data/cms/images/next(1).png") no-repeat 0px 0px; background-size: 30px; } .autoplay .slick-next:hover, .autoplay .slick-next:active { background: url("/data/cms/images/hover_next(2).png") no-repeat 0px 0px; background-size: 30px; } .autoplay .dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .autoplay .active, .dot:hover { background-color: #717171; } </style> <script> $(document).ready(function(){ $('.autoplay').slick({ slidesToShow: 1, slidesToScroll: 1, autoplay: true, fade:true, autoplaySpeed: 1800, responsive: [ { breakpoint: 1280, settings: { slidesToShow: 1, slidesToScroll: 1 } } ] }); }); </script>