Slick Carousel 插件 - 自定义点

如何解决Slick Carousel 插件 - 自定义点

我需要帮助修改光滑轮播中的点。 默认情况下，点的显示取决于幻灯片的数量。 我不想要那样，但在骏马中我想要下图所示的效果。

我尝试修改类 .slick-dots,.slick-dots li,.slick-dots li 按钮，我设法给了 2 px 的高度，100% 的宽度来创建长线并将它们联合起来，但是他们只是不断地堆叠在一起。 我的 JS 代码来自他们的网站：

$('.responsive').slick({
    dots: true,infinite: false,speed: 300,slidesToShow: 6,slidesToScroll: 1,// variableWidth: true,responsive: [
      {
        breakpoint: 1024,settings: {
          slidesToShow: 3,slidesToScroll: 3,infinite: true,dots: false
        }
      },{
        breakpoint: 600,settings: {
          slidesToShow: 2,slidesToScroll: 2
        }
      },{
        breakpoint: 480,settings: {
          slidesToShow: 1,slidesToScroll: 1
        }
      }
      // You can unslick at a given breakpoint Now by adding:
      // settings: "unslick"
      // instead of a settings object
    ]
  });   

@charset 'UTF-8';
/* Slider */
.slick-loading .slick-list
{
    background: #fff url('./ajax-loader.gif') center center no-repeat;
}

/* Icons */
@font-face
{
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;

    src: url('./fonts/slick.eot');
    src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'),url('./fonts/slick.woff') format('woff'),url('./fonts/slick.ttf') format('truetype'),url('./fonts/slick.svg#slick') format('svg');
}
/* Arrows */
/* .slick-prev
{
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 40%;

    display: block;

    width: 36px;
    height: 36px;
    padding: 0;
    -webkit-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    transform: translate(0,-50%);
    padding: 0px 2px 0px 0px;
    cursor: pointer;
    border-radius: 50%;
    color: transparent;
    border: 2px solid white;
    outline: none;
    background: #678000;
    Box-shadow: 0px 1px 5px 0px #0000001A;

} */
.slick-prev,.slick-next
{
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 40%;

    display: block;

    width: 36px;
    height: 36px;
    padding: 0;
    -webkit-transform: translate(0,-50%);

    cursor: pointer;

    color: transparent;
    border: 2px solid white;
    outline: none;
    background: #678000;
    Box-shadow: 0px 1px 5px 0px #0000001A;
    border-radius: 50%;
}



.slick-prev:hover,.slick-prev:focus,.slick-next:hover,.slick-next:focus
{
    /* color: #678000; */
    outline: none;
    background: #799900;
}
.slick-prev:hover:before,.slick-prev:focus:before,.slick-next:hover:before,.slick-next:focus:before
{
    opacity: 1;
}
.slick-prev.slick-disabled:before,.slick-next.slick-disabled:before
{
    opacity: 1;
}

.slick-prev:before,.slick-next:before
{
    font-family: 'slick';
    font-size: 1.1rem;
    line-height: 1;

    opacity: 1;
    color: white;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-prev
{
    left: -25px;
    z-index: 99;
}

[dir='rtl'] .slick-prev
{
    right: -25px;
    left: auto;
}
.slick-prev:before
{
    font-family: 'streamline';
    content: "\e936";
}
[dir='rtl'] .slick-prev:before
{
    font-family: 'streamline';
    content: "\e937";
}
.slick-next
{
    right: -25px;
}
[dir='rtl'] .slick-next
{
    right: auto;
    left: -25px;
}
.slick-next:before
{
    font-family: 'streamline';
    content: "\e937";
}
[dir='rtl'] .slick-next:before
{
    content: '←';
}

/* Dots */
.slick-dotted.slick-slider
{
    margin-bottom: 30px;
}

.slick-dots
{
    position: absolute;
    bottom: -11rem;

    display: block;

    width: 100%;
    padding: 0;
    margin: 0;

    list-style: none;

    text-align: center;
    /* test */
    background-color: transparent;
}
.slick-dots li
{
    position: relative;

    display: inline-block;

    width: 32%;
    height: 2px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
    background-color: #F1F2EC;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 20px;
    height: 20px;
    padding: 5px;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.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;
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    /* content: '•'; */
    text-align: center;

    opacity: .25;
    color: black;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
    opacity: 1;
    color: #678000;
}
.slick-track {
    left: 11px;
}
@media only screen and (max-width: 411px) and (min-width: 100px) {
    .slick-track {
        left: 25px;
    }
}
/* ----------- iPhone X ----------- */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-height: 812px) 
  and (-webkit-min-device-pixel-ratio: 3) { 
    .slick-track {
        left: 66px;
    }
    .slick-next {
        right: 0rem !important;
    }
    .slick-prev {
        left: -13px;
    }
    .mobile-ml {
        margin-left: 1rem;
    }
    
}

