The code below is a slick carousel that when someone clicks a slide, it will pop up the whole carousel. It is done with slick slider.

The problem that I have is on the pop up carousel, because it shows one slider at a time and I need it to show 3 slides... It has the slidesToShow: 3 so I don't know why it's not working... Any ideas?

Code embedded:

  <script src=".2.4.min.js"></script>
  <script src=".slick/1.6.0/slick.min.js"></script>
  <script src=".js" type="text/javascript" charset="utf-8"></script>

  <link rel="stylesheet" type="text/css" href=".css">
  <link rel="stylesheet" type="text/css" href=".slick/1.6.0/slick.css">
  <link rel="stylesheet" type="text/css" href=".css">

CSS:

 .slider {
        width: 50%;
        margin: 100px auto;
    }

    .slick-slide {
      margin: 0px 20px;
    }

    .slick-slide img {
      width: 100%;
    }

    .slick-prev:before,
    .slick-next:before {
        color: black;
    }

HTML:

<section class="center slider">
    <div class="single">
      <a href="">
        <img src="">
      </a>
    </div>
    <div class="single">
      <a href="">
      <img src="">
      </a>
    </div>
    <div class="single">
      <a href="">
      <img src="">
      </a>
    </div>
    <div class="single">
      <a href="">
      <img src="">
      </a>
    </div>
</section>

JS:

  <script type="text/javascript">
    $(document).on('ready', function() {


      $(".center").slick({
        dots: true,
        infinite: true,
        centerMode: true,
        slidesToShow: 1,
        slidesToScroll: 1,
        mobileFirst: true
      });

      $('.center').slickLightbox({
        itemSelector: 'a',
        navigateByKeyboard: true,
        dots: true,
        infinite: true,
        centerMode: true,
        slidesToShow: 3,
        slidesToScroll: 1,
        mobileFirst: true
      });

    });
  </script>

The code below is a slick carousel that when someone clicks a slide, it will pop up the whole carousel. It is done with slick slider.

The problem that I have is on the pop up carousel, because it shows one slider at a time and I need it to show 3 slides... It has the slidesToShow: 3 so I don't know why it's not working... Any ideas?

Code embedded:

  <script src="https://code.jquery./jquery-2.2.4.min.js"></script>
  <script src="https://cdn.jsdelivr/jquery.slick/1.6.0/slick.min.js"></script>
  <script src="https://mreq.github.io/slick-lightbox/dist/slick-lightbox.js" type="text/javascript" charset="utf-8"></script>

  <link rel="stylesheet" type="text/css" href="https://mreq.github.io/slick-lightbox/dist/slick-lightbox.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr/jquery.slick/1.6.0/slick.css">
  <link rel="stylesheet" type="text/css" href="https://mreq.github.io/slick-lightbox/gh-pages/bower_ponents/slick-carousel/slick/slick-theme.css">

CSS:

 .slider {
        width: 50%;
        margin: 100px auto;
    }

    .slick-slide {
      margin: 0px 20px;
    }

    .slick-slide img {
      width: 100%;
    }

    .slick-prev:before,
    .slick-next:before {
        color: black;
    }

HTML:

<section class="center slider">
    <div class="single">
      <a href="http://placehold.it/350x300?text=1">
        <img src="http://placehold.it/350x300?text=1">
      </a>
    </div>
    <div class="single">
      <a href="http://placehold.it/350x300?text=2">
      <img src="http://placehold.it/350x300?text=2">
      </a>
    </div>
    <div class="single">
      <a href="http://placehold.it/350x300?text=3">
      <img src="http://placehold.it/350x300?text=3">
      </a>
    </div>
    <div class="single">
      <a href="http://placehold.it/350x300?text=4">
      <img src="http://placehold.it/350x300?text=4">
      </a>
    </div>
</section>

JS:

  <script type="text/javascript">
    $(document).on('ready', function() {


      $(".center").slick({
        dots: true,
        infinite: true,
        centerMode: true,
        slidesToShow: 1,
        slidesToScroll: 1,
        mobileFirst: true
      });

      $('.center').slickLightbox({
        itemSelector: 'a',
        navigateByKeyboard: true,
        dots: true,
        infinite: true,
        centerMode: true,
        slidesToShow: 3,
        slidesToScroll: 1,
        mobileFirst: true
      });

    });
  </script>

