Slick Carousel with Slick Lightbox

Question

Im having some problems adding slick lightbox to slick slider, it doesnt open the popup. After remove itemSelector img it opens the popup, but src gets undefined. Any tips?

JS:

$('.works-slideshow').slick({
    arrows: false,
    dots: false,
    infinite: true,
    autoplay: true,
    autoplaySpeed: 5000,
    slidesToShow: 3,
    slidesToScroll: 1,
    responsive: [
        {
            breakpoint: 600,
            settings: {
            slidesToShow: 2,
            slidesToScroll: 1
            }
        },
        {
            breakpoint: 480,
            settings: {
            slidesToShow: 1,
            slidesToScroll: 1
            }
        }
    ]
});

$('.works-slideshow').slickLightbox({
  src: 'src',
  itemSelector: '.team-image img'
});

HTML

<div class="row">
      <div class="works-slideshow text-center">
        <div class="owl-item">
          <div class="col-sm-12 mb-sm-20 wow bounceIn">
            <div class="team-item">
              <div class="team-image"><img src="assets/images/ss1.png" alt="Member Photo"/>
              </div>
              <div class="team-descr font-alt">
                <div class="team-name">text</div>
              </div>
            </div>
          </div>
        </div>

Answer 1

Seems like you used the wrong selector for your main slick slider/lightbox function. I have added a working example below.

$('.works-slideshow .team-item').each(function() {
  var slider = $(this);
  slider.slick({
    arrows: false,
    dots: false,
    accessibility: false,
    infinite: true,
    autoplay: true,
    autoplaySpeed: 5000,
    slidesToShow: 3,
    slidesToScroll: 1,
    responsive: [{
        breakpoint: 600,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 1
        }
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }
    ]
  });

  var sLightbox = $(this);
  sLightbox.slickLightbox({
    src: 'src',
    itemSelector: '.team-image img'
  });
});

img {
  width: 95%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-lightbox/0.2.12/slick-lightbox.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-lightbox/0.2.12/slick-lightbox.min.js"></script>


<div class="row">
  <div class="works-slideshow text-center">
    <div class="owl-item">
      <div class="col-sm-12 mb-sm-20 wow bounceIn">
        <div class="team-item">
          <div class="team-image">
            <img src="https://via.placeholder.com/350x150" alt="Member Photo" />
          </div>
          <div class="team-image">
            <img src="https://via.placeholder.com/350x150" alt="Member Photo" />
          </div>
          <div class="team-image">
            <img src="https://via.placeholder.com/350x150" alt="Member Photo" />
          </div>
          <div class="team-image">
            <img src="https://via.placeholder.com/350x150" alt="Member Photo" />
          </div>
          <div class="team-image">
            <img src="https://via.placeholder.com/350x150" alt="Member Photo" />
          </div>
          <div class="team-image">
            <img src="https://via.placeholder.com/350x150" alt="Member Photo" />
          </div>
        </div>
        <div class="team-descr font-alt">
          <div class="team-name">text</div>
        </div>
      </div>
    </div>
  </div>
</div>