Fullscreen Slick Slider
Use slick.js in fullscreen mode.
Usage
-
Include
slick-fullscreen.jsandslick-fullscreen.cssin your project. -
Add
data-slick-fullscreento 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();