光滑的 slider 自定義點

Question

我想知道是否有辦法使用自定義光滑的 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>');

但這沒有用，盡管我記得我以前做過類似的事情。 我在這里錯過了什么嗎？

謝謝！

Answer 1

這可以在將 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;
}

Answer 2

您可以僅使用 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);
}

Answer 3

您可以在初始化滑塊時使用選項“appendDots”。 例如： appendDots: '$('.your-dot')'

Answer 4

您好，我搜索了很多，但沒有找到任何解決方案，所以我創建了自己的解決方案

你可以這樣做：

在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;
                }
            }
        }
    }

}

點看起來像這樣

Answer 5

你可以簡單地通過使用 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。