Why am I getting the url undefined error?

Question

JavaScript

I'm using slick.js slider. When I try to replace url, I get error background-image: url("undefined");
Everything works fine locally. I don't understand the problem, please help.

<style type="css"></style>
<section class="slideshow__slides slider">
    <div class="slider-image">
        <div class="image-wrap">
            <img src="https://support.kickofflabs.com/wp-content/uploads/2016/06/800x600.png" />
        </div>
        <div class="slider-caption-wrap">
            <div class="caption-details">
                <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
              tempor incididunt ut labore et dolore magna aliqua.</span>
            </div>
        </div>
    </div>
    <div class="slider-image">
        <div class="image-wrap">
            <img src="https://support.kickofflabs.com/wp-content/uploads/2016/06/800x600.png />
          </div>
          <div class=" slider-caption-wrap ">
            <div class="caption-details ">
              <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
              tempor incididunt ut labore et dolore magna aliqua.</span>
            </div>
          </div>
        </div>
        <div class="slider-image ">
          <div class="image-wrap ">
            <img src="https://support.kickofflabs.com/wp-content/uploads/2016/06/800x600.png " />
          </div>
          <div class="slider-caption-wrap ">
            <div class="caption-details ">
              <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
              tempor incididunt ut labore et dolore magna aliqua.</span>
            </div>
          </div>
        </div>
    </section>
<script src="https://code.jquery.com/jquery-3.0.0.min.js " integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin=" anonymous "></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

$(function() {

    // Slick slider for prev/next thumbnails images
    $('.slideshow__slides').slick({
        dots: true,
        slidesToShow: 1,
        autoplay: false,
        dots: false
    });
    setTimeout(function() {
        $('.slick-prev').prepend('<div class="prev-slick-arrow arrow-icon"><span>&#60;</span></div><div class="prev-slick-img slick-thumb-nav"><img src="/prev.jpg" class="img-responsive"></div>');
        $('.slick-next').append('<div class="next-slick-arrow arrow-icon"><span>&#62;</span></div><div class="next-slick-img slick-thumb-nav"><img src="/next.jpg" class="img-responsive"></div>');
        get_prev_slick_img();
        get_next_slick_img();
    }, 500);

    $('.slideshow__slides').on('click', '.slick-prev', function() {
        get_prev_slick_img();
    });
    $('.slideshow__slides').on('click', '.slick-next', function() {
        get_next_slick_img();
    });
    $('.slideshow__slides').on('swipe', function(event, slick, direction) {
        if (direction == 'left') {
            get_prev_slick_img();
        } else {
            get_next_slick_img();
        }
    });
    $('.slick-dots').on('click', 'li button', function() {
        var li_no = $(this).parent('li').index();
        if ($(this).parent('li').index() > li_no) {
            get_prev_slick_img()
        } else {
            get_next_slick_img()
        }
    });

    function get_prev_slick_img() {
        // For prev img
        var prev_slick_img = $('.slick-current').prev('.slider-image').find('img').attr('src');
        $('.prev-slick-img img').attr('src', prev_slick_img);
        $('.prev-slick-img').css('background-image', 'url(' + prev_slick_img + ')');
        // For next img
        var prev_next_slick_img = $('.slick-current').next('.slider-image').find('img').attr('src');
        $('.next-slick-img img').attr('src', prev_next_slick_img);
        $('.next-slick-img').css('background-image', 'url(' + prev_next_slick_img + ')');
    }

    function get_next_slick_img() {
        // For next img
        var next_slick_img = $('.slick-current').next('.slider-image').find('img').attr('src');
        $('.next-slick-img img').attr('src', next_slick_img);
        $('.next-slick-img').css('background-image', 'url(' + next_slick_img + ')');
        // For prev img
        var next_prev_slick_img = $('.slick-current').prev('.slider-image').find('img').attr('src');
        $('.prev-slick-img img').attr('src', next_prev_slick_img);
        $('.prev-slick-img').css('background-image', 'url(' + next_prev_slick_img + ')');
    }
})

here for convenience

Answer 1

Not
a

var prev_slick_img = $('.slick-current').prev('.slick-slide').find('img').attr('src');