Fullscreen Slick Slider

Use the power of slick.js in fullscreen mode.

Usage

1. Include slick-fullscreen.js and slick-fullscreen.css in your project.

2. Add data-slick-fullscreen to the container you want to open images in fullscreen.

<section data-slick-fullscreen>
  <a href="image1.jpg">
    <img src="image1-thumb.jpg">
  </a>
  <a href="image2.jpg">
    <img src="image2-thumb.jpg">
  </a>
</section>

By default all anchor tags are picked and used for the images, you can customise a different target by changing target along with any other options slick provides.

<section data-slick-fullscreen='{"target": "img", "slick":{ "dots": true, "centerMode": true, "centerPadding": "60px"}}'>
  <img src="image1.jpg">
  <img src="image2.jpg">
</section>