Fullscreen Slick Slider

Use 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 element which has anchor elements <a> of the images you want to open in fullscreen.

<section data-slick-fullscreen>
  <a href="image1.jpg"> <!-- This image will be used -->
    <img src="image1-thumb.jpg">
  </a>
  <a href="image2.jpg"> <!-- This image will be used -->
    <img src="image2-thumb.jpg">
  </a>
</section>

If your images are not inside <a> 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>

Options

target

The selector to use to find images.

closeIcon

Whether to add a close icon.

closeOnEsc

Whether to close on pressing escape button.

closeOnBackdrop

Whether to close when clicking on the backdrop.

slick

Specify options which should be passed to slick.

Open fullscreen manually

slickFullscreen.open($('.my-images'), { slick: { dots: false } }); // Specify any option slick provides.

Close the fullscreen

slickFullscreen.close();