自定义上一个和下一个按钮，用于光滑的滑块

Custom previous & next buttons for slick slider

本文关键字：用于 上一个 下一个 按钮 自定义      更新时间：2023-09-26

我正在尝试自定义我的光滑滑块以匹配我的设计。现在，上一个和下一个按钮需要的是滑块的实际上一个和下一个图像。

当您单击上一张图像时，您会向后滑动 1 张，当您

单击下一张图像时，您会向前滑动 1 张幻灯片，显然。

这就是我的滑块在 html 中的样子

<div class="col-md-1 text-left">
    <p class="left darkerfontcolor">prev</p>
</div>
<div class="col-md-10 text-center nopadding white-text">
    <div class="slider">
        <div class="slider-image" id="theslider1" style=
        "background-image: url('img/bg/bg-1.jpg'); height: 600px; background-size: cover; 
         background-position: center center;">
        <h3>Street life of Antwerp</h3>
            <p class="largefontsize somemargin">Hello there!</p>
            <div class="slider-buttons">
                <a class="smallfontsize slider-button somemarginright"
                href="#">More info</a> <a class=
                "smallfontsize slider-button somemarginleft" href="#">Book
                this tour</a>
            </div>
        </div>
        <div class="slider-image" id="theslider2" style=
        "background-image: url('img/bg/bg-2.jpg'); height: 600px; background-size: cover;
         background-position: center center;">
        <h3>Hey there, I have no text</h3>
            <p class="largefontsize somemargin">Will you be my text?</p>
            <div class="slider-buttons">
                <a class="smallfontsize slider-button somemarginright"
                href="#">More info</a> <a class=
                "smallfontsize slider-button somemarginleft" href="#">Book
                this tour</a>
            </div>
        </div>
        <div class="slider-image" id="theslider3" style=
        "background-image: url('img/bg/bg-3.jpg'); height: 600px; background-size: cover; 
        background-position: center center;">
        <h3>Please...</h3>
            <p class="largefontsize somemargin">It'll be fun!</p>
            <div class="slider-buttons">
                <a class="smallfontsize slider-button somemarginright"
                href="#">More info</a> <a class=
                "smallfontsize slider-button somemarginleft" href="#">Book
                this tour</a>
            </div>
        </div>
    </div>
</div>
<div class="col-md-1 text-right">
    <p class="right darkerfontcolor">next</p>
</div>

因此，目标是将上一张和下一张图像作为上一个和下一个按钮。我已经抓取了当前幻灯片的索引，并希望从我的滑块容器中抓取下一张和上一张幻灯片的图像以注入到 html 中，这就是我的做法

jQuery('.slider').on('afterChange', function(event, slick){
            var activeSlide = jQuery('.slider').find('.slick-active');
            var index = activeSlide.data('slick-index');
            console.log(index);
});

问题是我不知道如何抓取图像并相应地将它们注入我的 html

中

很难说这是否在没有工作示例的情况下有效，这是我的尝试：

jQuery('.slider').on('afterChange', function(event, slick){
        var activeSlide = jQuery('.slider').find('.slick-active');
        var index = activeSlide.data('slick-index');
        console.log(index);
         //find previous slide and pick background image. output:  "none" or url("...urlhere..")
        var prev_row = jQuery('.slider').find("[slick-index='" + (index + 1) + "']").css('background-image');

                // If matched, retrieve url, otherwise ""
                prev_row = /^url'((['"]?)(.*)'1')$/.exec(prev_row);
                prev_row = prev_row ? prev_row[2] : ""; 
           //same as above, but done from next slide
         var next_row = jQuery('.slider').find("[slick-index='" + (index + 1) + "']").css('background-image');
        // ^ Either "none" or url("...urlhere..")
                next_row = /^url'((['"]?)(.*)'1')$/.exec(next_row);
                next_row = next_row ? next_row[2] : ""; // If matched, retrieve url, otherwise ""
                 //append a tag image with the correct url of the images retrieved above
                    $('.left').append('<img src=" '+ prev_row + '" />');
        $('.right').append('<img src=" '+ next_row + ' " />');
});

斯菲德尔

如果我

正确理解您的问题，您想在按钮中显示下一张和上一张幻灯片的缩略图预览，对吗？

我不熟悉您正在使用的光滑滑块库，但查看您提供的代码，这就是您可以做到的：

1.查找活动幻灯片：您已经设法找到了指向当前活动幻灯片的（jQuery）元素 

var activeSlide = jQuery('.slider').find('.slick-active');`

2. 查找下一张和上一张幻灯片：所有幻灯片都位于同一个父元素中。 jQuery（你已经在使用）有一个方便的prev和next方法。

var prevSlide = activeSlide.prev('.slider-image');
var nextSlide = activeSlide.next('.slider-image');

如果我没记错的话，您的滑块插件可确保在您到达幻灯片的结尾/开头时重新排序幻灯片。

3. 找到下一个和上一个按钮：

var prevButton = $('.text-left');
var nextButton = $('.text-right');

4. 将背景图像复制到您的按钮：

prevButton.css({
  'background-image': prevSlide.css('background-image')
});
nextButton.css({
  'background-image': nextSlide.css('background-image')
});

请注意，您需要一些额外的 CSS 才能使按钮中的背景图像看起来不错。

相关文章：