Cannot center navigation dots on a slick slider (slick.js) while being responsive

Question

The slider used is from https://kenwheeler.github.io/slick/

I cannot get the navigation dots to center (horizontally) to the slider itself and stay centered while being responsive

I also can not seem to get the dots to stop disappearing altogether at certain widths (1000px - 740px) and to work with the responsiveness of the slider div

https://jsfiddle.net/spgplayerstack/8eg64abu/16/

.slick-dots
{
    background-color:  purple;
    position: absolute;
    bottom: -25px;
    display: block;
    width: 96.255vw;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}

code segment from the JS fiddle

Thanks

Answer 1

Most browsers add padding to <ul> by default, so you need to add padding: 0 to the .slick-dots ul in order to stop pushing the slick dots over, and then they will be horizontally centered.

As far as the dots disappearing, you have dots: false in your slick JS responsive breakpoint, so adjust that to true (or remove that line because dots are true by default in your slick creation) if you'd like to show them.

 $(document).ready(function() { $(".slider-posts-all").slick({ slidesToShow: 3, slidesToScroll: 1, autoplay: false, dots: true, appendDots: $(".slick-dots"), /* to get dots css */ dotsClass: $(".slick-dots"), /* to get dots css */ autoplaySpeed: 4000, speed: 700, nextArrow: $(".next"), prevArrow: $(".prev"), responsive: [{ breakpoint: 1024, settings: { slidesToShow: 3, slidesToScroll: 1, infinite: true, /* Remove dots: false to show dots between 740px - 1024px */ /* dots: false */ } }, { breakpoint: 740, settings: { slidesToShow: 1, slidesToScroll: 1 } }, { breakpoint: 600, settings: { slidesToShow: 1, slidesToScroll: 1 } } // You can unslick at a given breakpoint now by adding: // settings: "unslick" // instead of a settings object ], }); });

 body { background-color: gray; } /* #################### post slider css ################### */ .slider-wrapper { background-color: ; padding-top: 30px; } .slider { background-color: ; border: ; 1px solid red; padding-top: 30px; position: relative; } .slider .slider-title { background-color: ; text-align: center; margin: 30px auto; font-family: ; Arial, Helvetica, sans-serif; } .slider .prev { position: absolute; top: 45%; left: 10vw; font-size: 2em; cursor: pointer; } .slider .next { position: absolute; top: 45%; right: 10vw; font-size: 2em; cursor: pointer; padding-left: 25px; } .slider-posts-all { background-color: ; border: ; 1px dashed red; width: 70vw; height: 100%; margin: 0px auto; overflow: hidden; padding: -70px 0px -10px 0; } .slider-post h4 { padding: 0px; margin: 0px; font-size: ; } .slider-post { background-color: ; background-color: rgba(40, 40, 40, 1); opacity: 1; margin: 0px 0.7vw; display: inline-block; height: 100%; width: 300px; overflow: hidden; border-radius: 5px; color: rgb(200, 200, 200); font-size: 15px; } .slider-image { background-color: yellow; width: 100%; height: ; border-top-left-radius: 5px; border-top-right-radius: 5px; } .post-info { background-color: ; height: 50px; overflow: ; border: ; 1px solid green; margin-top: 0px; -5px; margin-left: 5px; margin-right: 1px; padding: 10px 5px 20px 0px; } .post-info h4 a { color: inherit; margin: 5px; text-decoration: none; } .post-info a:hover { color: rgb(30, 30, 30); } .post-info i { font-size: 15px; } @media screen and (max-width: 840px) { .slider { padding-top: 12vh; } .slider-post { background-color: ; height: ; font-size: ; } .slider-posts-all { width: 85%; zoom: 90%; } .slider .prev { left: 15px; top: 55%; } .slider .next { right: 15px; top: 55%; } } @media screen and (max-width: 740px) { .slider { width: ; } .slider-post { background-color: ; height: ; font-size: ; } .slider-posts-all { width: 55vw; zoom: 90%; } .slider .prev { left: 13vw; } .slider .next { right: 13vw; } .slider-image { width: ; height: ; zoom: 90%; } } @media screen and (max-width:760px) and (min-width: 595px) { .post-info i { font-size: 11px; } } /* Dots */ .slick-dotted.slick-slider { margin-bottom: 30px; } .slick-dots { background-color: purple; position: absolute; bottom: -25px; display: block; width: 96.255vw; padding: 0; margin: 0; list-style: none; text-align: center; } /* New code */ .slick-dots ul { padding: 0; } /* End new code */ /*@media screen and (max-width: 740px){ .slick-dots{ width: 92.3vw; } } @media screen and (max-width: 600px){ .slick-dots{ background-color: ; width: 90.05vw; } } */ .slick-dots li { background-color: ; position: relative; display: inline-block; width: 20px; height: 20px; margin: 0 5px; padding: 0; cursor: pointer; } .slick-dots li button { background-color: transparent; font-size: 0px; line-height: 0; border-radius: 50%; display: block; width: 20px; height: 20px; padding: 5px; cursor: pointer; color: ; border: 0; outline: none; background: ; } .slick-dots li button:hover, .slick-dots li button:focus { outline: none; } .slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; background-color: ; color: ; } .slick-dots li button:before { background-color: red; font-family: 'slick'; font-size: 16px; line-height: 20px; border-radius: 50%; position: absolute; top: 0; left: 0; width: 20px; height: 20px; content: '•'; text-align: center; opacity: 1; color: purple; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-dots li.slick-active button:before { opacity: 1; color: blue; } /* #################### post slider css ################### */

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- ################# post slider ################# --> <div class="slider-wrapper"> <div class="slider"> <!-- for slider area --> <!-- for arrows --> <i class="fas fa-chevron-left prev"></i> <i class="fas fa-chevron-right next"></i> <div class="slider-posts-all"> <!-- for all posts--> <div class="slider-post"> <!-- for each post --> <img src="https://images.unsplash.com/photo-1555589228-135c25ae8cf5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=300&q=60" alt="" class="slider-image"> <div class="post-info"> <h4><a href="#">Post A for practice</a></h4> <br> </div> </div> <div class="slider-post"> <img src="https://images.unsplash.com/photo-1526665814499-fbdb4394ef3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=300&q=60" alt="" class="slider-image"> <div class="post-info"> <h4><a href="#">Post B for practice</a></h4> <br> </div> </div> <div class="slider-post"> <img src="https://images.unsplash.com/photo-1500627297039-f3495734b202?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=300&q=60" alt="" class="slider-image"> <div class="post-info"> <h4><a href="#">Post C for practice </a></h4> <br> </div> </div> <div class="slider-post"> <img src="https://images.unsplash.com/photo-1507220529008-e931df30d1ed?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=300&q=60" alt="" class="slider-image"> <div class="post-info"> <h4><a href="#">Post 1 for practice</a></h4> <br> </div> </div> <div class="slider-post"> <img src="https://images.unsplash.com/photo-1526665814499-fbdb4394ef3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=300&q=60" alt="" class="slider-image"> <div class="post-info"> <h4><a href="#">Post 2 for practice</a></h4> <br> </div> </div> <div class="slider-post"> <img src="https://images.unsplash.com/photo-1568209865332-a15790aed756?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=300&q=60" alt="" class="slider-image"> <div class="post-info"> <h4><a href="#">Post 3 for practice</a></h4> <br> </div> </div> </div> <div class="slick-dots"> </div> <!-- for dots --> </div> </div> <!-- ################# /post slider ################# --> <!-- scripts --> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <script src="https://kit.fontawesome.com/a076d05399.js"></script>