• javascript
• jquery
• popup
• slider

2 Answers 2

You need to pass slick options to carousel like this:

  $('.center').slickLightbox({
    slick: {
      itemSelector: 'a',
      navigateByKeyboard: true,
      dots: true,
      infinite: true,
      centerMode: true,
      slidesToShow: 3,
      slidesToScroll: 1,
      mobileFirst: true
    }
  });

For all other options check here: https://github./mreq/slick-lightbox

$(document).ready(function() {
  $(".center").slick({
    dots: true,
    infinite: true,
    centerMode: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    mobileFirst: true
  });

  $('.center').slickLightbox({
    slick: {
      itemSelector: 'a',
      navigateByKeyboard: true,
      dots: true,
      infinite: true,
      centerMode: true,
      slidesToShow: 3,
      slidesToScroll: 1,
      mobileFirst: true
    }
  });
});

.slider {
  width: 50%;
  margin: 100px auto;
}

.slick-slide {
  margin: 0px 20px;
}

.slick-slide img {
  width: 100%;
}

.slick-prev:before,
.slick-next:before {
  color: black;
}

<link rel="stylesheet" type="text/css" href="https://mreq.github.io/slick-lightbox/dist/slick-lightbox.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr/jquery.slick/1.6.0/slick.css">
<link rel="stylesheet" type="text/css" href="https://mreq.github.io/slick-lightbox/gh-pages/bower_ponents/slick-carousel/slick/slick-theme.css">

<script src="https://code.jquery./jquery-2.2.4.min.js"></script>
<script src="https://cdn.jsdelivr/jquery.slick/1.6.0/slick.min.js"></script>
<script src="https://mreq.github.io/slick-lightbox/dist/slick-lightbox.js" type="text/javascript" charset="utf-8"></script>




<section class="center slider">
  <div class="single">
    <a href="http://placehold.it/350x300?text=1">
      <img src="http://placehold.it/350x300?text=1">
    </a>
  </div>
  <div class="single">
    <a href="http://placehold.it/350x300?text=2">
      <img src="http://placehold.it/350x300?text=2">
    </a>
  </div>
  <div class="single">
    <a href="http://placehold.it/350x300?text=3">
      <img src="http://placehold.it/350x300?text=3">
    </a>
  </div>
  <div class="single">
    <a href="http://placehold.it/350x300?text=4">
      <img src="http://placehold.it/350x300?text=4">
    </a>
  </div>
</section>

I don't use jQuery, but I do Slick from time to time. It looks that you're trying to initiate another instance from the same markup, but it might be that slickjs has an instance already, where is trying to do the same slickLightbox - had a quick read and noticed it's a plugin/extension for slickjs.

So, what I suggest you to do is to add a listener to each slide panel and when it clicks you create a new instane of slickLightbox. You'll need a different markup for this too (to keep both separated, to avoid any instances clashing against).

  // mind typos, did this quickly, but the syntax should be similar
  var panels = document.querySelectorAll('.slick .single')
  panels.addEventListener('click', function () {
      $('.cloned-markup').slickLightbox({
        itemSelector: 'a',
        navigateByKeyboard: true,
        dots: true,
        infinite: true,
        centerMode: true,
        slidesToShow: 3,
        slidesToScroll: 1,
        mobileFirst: true
      });
  })

And the extra markup:

<div class="cloned-markup">
    <div class="single">
      <a href="http://placehold.it/350x300?text=1">
        <img src="http://placehold.it/350x300?text=1">
      </a>
    </div>
    <div class="single">
      <a href="http://placehold.it/350x300?text=2">
      <img src="http://placehold.it/350x300?text=2">
      </a>
    </div>
    <div class="single">
      <a href="http://placehold.it/350x300?text=3">
      <img src="http://placehold.it/350x300?text=3">
      </a>
    </div>
    <div class="single">
      <a href="http://placehold.it/350x300?text=4">
      <img src="http://placehold.it/350x300?text=4">
      </a>
    </div>
</div>