/* ----------- iPhone 6+,7+ and 8+ ----------- */

@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 
    .slick-next {
        right: 4rem;
    }
}
/* ----------- iPhone 6,6S,7 and 8 ----------- */

@media only screen 
  and (width: 375px) 
  and (-webkit-min-device-pixel-ratio: 2) { 
    .slick-next {
        right: 4rem;
    }
}

/* ----------- iPhone 5,5S,5C and 5SE ----------- */
/* ----------- iPhone 4 and 4S ----------- */

@media only screen 
  and (width: 320px) 
  and (-webkit-min-device-pixel-ratio: 2) {
    .slick-next {
        right: 1rem;
    }
}

/* ----------- iPad Pro 12.9" ----------- */

@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px)
  and (-webkit-min-device-pixel-ratio: 2) {
    .slick-track {
        left: 0px;
    }
}
/* ----------- Pixel 2XL,2 ----------- */

@media only screen 
  and (min-device-width: 411px) 
  and (max-device-height: 823px)
  and (-webkit-min-device-pixel-ratio: 2) {
    .slick-next {
        right: 6rem;
    }
}
/* ----------- galaxy S5,MotoG4 ----------- */
@media only screen 
  and (width: 360px) 
  and (-webkit-min-device-pixel-ratio: 2) {
    .slick-next {
        right: 3rem;
    }
}

 <!-- carousel -->
      <div class="container mb-5 ml-2  mobile-ml">
        <div class="responsive">
          <div>
            <div class="card top-vanzari-card">
              <img src="https://cdn.dc5.ro/img-prod/1123598293-0-240.jpeg" alt="" srcset="">
              <div class="card-body">
                <h5 class="card-title">Biblioteca de la miezul noptii</h5>
                <p class="card-text">Matt Haig</p>
                <p class="availability">In stoc</p>
                <div class="price-block">
                  <span class="amount">39.<span class="bani">99</span>&nbsp;lei</span>
                  <del class="price-old">185. <span class="bani">99</span>&nbsp;lei</del>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div class="card top-vanzari-card">
              <img src="https://cdn.dc5.ro/img-prod/222512-0-240.jpeg" alt="" srcset="">
              <div class="card-body">
                <h5 class="card-title">Biblioteca de la miezul noptii</h5>
                <p class="card-text">Matt Haig</p>
                <p class="availability">In stoc</p>
                <div class="price-block">
                  <span class="amount">39.<span class="bani">99</span>&nbsp;lei</span>
                  <del class="price-old">185. <span class="bani">99</span>&nbsp;lei</del>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div class="card top-vanzari-card">
              <img src="https://cdn.dc5.ro/img-prod/926965816-0-240.jpeg" alt="" srcset="">
              <div class="card-body">
                <h5 class="card-title">Biblioteca de la miezul noptii</h5>
                <p class="card-text">Matt Haig</p>
                <p class="availability">In stoc</p>
                <div class="price-block">
                  <span class="amount">39.<span class="bani">99</span>&nbsp;lei</span>
                  <del class="price-old">185. <span class="bani">99</span>&nbsp;lei</del>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div class="card top-vanzari-card">
              <img src="https://cdn.dc5.ro/img-prod/1080265557-0-240.jpeg" alt="" srcset="">
              <div class="card-body">
                <h5 class="card-title">Biblioteca de la miezul noptii</h5>
                <p class="card-text">Matt Haig</p>
                <p class="availability">In stoc</p>
                <div class="price-block">
                  <span class="amount">39.<span class="bani">99</span>&nbsp;lei</span>
                  <del class="price-old">185. <span class="bani">99</span>&nbsp;lei</del>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div class="card top-vanzari-card">
              <img src="https://cdn.dc5.ro/img-prod/1149018841-0-240.jpeg" alt="" srcset="">
              <div class="card-body">
                <h5 class="card-title">Biblioteca de la miezul noptii</h5>
                <p class="card-text">Matt Haig</p>
                <p class="availability">In stoc</p>
                <div class="price-block">
                  <span class="amount">39.<span class="bani">99</span>&nbsp;lei</span>
                  <del class="price-old">185. <span class="bani">99</span>&nbsp;lei</del>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div class="card top-vanzari-card">
              <img src="https://cdn.dc5.ro/img-prod/1080265557-0-240.jpeg" alt="" srcset="">
              <div class="card-body">
                <h5 class="card-title">Biblioteca de la miezul noptii</h5>
                <p class="card-text">Matt Haig</p>
                <p class="availability">In stoc</p>
                <div class="price-block">
                  <span class="amount">39.<span class="bani">99</span>&nbsp;lei</span>
                  <del class="price-old">185. <span class="bani">99</span>&nbsp;lei</del>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div class="card top-vanzari-card">
              <img src="https://cdn.dc5.ro/img-prod/1144756525-0-240.jpeg" alt="" srcset="">
              <div class="card-body">
                <h5 class="card-title">Biblioteca de la miezul noptii</h5>
                <p class="card-text">Matt Haig</p>
                <p class="availability">In stoc</p>
                <div class="price-block">
                  <span class="amount">39.<span class="bani">99</span>&nbsp;lei</span>
                  <del class="price-old">185. <span class="bani">99</span>&nbsp;lei</del>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div class="card top-vanzari-card">
              <img src="https://cdn.dc5.ro/img-prod/1153288741-0-240.jpeg" alt="" srcset="">
              <div class="card-body">
                <h5 class="card-title">Biblioteca de la miezul noptii</h5>
                <p class="card-text">Matt Haig</p>
                <p class="availability">In stoc</p>
                <div class="price-block">
                  <span class="amount">39.<span class="bani">99</span>&nbsp;lei</span>
                  <del class="price-old">185. <span class="bani">99</span>&nbsp;lei</del>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div class="card top-vanzari-card">
              <img src="https://cdn.dc5.ro/img-prod/633480130-0-240.jpeg" alt="" srcset="">
              <div class="card-body">
                <h5 class="card-title">Biblioteca de la miezul noptii</h5>
                <p class="card-text">Matt Haig</p>
                <p class="availability">In stoc</p>
                <div class="price-block">
                  <span class="amount">39.<span class="bani">99</span>&nbsp;lei</span>
                  <del class="price-old">185. <span class="bani">99</span>&nbsp;lei</del>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div class="card top-vanzari-card">
              <img src="https://cdn.dc5.ro/img-prod/1153288720-0-240.jpeg" alt="" srcset="">
              <div class="card-body">
                <h5 class="card-title">Biblioteca de la miezul noptii</h5>
                <p class="card-text">Matt Haig</p>
                <p class="availability">In stoc</p>
                <div class="price-block">
                  <span class="amount">39.<span class="bani">99</span>&nbsp;lei</span>
                  <del class="price-old">185. <span class="bani">99</span>&nbsp;lei</del>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div class="card top-vanzari-card">
              <img src="https://cdn.dc5.ro/img-prod/1153288771-0-240.jpeg" alt="" srcset="">
              <div class="card-body">
                <h5 class="card-title">Biblioteca de la miezul noptii</h5>
                <p class="card-text">Matt Haig</p>
                <p class="availability">In stoc</p>
                <div class="price-block">
                  <span class="amount">39.<span class="bani">99</span>&nbsp;lei</span>
                  <del class="price-old">185. <span class="bani">99</span>&nbsp;lei</del>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div class="card top-vanzari-card">
              <img src="https://cdn.dc5.ro/img-prod/1116037177-0-240.jpeg" alt="" srcset="">
              <div class="card-body">
                <h5 class="card-title">Biblioteca de la miezul noptii</h5>
                <p class="card-text">Matt Haig</p>
                <p class="availability">In stoc</p>
                <div class="price-block">
                  <span class="amount">39.<span class="bani">99</span>&nbsp;lei</span>
                  <del class="price-old">185. <span class="bani">99</span>&nbsp;lei</del>
                </div>
              </div>
            </div>
          </div>
          
        </div>
       
      </div>


      <!-- carousel end -->

如果有任何帮助，我将不胜感激！