响应时无法在光滑的滑块 (slick.js) 上居中导航点答案

【问题标题】：Cannot center navigation dots on a slick slider (slick.js) while being responsive响应时无法在光滑的滑块 (slick.js) 上居中导航点
【发布时间】：2021-01-03 17:18:06
【问题描述】：

使用的滑块来自https://kenwheeler.github.io/slick/

我无法让导航点居中（水平）到滑块本身并在响应时保持居中

我似乎也无法让点在某些宽度（1000 像素 - 740 像素）处完全停止消失并与滑块 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;
}

来自 JS fiddle 的代码段

谢谢

【问题讨论】：

标签： javascript html jquery css sass

【解决方案1】：

大多数浏览器默认为<ul>添加填充，因此您需要将padding: 0添加到.slick-dots ul以停止将圆点推过，然后它们将水平居中。

至于点消失，你有 dots: false 在你光滑的 JS 响应断点，所以如果你想显示他们。

$(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>

【讨论】：