我想实现一个带有光滑 slider 的轮播，在其底部显示图像和文本，后面是一些大点，表明还有更多内容。
现在我面临两个问题:
- 文本不换行
- 底部的点几乎看不见
实现非常基本:
$( 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>
如何让文字自动换行以及如何放大点？
最佳答案
我已经使用您的代码在下面的示例中包含了 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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="790a15101a12541a180b160c0a1c15394857415748" rel="noreferrer noopener nofollow">[email protected]</a>/slick/slick.min.js"></script>
</footer>我已修正了您的 strong 中的拼写错误标签，并从 .js 中删除了一些字 rune 件，因为它们对于本示例来说不是必需的。
您可以通过增加 font-size 来更改点的大小。的.slick-dots li button:before在您的 CSS 文件中，以及 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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6e1d02070d05430d0f1c011b1d0b022e5f4056405f" rel="noreferrer noopener nofollow">[email protected]</a>/slick/slick.min.js"></script>
</footer>关于jquery - 文本未在 Slick Slider 中换行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55848909/