文本未包含在Slick Slider中

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/[email protected]/slick/slick.min.js"></script>
</footer>

我修改了strong标记中的拼写错误，并从.js文件中删除了一些字符，因为它们不是示例所必需的。

您可以通过增加CSS文件中的font-size的.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;
}

<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>
    <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>
    <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>
    <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/[email protected]/slick/slick.min.js"></script>
</footer>

Answer 2

你需要在你的p上添加这个css规则（或添加一个类）

p {
  word-wrap: break-word;
}

文本未包含在Slick Slider中

问题描述投票：2回答：2

2个回答

最新问题

文本未包含在Slick Slider中

问题描述 投票：2回答：2

2个回答

最新问题

问题描述投票：2回答：2