Question

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

当你点击上一张图片时，你会向前滑动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

定制上一个＆amp;光滑滑块的下一个按钮

2 个答案: