my-slick-gallery
Demo
https://vladshestakov.github.io/slick-gallery/
Installation
- Add assets to your page
<script src="https://cdn.jsdelivr.net/npm/my-slick-gallery@1.1.2/slick-gallery.min.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/my-slick-gallery@1.1.2/slick-gallery.min.css">
- Add a "slick-gallery" class to slick element.
<div class="my-slick slick-gallery"> <div><img src="images/1.jpg" alt=""></div> <div><img src="images/2.jpg" alt=""></div> <div><img src="images/3.jpg" alt=""></div> <div><img src="images/4.jpg" alt=""></div> <div><img src="images/5.jpg" alt=""></div> <div><img src="images/6.jpg" alt=""></div></div>
- That's all! Enjoy your full-screen gallery.
Customize
Example scss styles to adapt the appearance to your site.
$primary_color: #333; $secondary_color: #eee; div.slick-box{ &__arrow{ /* Arrow background */ background: $secondary_color; svg line{ /* Arrow color */ stroke: $primary_color; } &--next, &--prev{ /* Arrow border */ border-right: 4px solid $primary_color; } } &__preview{ /* Preview box background color */ background: $primary_color; } &__close{ /* Close button background */ background: $primary_color; }}
License
MIT