自定义上下滑动按钮

Question

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

而且，当您单击上一张图像时，您可以向前滑动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中

Answer 1

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

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

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

Answer 2

很难说，如果没有一个有效的例子，这是否可行，那是我的尝试：

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