My-slick-gallery NPM

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.

Screenshot

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;
    }
}