[英]Slick slider custom dots
我想知道是否有办法使用自定义光滑的 slider 点。 当我搜索时,我只能找到有关如何将幻灯片中的点更改为缩略图的示例,但这不是我想要完成的。 我只想将自己的 png 图片用于活动和非活动点导航。 我试过这个:
$('.slick-dots li').html('<a href="#"><img src="slide-dot.png" /></a>');
$('.slick-dots li.slick-active').html('<a href="#"><img src="slide-dot-active.png" /></a>');
但这没有用,尽管我记得我以前做过类似的事情。 我在这里错过了什么吗?
谢谢!
这可以在将 slick 初始化为选项之一时完成:
JS
$(".slider").slick({
dots: true,
customPaging : function(slider, i) {
return '<a href="#"><img src="slide-dot.png" /><img src="slide-dot-active.png" /></a>';
},
});
然后你就可以用CSS根据活动状态显示你想要的图片
<!-- language: lang-css -->
.slick-dots li img:nth-child(1) {
display: block;
}
.slick-dots li img:nth-child(2) {
display: none;
}
.slick-dots li.slick-active img:nth-child(1) {
display: none;
}
.slick-dots li.slick-active img:nth-child(2) {
display: block;
}
您可以仅使用 CSS 设置光滑点的样式,并避免使用内嵌图像:
使用背景图片:
.slick-dots li button {
background: url(path/to/your-image.png);
text-indent: -9999px;
overflow:hidden;
/* more CSS */
}
使用伪元素:
.slick-dots li button {
font-size: 0;
/* more CSS */
}
.slick-dots li button {
content:url(path/to/your-image.png);
}
您可以在初始化滑块时使用选项“appendDots”。 例如: appendDots: '$('.your-dot')'
您好,我搜索了很多,但没有找到任何解决方案,所以我创建了自己的解决方案
你可以这样做:
在html
<div class="card rounded-0 h-100">
<div class="card-body p-0">
<div id="slick-slider">
<a href="#"><img class="w-100" src="https://demo.activeitzone.com/ecommerce/public/uploads/all/kYLM906MNqYcHvm0bHLcIj3TxldjZfySHl26wHMu.png" alt=""></a>
<a href="#"><img class="w-100" src="https://demo.activeitzone.com/ecommerce/public/uploads/all/ppB6tYYNgWM3vL3uq81n80fZCdxrgkMul9KPk9pm.png" alt=""></a>
<a href="#"><img class="w-100" src="https://demo.activeitzone.com/ecommerce/public/uploads/all/Dp0DBHFbBuyRCAUi8Od6tk4izOsMg1mVB1v8QAeu.png" alt=""></a>
</div>
<div class="slick-slider-nav"></div>
<div class="slick-slider-dots"></div>
</div>
</div>
在javascript
$('#slick-slider').slick({
autoplay: true,
dots: true,
appendArrows: $('.slick-slider-nav'),
appendDots: $('.slick-slider-dots'),
prevArrow: "<button class='slick-prev btn btn-white rounded-circle'><i class='mdi mdi-chevron-left'></i></button>",
nextArrow: "<button class='slick-next btn btn-white rounded-circle'><i class='mdi mdi-chevron-right'></i></button>",
});
对于像这样的点样式,我正在使用SCSS
.slick-slider-dots{
position: absolute;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
display: flex;
ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
li {
margin: 0 4px;
button {
background: $gray-200;
height: 8px;
width: 35px;
overflow: hidden;
color: $gray-200;
border: none;
border-radius: 4px;
}
&.slick-active {
button {
background: $primary;
color: $primary;
}
}
}
}
}
你可以简单地通过使用 CSS 来实现,你不需要任何 JavaScript function。
1- 选择要应用 slider 的元素
这段代码是pugjs
ul
li 01
li 02
li 03
li 04
li 05
2- 然后将 Slider function 应用于此元素
$("ul").slick()
3-现在将点功能添加到 slider 并使用 true
$("ul").slick({
dots: true,
})
4- 现在 go 到点并单击它们并打开控制台并拖动名为 class 的 slick slick-dots
5-在里面的按钮里面添加你想要的格式,如下图
.slick-dots li button
{
width:10px;height:10px;
background-color:red;border-radius:50%;
font-size:0px; // This step is very important to hide the numbers
border:0;
}
6- 现在在控制台中,您会注意到此 slider 的作用机制,因为它会在您单击的元素上放置一个活动的 class,因此我们将 go 转换为 css 并协调活动
.slick-dots .slick-active button
{
background-color:blue;
}
7- 这样,您将结束点的自定义,而无需任何 JavaScript function。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.