Documentation

Usage Example

Overview

The `slider-container` is a wrapper that holds all the details of the slider, including navigation, slides, and animations.

Slider Structure

    
<div class="slider-container slider-parallax vw-100 vh-100 d-flex align-items-center position-relative overflow-hidden"></div>
        <!-- Start zlides-texts - Container for project descriptions and titles -->
    <div class="zlides-texts w-100 h-100 position-absolute start-0 top-0 d-flex justify-content-center align-items-center">
                <!-- Start Swiper slider for project titles and tags -->
        <div class="swiper slider-texts w-100 h-100 position-relative" data-hover-preview="true" data-zlides-options='{
            "direction":"vertical",
            "speed":"800",
            "screenLarge":"5.5",
            "screenDesktop":"4",
            "screenTablet":"5",
            "screenMobile":"5",
            "centeredSlides":"false",
            "spaceBetween":"0"
        }'>
                        <!-- Start Swiper Wrapper -->
            <div class="swiper-wrapper mx-auto">
                                <!-- Project 1 -->
                <div class="swiper-slide w-100 start-0 d-flex align-items-center">
                    <div class="project-data cursor-none">
                                               <!-- Project tags -->
                        <div class="tags">
                            <a href="#">
                                <span class="body-xs color-5">Style</span>
                            </a>

                            <a href="#">
                                <span class="body-xs color-5">Clothing</span>
                            </a>
                        </div>
                                                 <!-- Project title -->
                        <a href="#" class="slider-text d-flex flex-column justify-content-center justify-content-lg-start position-relative">
                            <span class="number counter pe-3 position-absolute end-100 top-0"></span>
                            <p class="slide-title">Fashion</p>
                        </a>
                    </div>
                </div>
            </div>
                <!-- End Swiper Wrapper -->
    </div>
        <!-- End Swiper Slider -->

        <!-- Start Pagination indicators for the slider -->
    <div class="slider-pagination cursor-none pe-lg-4"></div>
        <!-- End Pagination indicators for the slider -->
        <!-- Start zlides-images -->
    <div class="zlides-images position-absolute overflow-hidden dark-overlay">
               <!-- Swiper slider for image thumbnails -->
        <div class="swiper slider-thumbs h-100 overflow-visible" data-webGel="false" data-slider-thumbs='{
            "direction":"horizontal",
            "speed":800,
            "screenLarge":"1",
            "screenDesktop":"1",
            "screenTablet":"1",
            "screenMobile":"1",
            "centeredSlides":"true",
            "spaceBetween":"0"
        }'>
            
                        <!-- Start Swiper Wrapper -->
            <div class="swiper-wrapper h-100">
                                <!-- Project 1 Image Slide -->
                <div class="swiper-slide h-100 overflow-hidden">
                    <div class="slider-image w-100 h-100 d-flex justify-content-center align-items-center position-relative">
                        <img src="" class="liquid-element w-100 h-100 object-fit-cover" alt="">
                    </div>
                </div>
            </div>
                        <!-- End Swiper Wrapper -->
        </div>
               <!-- End Swiper Slider -->
        
                <!-- Canvas element for image warping effects -->
        <div class="contain-canvas-images">
            <canvas id="canvasThree" class="canvas-images" data-options='{
                "warpImage":"assets/images/canvasWarpImage.jpg",
                "direction":"horizontal",
                "containerSlider":".zlides-images",
                "swiperElement":".zlides-images .swiper",
                "selectImagesFrom":".liquid-element"
            }'></canvas>
        </div>
    </div>

        <!-- End zlides-images -->
        <!-- Start Contact Section -->
    <div class="zlider-contact mb-5 mb-lg-0 pb-5 position-absolute d-flex flex-column flex-lg-row align-items-center align-items-lg-end">
              <!-- Email Contact -->
        <div class="contact-email pe-lg-5 pb-3 pb-lg-0 h-100 d-flex flex-column align-items-center align-items-lg-start justify-content-end">
            <p class="mb-3 body-xs color-5">Ready to bring your project to life?</p>
            <a class="h5 m-0 text-gradient" href="mailto:example@zlides.zlides" aria-label="Send an email to example@zlides.zlides">
                example@zlides.zlides
            </a>
        </div>
              <!-- Phone Contact -->
        <div class="contact-phone ps-lg-5 w-100 h-100 position-relative d-flex justify-content-center align-items-end">
            <a class="h5 m-0 text-nowrap" href="tel:+12345689" aria-label="Call us at +0 123 456 789">
                <span class="color-primary">+</span> 0 123 456 789
            </a>
        </div>
    </div>
        <!-- End Contact Section -->
</div>
    

Colors

In the template, there is a set of predefined colors that are used throughout the design. These colors are defined using CSS custom properties (CSS variables) for easy maintenance and customization.

SCSS File

The color variables defined in \_colors.scss are then used in the stylesheet to style various elements of the page. You can customize these values in the SCSS file to change the theme colors across the site.

Explanation of Color Variables: