Slick Slider


<head>
<style>

.slick-prev{
  background:#000;
  z-index:99999;
  width:50px;
  height:50px;
  position:absolute;
  left:0;
  top:50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.slick-next{
  background:#000;
  width:50px;
  height:50px;
  position:absolute;
  right:0;
  top:50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

</style>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" />
</head>
<body>

<div class="slides" style="max-width:600px;">
  <div class="item">
    <img src="/wp-content/uploads/d-1.jpg" alt="" width="600" height="600">
    <div class="slide-text">Text for slide 1</div>
  </div>
    <div class="item"><img src="/wp-content/uploads/d-2.jpg" alt="" width="600" height="600">
    <div class="slide-text">Text for slide 2</div>
  </div>
    <div class="item"><img src="/wp-content/uploads/d-3.jpg" alt="" width="600" height="600">
    <div class="slide-text">Text for slide 3</div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-lightbox/0.2.12/slick-lightbox.min.js" integrity="sha512-iSVaq9Huv1kxBDAOH7Il1rwIJD+uspMQC1r4Y73QquhbI2ia+PIXUoS5rBjWjYyD03S8t7gZmON+Dk6yPlWHXw==" crossorigin="anonymous"></script>

<script>
$(document).ready(function(){
  $('.slides').slick({
    dots: true,
    arrows: true,
    infinite: true,
    autoplay: true,
    autoplaySpeed: 4000,
    slidesToShow: 1,
    slidesToScroll: 1,
  });
});

$('.slides').slickLightbox({
  src: 'src',
  itemSelector: '.item img'
});
</script>
</body>
Categories
