Custom previous & next buttons for slick slider

Question

I am trying to customize my slick slider to match my design. Now what I need for the prev and next button is the actual previous and next image of the slider.

And when you click the previous image you go 1 slide back and when you click the next image you go 1 slide forward, obviously.

This is how my slider looks like in 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>

So the goals is to get the previous and next image as prev and next button. I have grabbed the index of the current slide and want to grab the images of the next and previous slide from my slider container to inject into the html this is how I've done it

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

The problem is I have no clue how I can grab the images and inject them accordingly into my html

Answer 1

If I understand your question correctly, you want to show a thumbnail preview of the next and previous slides in your buttons, right?

I'm not familiar with the slick slider library you're using, but looking at the code you provided, this is how you could do it:

1. Find active slide: You've already managed to find the (jQuery) element that points to the currently active slide

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

2. Find the next and previous slides: All your slides are in the same parent element. jQuery (which you're already using) has a handy prev and next method.

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

If I'm not mistaken, your slider plugin makes sure the slides are reordered when you reach the end/start of your slideshow.

3. Find your next and previous buttons:

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

4. Copy the background image to your buttons:

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

Note that you'll need some additional CSS to make the background image in the buttons look nice.

Answer 2

It is hard to say if this works without a working example, that's my attempt:

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