滑动滑块的自定义上一个和下一个按钮

Posted 2023-05-08

【中文标题】滑动滑块的自定义上一个和下一个按钮

【英文标题】：Custom previous & next buttons for slick slider

【发布时间】：2016-06-29 16:03:43

【问题描述】：

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

当您单击上一张图片时，您会向后滑动 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 中

【参考方案1】：

如果没有工作示例，很难说这是否可行，这是我的尝试：

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 + ' " />');
);

jsfiddle

【讨论】：

哇，这看起来很复杂。我很难理解你在做什么

您在此处附加图像。有没有办法替换图像或附加和删除以前的图像？

是的，您可以在 img 标签上放置一个类并在 jquery 代码中查找这些类。如果你能找到它们，那么你可以替换 src 属性的内容，否则你附加 img 标签

如何找到上一个和下一个滑块元素的h3？

prev_row.find('h3') 和 next_row.find('h3')

【参考方案2】：

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

我不熟悉您正在使用的 slick slider 库，但是查看您提供的代码，您可以这样做：

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 来使按钮中的背景图像看起来不错。

【讨论】：

我明白你在这里做什么，但我的控制台中出现错误“'background-image': prevSlide.css('background-image');” Uncaught SyntaxError: Unexpected token ;

@FrankLucas 哎呀，; 不应该在那里。我会修复它。你可以删除;后面的.css('background-image')