Question

我想实现一个带有光滑滑块的圆盘传送带，在其底部显示图像和文本，然后用一些大点表示还有更多。

现在我面临两个问题：

文字不自动换行
底部的点几乎不可见

实现非常简单：

    $( document ).ready(function(condition) {
        // show user opinion carrusel
        $(\'.user_opinions\').slick({
            dots: true,
            slidesToShow: 1,
            slidesToScroll: 3
        });
    });

html

    <div class="user_opinions" style="position: relative; outline: 0; width: 100% !important;">
      <div style="">
            <img src="/g/p/user_1.png" width="100%" alt="">
            <div style=" margin: 10px;">
              <p style="">Es sind definitiv die Filter die es einfach machen. Ich kann genau die bla finden nach der ich gesucht habe.</p>
              <div style="border-top: 1px solid #ccc; width: 100px;margin-bottom:10px;"></div>
              <strong>Jens K</srong>
            </div>

      </div>
      <div>
            <img src="/g/p/user2.jpg" width="100%" alt="">
            <div style=" margin: 10px;">
              <p>Es sind definitiv die Filter auf x die es einfach machen. Ich kann genau die blub finden nach der ich gesucht habe.</p>
              <div style="border-top: 1px solid #ccc; width: 100px;margin-bottom:10px;"></div>
              <strong>Jens K</srong>
            </div>
      </div>
    </div>

我该如何包装文字以及如何放大圆点？

Answer 1

在下面的示例中，我已经使用您的代码添加了CDN-似乎运行良好。您是否已包含所有相关的样式表/脚本？

$(document).ready(function() {
  // show user opinion carrusel
  $('.user_opinions').slick({
    dots: true,
    slidesToShow: 1,
    slidesToScroll: 3
  });
});

<head>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" />
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" />
</head>

<div class="user_opinions" style="position: relative; outline: 0; width: 100% !important;">
  <div style="">
    <img src="/g/p/user_1.png" width="100%" alt="">
    <div style=" margin: 10px;">
      <p style="">Es sind definitiv die Filter die es einfach machen. Ich kann genau die bla finden nach der ich gesucht habe.</p>
      <div style="border-top: 1px solid #ccc; width: 100px;margin-bottom:10px;"></div>
      <strong>Jens K</strong>
    </div>
  </div>
  <div>
    <img src="/g/p/user2.jpg" width="100%" alt="">
    <div style=" margin: 10px;">
      <p>Es sind definitiv die Filter auf x die es einfach machen. Ich kann genau die blub finden nach der ich gesucht habe.</p>
      <div style="border-top: 1px solid #ccc; width: 100px;margin-bottom:10px;"></div>
      <strong>Jens K</strong>
    </div>
  </div>
</div>

<footer>
  <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
</footer>

我已修正了strong标签中的拼写错误，并从示例文件中不需要了.js文件中的某些字符。

您可以通过增加CSS文件中font-size的{{1}}和此处的.slick-dots li button:before来更改点的大小。

这是一个带有样式点的示例：

color

$(document).ready(function() {
  // show user opinion carrusel
  $('.user_opinions').slick({
    dots: true,
    slidesToShow: 1,
    slidesToScroll: 3
  });
});

.slick-dots li button:before {
  font-size: 15px !important;
  color: #10bdb7 !important;
}

Answer 2

您需要在p上添加此CSS规则（或添加一个类）

p {
  word-wrap: break-word;
}

文本未在Slick Slider中换行

2 个答案: