Start Here

Introduction

Download

Syntax

Core Concepts

Aspect Ratio

Border Radius

Border Size

Border Style

Cursor

Display

Flex

Flex Alignment

Flex Direction

Flex Grow

Flex Position

Flex Size

Flex Width

Font

Gap

Height

Margin

Padding

Spacing

Width

UI Effects

Animations

Single Box

Multi Box

3D Box

Other

Box Shadows

OutSet Shadow

InSet Shadow

Text Shadow

OutSet Shadow

InSet Shadow

UI Widgets

Accordion

Buttons

Calendar

Card

Checks & Radio

Data Tables

DropDown

DropDown Multi Select

Gallery

Pagination

Pop-Up

Progress Bar

Skeleton

Spinners

Suggestion

Tabs

Toasts

Slider

Text Boxes

Text Editor

Tool Tip

Icons

Theme Color Shade

Color Shade

Text Color

Background Color

Border Color

Gradient

Text Gradient

Single Color

Double Color

Triple Color

Background Gradient

Single Color

Double Color

Triple Color

Border Gradient

Single Color

Double Color

Triple Color

Other Pages

Landing Pages

Top Nav 1

Top Nav 2

Side Nav 1

Forget Password

Apps

Add Data

Nav First Level

Nav Second Level

Nav Third Level

N
A
V

Responsive & Customizable Slider

Smooth Transitions with Style

Our responsive slider is the perfect tool for showcasing images, content, or products with flair. Designed to provide an intuitive and visually appealing experience, our slider adapts seamlessly to any device, ensuring that your website looks stunning on desktops, tablets, and smartphones.

Key Features:

Fully Responsive: The slider automatically adjusts to fit any screen size, offering a consistent and engaging experience on all devices.
Easily Customizable: Modify the slider’s appearance and functionality to align with your brand’s aesthetic. Adjust colors, animations, navigation arrows, and more with ease.
Smooth Animations: Captivate your audience with elegant transitions and effects that make your content stand out.
Simple Integration: Implementing our slider is quick and hassle-free, with clean, well-documented code to streamline the setup process.
Cross-Browser Compatibility: Tested to work seamlessly across all major browsers, ensuring a flawless experience for your users no matter their platform.

Single Image Slider

Hadimba Temple

Hotel Mountain Top Terrace

Hadimba Temple

Source Code


<div class="AniSlideShow Ht30vh Sl:Ht60vh Wh100p">
    <div class="SlideContainer DyFx FxAnIsCr OwXAo OwYHn Wh100p Ht100p">

        <div class="SlideUT PnRe DyNe Wh100p Ht100p">
            <div class="SlideImage DyFx FxAnIsCr FxJyCtCr Wh100p Ht100p">
                <img class="Wh100p Ht100p" alt="Slider Image" src="" src-ut="/SliderImage/Snow/Snow1.jpg">
            </div>
            <div class="PnAe PnBm5p PnLt50p Pg5 BrRs5 TmTeVe50p0p FtSe16 CrBdBk97 CrWe SlideTextUT SFade">Hadimba Temple</div>
        </div>

        <div class="SlideUT PnRe DyNe Wh100p Ht100p">
            <div class="SlideImage DyFx FxAnIsCr FxJyCtCr Wh100p Ht100p">
                <img class="Wh100p Ht100p" alt="Slider Image" src="" src-ut="/SliderImage/Snow/Snow2.jpg">
            </div>
            <div class="PnAe PnBm5p PnLt50p Pg5 BrRs5 TmTeVe50p0p FtSe16 CrBdBk97 CrWe SlideTextUT SFade">Hotel Mountain Top Terrace</div>
        </div>

        <div class="SlideUT PnRe DyNe Wh100p Ht100p">
            <div class="SlideImage DyFx FxAnIsCr FxJyCtCr Wh100p Ht100p">
                <img class="Wh100p Ht100p" alt="Slider Image" src="" src-ut="/SliderImage/Snow/Snow3.jpg">
            </div>
            <div class="PnAe PnBm5p PnLt50p Pg5 BrRs5 TmTeVe50p0p FtSe16 CrBdBk97 CrWe SlideTextUT SFade">Hadimba Temple</div>
        </div>

    </div>
</div>


// classes for customizing the slider
let Classes = {
    indicatorButtonContainer: 'PnAe PnTp35p PnRt10p Pg3 SwBx1Dv-Vn1 DyFx FxDnCn FxAnIsCr FxJyCtCr Gp10',
    indicatorButton: 'BrRs50p Br1 CrBrWe CrurPr Ht10 Wh10',
    indicatorColor: '#AA8453',
    prevBtn: 'CrurPr PnAe PnTp40p Pg6 CrWe BrRs5 DyFx FxAnIsCr FxJyCtCr Br0 CrBdBk30Lt91 ZIx100000',
    nextBtn: 'CrurPr PnAe PnTp40p PnRt0 Pg6 CrWe BrRs5 DyFx FxAnIsCr FxJyCtCr Br0 CrBdBk30Lt91 ZIx100000',
    slideBackground: 'PnFd PnTp0 PnLt0 Ht100vh Wh100vw CrBdBk30Lt91 ZIx1000000',
    slideFull: 'SlideFull PnFd Wh90vw PnLt50p PnTp50p MnWh90p ZIx100000000 TmTeVe50pVe50p',
    slideOverlay: 'PnAe PnTp0 PnLt0 Wh100p Ht100p ZIx-ve1 Oy0p',
    slideFullCloseBtn: 'SlideFullCloseBtn PnAe PnTp1p PnRt1p Wh30 Ht30 BrRs50p Pg8 FtSe16 FtWt600 FtFyAl ZIx10000000000 DyFx FxAnIsCr FxJyCtCr CrurPr CrBdBk20Lt91 CrWe',
    slideShow: 'SlideShowUT PnRe ZIx1',
};

const animateSliderObj = {
    Class: 'AniSlideShow',
    Magnify: 'Y',
    ButtonSize: { Min: '28px', Max: '46px' }, // previous-next button size
    TextSize: { Min: "14px", Max: "22px" }, // caption size
    AspectRatio: '2.85/1', // aspect ratio of an image
    Content: 'Animate',
    Animate: 'SAngular',
    OverLay: 'Y',
    OverLayImg: '/img/fiber01.jpg',
    PrevNextButton: true,
    Indicators: true,
    TouchSwipe: true,
    Classes,
}

document.addEventListener('DOMContentLoaded', function () {

    CT.CeSr(animateSliderObj);

});

Vertical Single Image Slider

Hadimba Temple

Hotel Mountain Top Terrace

Hadimba Mata Temple

Source Code


<div class="AniSlideShowVertical Ht30vh Sl:Ht60vh Wh100p">
    <div class="SlideContainer DyFx FxAnIsCr OwXAo OwYHn Wh100p Ht100p">

        <div class="SlideUT PnRe DyNe Wh100p Ht100p">
            <div class="SlideImage DyFx FxAnIsCr FxJyCtCr Wh100p Ht100p">
                <img class="Wh100p Ht100p" alt="Slider Image" src="" src-ut="/SliderImage/Snow/Snow1.jpg">
            </div>
            <div class="PnAe PnBm10p PnLt50p Pg5 BrRs5 TmTeVe50p0p FtSe16 CrBdBk97 CrWe SlideTextUT SFade">Hadimba Temple</div>
        </div>

        <div class="SlideUT PnRe DyNe Wh100p Ht100p">
            <div class="SlideImage DyFx FxAnIsCr FxJyCtCr Wh100p Ht100p">
                <img class="Wh100p Ht100p" alt="Slider Image" src="" src-ut="/SliderImage/Snow/Snow2.jpg">
            </div>
            <div class="PnAe PnBm10p PnLt50p Pg5 BrRs5 TmTeVe50p0p FtSe16 CrBdBk97 CrWe SlideTextUT SFade">Hotel Mountain Top Terrace</div>
        </div>

        <div class="SlideUT PnRe DyNe Wh100p Ht100p">
            <div class="SlideImage DyFx FxAnIsCr FxJyCtCr Wh100p Ht100p">
                <img class="Wh100p Ht100p" alt="Slider Image" src="" src-ut="/SliderImage/Snow/Snow3.jpg">
            </div>
            <div class="PnAe PnBm10p PnLt50p Pg5 BrRs5 TmTeVe50p0p FtSe16 CrBdBk97 CrWe SlideTextUT SFade">Hadimba Mata Temple</div>
        </div>

    </div>
</div>


// classes for customizing the slider
let ClassesVartical = {
    indicatorButtonContainer: 'PnAe PnTp50p PnRt10p TmTeVe0p50p Pg3 SwBx1Dv-Vn1 DyFx FxDnCn FxAnIsCr FxJyCtCr Gp10',
    indicatorButton: 'BrRs50p Br1 CrBrWe CrurPr Ht10 Wh10',
    indicatorColor: '#AA8453',
    prevBtn: 'CrurPr PnAe PnTp0p PnLt50p PgLtRt20 PgTpBm5 CrWe BrRs5 DyFx FxAnIsCr FxJyCtCr Br0 CrBdBk30Lt91 ZIx100000 TmTeVe50p0p',
    nextBtn: 'CrurPr PnAe PnBm0p PnLt50p PgLtRt20 PgTpBm5 CrWe BrRs5 DyFx FxAnIsCr FxJyCtCr Br0 CrBdBk30Lt91 ZIx100000 TmTeVe50p0p',
    slideBackground: 'PnFd PnTp0 PnLt0 Ht100vh Wh100vw CrBdBk30Lt91 ZIx1000000',
    slideFull: 'SlideFull PnFd Wh90vw PnLt50p PnTp50p MnWh90p ZIx100000000 TmTeVe50pVe50p',
    slideOverlay: 'PnAe PnTp0 PnLt0 Wh100p Ht100p ZIx-ve1 Oy0p',
    slideFullCloseBtn: 'SlideFullCloseBtn PnAe PnTp1p PnRt1p Wh30 Ht30 BrRs50p Pg8 FtSe16 FtWt600 FtFyAl ZIx10000000000 DyFx FxAnIsCr FxJyCtCr CrurPr CrBdBk20Lt91 CrWe',
    slideShow: 'SlideShowUT PnRe ZIx1',
};

const animateVerticalSliderObj = {
    Class: 'AniSlideShowVertical',
    Magnify: 'Y',
    ButtonSize: { Min: '16px', Max: '16px' }, // previous-next button size
    TextSize: { Min: "14px", Max: "22px" }, // caption size
    AspectRatio: '2.85/1', // aspect ratio of an image
    Content: 'Animate',
    Animate: 'SAngular',
    OverLay: 'Y',
    OverLayImg: '/img/fiber01.jpg',
    PrevNextButton: true,
    Indicators: true,
    TouchSwipe: true,
    VerticalSlider: true,
    Classes: ClassesVartical,
}

document.addEventListener('DOMContentLoaded', function () {

    CT.CeSr(animateVerticalSliderObj);

});

Auto Slider Example

I am Himalayan Bulbul

I am Spotted Dove

I am Myna

Source Code


<div class="MySlideShow Wh100p Ht30vh Sl:Ht60vh">
    <div class="SlideContainer DyFx FxAnIsCr OwXAo OwYHn PnRe Wh100p Ht100p">

        <div class="SlideUT PnRe DyNe Wh100p Ht100p">
            <div class="SlideImage DyFx FxAnIsCr FxJyCtCr Wh100p Ht100p">
                <img class="Wh100p Ht100p" alt="Slider Image" src="" src-ut="/SliderImage/Bird/Bird1.jpg">
            </div>
            <div class="PnAe PnBm5p PnLt50p Pg5 BrRs5 TmTeVe50p0p FtSe16 CrBdBk97 CrWe SlideTextUT SFade">I am Himalayan Bulbul</div>
        </div>

        <div class="SlideUT PnRe DyNe Wh100p Ht100p">
            <div class="SlideImage DyFx FxAnIsCr FxJyCtCr Wh100p Ht100p">
                <img class="Wh100p Ht100p" alt="Slider Image" src="" src-ut="/SliderImage/Bird/Bird2.jpg">
            </div>
            <div class="PnAe PnBm5p PnLt50p Pg5 BrRs5 TmTeVe50p0p FtSe16 CrBdBk97 CrWe SlideTextUT SFade">I am Himalayan Bulbul</div>
        </div>

        <div class="SlideUT PnRe DyNe Wh100p Ht100p">
            <div class="SlideImage DyFx FxAnIsCr FxJyCtCr Wh100p Ht100p">
                <img class="Wh100p Ht100p" alt="Slider Image" src="" src-ut="/SliderImage/Bird/Bird3.jpg">
            </div>
            <div class="PnAe PnBm5p PnLt50p Pg5 BrRs5 TmTeVe50p0p FtSe16 CrBdBk97 CrWe SlideTextUT SFade">I am Spotted Dove</div>
        </div>

        <div class="SlideUT PnRe DyNe Wh100p Ht100p">
            <div class="SlideImage DyFx FxAnIsCr FxJyCtCr Wh100p Ht100p">
                <img class="Wh100p Ht100p" alt="Slider Image" src="" src-ut="/SliderImage/Bird/Bird4.jpg">
            </div>
            <div class="PnAe PnBm5p PnLt50p Pg5 BrRs5 TmTeVe50p0p FtSe16 CrBdBk97 CrWe SlideTextUT SFade">I am Myna</div>
        </div>

    </div>
</div>


// classes for customizing the slider
let Classes = {
    indicatorButtonContainer: 'PnAe PnTp35p PnRt10p Pg3 SwBx1Dv-Vn1 DyFx FxDnCn FxAnIsCr FxJyCtCr Gp10',
    indicatorButton: 'BrRs50p Br1 CrBrWe CrurPr Ht10 Wh10',
    indicatorColor: '#AA8453',
    prevBtn: 'CrurPr PnAe PnTp40p Pg6 CrWe BrRs5 DyFx FxAnIsCr FxJyCtCr Br0 CrBdBk30Lt91 ZIx100000',
    nextBtn: 'CrurPr PnAe PnTp40p PnRt0 Pg6 CrWe BrRs5 DyFx FxAnIsCr FxJyCtCr Br0 CrBdBk30Lt91 ZIx100000',
    slideBackground: 'PnFd PnTp0 PnLt0 Ht100vh Wh100vw CrBdBk30Lt91 ZIx1000000',
    slideFull: 'SlideFull PnFd Wh90vw PnLt50p PnTp50p MnWh90p ZIx100000000 TmTeVe50pVe50p',
    slideOverlay: 'PnAe PnTp0 PnLt0 Wh100p Ht100p ZIx-ve1 Oy0p',
    slideFullCloseBtn: 'SlideFullCloseBtn PnAe PnTp1p PnRt1p Wh30 Ht30 BrRs50p Pg8 FtSe16 FtWt600 FtFyAl ZIx10000000000 DyFx FxAnIsCr FxJyCtCr CrurPr CrBdBk20Lt91 CrWe',
    slideShow: 'SlideShowUT PnRe ZIx1',
};

const mySlideShowObj = {
    Class: 'MySlideShow',
    AspectRatio: '2.85/1',
    Content: 'Animate',
    Animate: 'SZoomOut',
    Magnify: 'Y',
    ButtonSize: { Min: '18px', Max: '28px' },
    TextSize: { Min: "14px", Max: "28px" },
    SlideDirection: 'Line',
    RunSlider: 3000,
    PrevNextButton: true,
    Classes,
}

document.addEventListener('DOMContentLoaded', function () {

    CT.CeSr(mySlideShowObj);

});

Manual Multi Image Slider

Source Code


<div class="MultipleSlideShow Wh100p Ht30vh Sl:Ht60vh">
    <div class="SlideContainer DyFx FxAnIsCr OwXAo OwYHn PnRe Wh100p Ht100p">

        <div class="SlideUT PnRe DyNe Wh100p Ht100p">
            <div class="SlideImage DyFx FxAnIsCr FxJyCtCr Wh100p Ht100p">
                <img class="Wh100p Ht100p" alt="Slider Image" src="" src-ut="/SliderImage/Flower/F1.jpg">
            </div>
        </div>

        <div class="SlideUT PnRe DyNe Wh100p Ht100p">
            <div class="SlideImage DyFx FxAnIsCr FxJyCtCr Wh100p Ht100p">
                <img class="Wh100p Ht100p" alt="Slider Image" src="" src-ut="/SliderImage/Flower/F2.jpg">
            </div>
        </div>

        <div class="SlideUT PnRe DyNe Wh100p Ht100p">
            <div class="SlideImage DyFx FxAnIsCr FxJyCtCr Wh100p Ht100p">
                <img class="Wh100p Ht100p" alt="Slider Image" src="" src-ut="/SliderImage/Flower/F3.jpg">
            </div>
        </div>

        <div class="SlideUT PnRe DyNe Wh100p Ht100p">
            <div class="SlideImage DyFx FxAnIsCr FxJyCtCr Wh100p Ht100p">
                <img class="Wh100p Ht100p" alt="Slider Image" src="" src-ut="/SliderImage/Flower/F4.jpg">
            </div>
        </div>

        <div class="SlideUT PnRe DyNe Wh100p Ht100p">
            <div class="SlideImage DyFx FxAnIsCr FxJyCtCr Wh100p Ht100p">
                <img class="Wh100p Ht100p" alt="Slider Image" src="" src-ut="/SliderImage/Flower/F5.jpg">
            </div>
        </div>

        <div class="SlideUT PnRe DyNe Wh100p Ht100p">
            <div class="SlideImage DyFx FxAnIsCr FxJyCtCr Wh100p Ht100p">
                <img class="Wh100p Ht100p" alt="Slider Image" src="" src-ut="/SliderImage/Flower/F6.jpg">
            </div>
        </div>

    </div>
</div>


// classes for customizing the slider
let Classes = {
    indicatorButtonContainer: 'PnAe PnTp35p PnRt10p Pg3 SwBx1Dv-Vn1 DyFx FxDnCn FxAnIsCr FxJyCtCr Gp10',
    indicatorButton: 'BrRs50p Br1 CrBrWe CrurPr Ht10 Wh10',
    indicatorColor: '#AA8453',
    prevBtn: 'CrurPr PnAe PnTp40p Pg6 CrWe BrRs5 DyFx FxAnIsCr FxJyCtCr Br0 CrBdBk30Lt91 ZIx100000',
    nextBtn: 'CrurPr PnAe PnTp40p PnRt0 Pg6 CrWe BrRs5 DyFx FxAnIsCr FxJyCtCr Br0 CrBdBk30Lt91 ZIx100000',
    slideBackground: 'PnFd PnTp0 PnLt0 Ht100vh Wh100vw CrBdBk30Lt91 ZIx1000000',
    slideFull: 'SlideFull PnFd Wh90vw PnLt50p PnTp50p MnWh90p ZIx100000000 TmTeVe50pVe50p',
    slideOverlay: 'PnAe PnTp0 PnLt0 Wh100p Ht100p ZIx-ve1 Oy0p',
    slideFullCloseBtn: 'SlideFullCloseBtn PnAe PnTp1p PnRt1p Wh30 Ht30 BrRs50p Pg8 FtSe16 FtWt600 FtFyAl ZIx10000000000 DyFx FxAnIsCr FxJyCtCr CrurPr CrBdBk20Lt91 CrWe',
    slideShow: 'SlideShowUT PnRe ZIx1',
};


const multipleSlideShowObj = {
    Class: 'MultipleSlideShow',
    ButtonSize: { Min: '28px', Max: '46px' },
    Content: 'SlideMultiple',
    ShowSlide: '3',
    SlidePadding: '2px',
    PrevNextButton: true,
    //SlideDirection: 'Line',
    //Responsive: [
    //    { "ViewPort": "768", "ShowSlides": "1" },
    //    { "ViewPort": "1024", "ShowSlides": "2" },
    //    { "ViewPort": "1300", "ShowSlides": "3" }
    //],
    Classes,
}

document.addEventListener('DOMContentLoaded', function () {

    CT.CeSr(multipleSlideShowObj);

});

Manual Vertical Multi Image Slider

Source Code


<div class="MultipleSlideShowVertical Wh100p Sl:Wh40p Ht50vh Sl:Ht80vh">
    <div class="SlideContainer DyFx FxDnCn FxAnIsCr OwXAo OwYHn PnRe Wh100p Ht100p">

        <div class="SlideUT PnRe DyNe Wh100p Ht100p">
            <div class="SlideImage DyFx FxAnIsCr FxJyCtCr Wh100p Ht100p">
                <img class="Wh100p Ht100p" alt="Slider Image" src="" src-ut="/SliderImage/Flower/F1.jpg">
            </div>
        </div>

        <div class="SlideUT PnRe DyNe Wh100p Ht100p">
            <div class="SlideImage DyFx FxAnIsCr FxJyCtCr Wh100p Ht100p">
                <img class="Wh100p Ht100p" alt="Slider Image" src="" src-ut="/SliderImage/Flower/F2.jpg">
            </div>
        </div>

        <div class="SlideUT PnRe DyNe Wh100p Ht100p">
            <div class="SlideImage DyFx FxAnIsCr FxJyCtCr Wh100p Ht100p">
                <img class="Wh100p Ht100p" alt="Slider Image" src="" src-ut="/SliderImage/Flower/F3.jpg">
            </div>
        </div>

        <div class="SlideUT PnRe DyNe Wh100p Ht100p">
            <div class="SlideImage DyFx FxAnIsCr FxJyCtCr Wh100p Ht100p">
                <img class="Wh100p Ht100p" alt="Slider Image" src="" src-ut="/SliderImage/Flower/F4.jpg">
            </div>
        </div>

        <div class="SlideUT PnRe DyNe Wh100p Ht100p">
            <div class="SlideImage DyFx FxAnIsCr FxJyCtCr Wh100p Ht100p">
                <img class="Wh100p Ht100p" alt="Slider Image" src="" src-ut="/SliderImage/Flower/F5.jpg">
            </div>
        </div>

        <div class="SlideUT PnRe DyNe Wh100p Ht100p">
            <div class="SlideImage DyFx FxAnIsCr FxJyCtCr Wh100p Ht100p">
                <img class="Wh100p Ht100p" alt="Slider Image" src="" src-ut="/SliderImage/Flower/F6.jpg">
            </div>
        </div>

    </div>
</div>


// classes for customizing the slider
let ClassesVartical = {
    indicatorButtonContainer: 'PnAe PnTp50p PnRt10p TmTeVe0p50p Pg3 SwBx1Dv-Vn1 DyFx FxDnCn FxAnIsCr FxJyCtCr Gp10',
    indicatorButton: 'BrRs50p Br1 CrBrWe CrurPr Ht10 Wh10',
    indicatorColor: '#AA8453',
    prevBtn: 'CrurPr PnAe PnTp0p PnLt50p PgLtRt20 PgTpBm5 CrWe BrRs5 DyFx FxAnIsCr FxJyCtCr Br0 CrBdBk30Lt91 ZIx100000 TmTeVe50p0p',
    nextBtn: 'CrurPr PnAe PnBm0p PnLt50p PgLtRt20 PgTpBm5 CrWe BrRs5 DyFx FxAnIsCr FxJyCtCr Br0 CrBdBk30Lt91 ZIx100000 TmTeVe50p0p',
    slideBackground: 'PnFd PnTp0 PnLt0 Ht100vh Wh100vw CrBdBk30Lt91 ZIx1000000',
    slideFull: 'SlideFull PnFd Wh90vw PnLt50p PnTp50p MnWh90p ZIx100000000 TmTeVe50pVe50p',
    slideOverlay: 'PnAe PnTp0 PnLt0 Wh100p Ht100p ZIx-ve1 Oy0p',
    slideFullCloseBtn: 'SlideFullCloseBtn PnAe PnTp1p PnRt1p Wh30 Ht30 BrRs50p Pg8 FtSe16 FtWt600 FtFyAl ZIx10000000000 DyFx FxAnIsCr FxJyCtCr CrurPr CrBdBk20Lt91 CrWe',
    slideShow: 'SlideShowUT PnRe ZIx1',
};


const multipleVerticalSlideShowObj = {
    Class: 'MultipleSlideShowVertical',
    ButtonSize: { Min: '16px', Max: '16px' }, // previous-next button size
    Content: 'SlideMultiple',
    ShowSlide: '3',
    SlidePadding: '2px',
    PrevNextButton: true,
    Responsive: [
        { "ViewPort": "768", "ShowSlides": "1" },
        { "ViewPort": "1024", "ShowSlides": "2" },
        { "ViewPort": "1300", "ShowSlides": "3" }
    ],
    VerticalSlider: true,
    Classes: ClassesVartical,
}

document.addEventListener('DOMContentLoaded', function () {

    CT.CeSr(multipleVerticalSlideShowObj);

});

Auto Multi Image Slider

Source Code


<div class="MultipleSlideShowAuto Wh100p Ht30vh Sl:Ht60vh">
    <div class="SlideContainer DyFx FxAnIsCr OwXAo OwYHn PnRe Wh100p Ht100p">

        <div class="SlideUT Wh100p Ht100p PnRe DyNe">
            <div class="SlideImage DyFx FxAnIsCr FxJyCtCr Wh100p Ht100p">
                <img class="Wh100p Ht100p" alt="Slider Image" src="" src-ut="/SliderImage/Flower/F1.jpg">
            </div>
        </div>

        <div class="SlideUT Wh100p Ht100p PnRe DyNe">
            <div class="SlideImage DyFx FxAnIsCr FxJyCtCr Wh100p Ht100p">
                <img class="Wh100p Ht100p" alt="Slider Image" src="" src-ut="/SliderImage/Flower/F2.jpg">
            </div>
        </div>

        <div class="SlideUT Wh100p Ht100p PnRe DyNe">
            <div class="SlideImage DyFx FxAnIsCr FxJyCtCr Wh100p Ht100p">
                <img class="Wh100p Ht100p" alt="Slider Image" src="" src-ut="/SliderImage/Flower/F3.jpg">
            </div>
        </div>

        <div class="SlideUT Wh100p Ht100p PnRe DyNe">
            <div class="SlideImage DyFx FxAnIsCr FxJyCtCr Wh100p Ht100p">
                <img class="Wh100p Ht100p" alt="Slider Image" src="" src-ut="/SliderImage/Flower/F4.jpg">
            </div>
        </div>

        <div class="SlideUT Wh100p Ht100p PnRe DyNe">
            <div class="SlideImage DyFx FxAnIsCr FxJyCtCr Wh100p Ht100p">
                <img class="Wh100p Ht100p" alt="Slider Image" src="" src-ut="/SliderImage/Flower/F5.jpg">
            </div>
        </div>

        <div class="SlideUT Wh100p Ht100p PnRe DyNe">
            <div class="SlideImage DyFx FxAnIsCr FxJyCtCr Wh100p Ht100p">
                <img class="Wh100p Ht100p" alt="Slider Image" src="" src-ut="/SliderImage/Flower/F6.jpg">
            </div>
        </div>

    </div>
</div>


// classes for customizing the slider
let Classes = {
    indicatorButtonContainer: 'PnAe PnTp35p PnRt10p Pg3 SwBx1Dv-Vn1 DyFx FxDnCn FxAnIsCr FxJyCtCr Gp10',
    indicatorButton: 'BrRs50p Br1 CrBrWe CrurPr Ht10 Wh10',
    indicatorColor: '#AA8453',
    prevBtn: 'CrurPr PnAe PnTp40p Pg6 CrWe BrRs5 DyFx FxAnIsCr FxJyCtCr Br0 CrBdBk30Lt91 ZIx100000',
    nextBtn: 'CrurPr PnAe PnTp40p PnRt0 Pg6 CrWe BrRs5 DyFx FxAnIsCr FxJyCtCr Br0 CrBdBk30Lt91 ZIx100000',
    slideBackground: 'PnFd PnTp0 PnLt0 Ht100vh Wh100vw CrBdBk30Lt91 ZIx1000000',
    slideFull: 'SlideFull PnFd Wh90vw PnLt50p PnTp50p MnWh90p ZIx100000000 TmTeVe50pVe50p',
    slideOverlay: 'PnAe PnTp0 PnLt0 Wh100p Ht100p ZIx-ve1 Oy0p',
    slideFullCloseBtn: 'SlideFullCloseBtn PnAe PnTp1p PnRt1p Wh30 Ht30 BrRs50p Pg8 FtSe16 FtWt600 FtFyAl ZIx10000000000 DyFx FxAnIsCr FxJyCtCr CrurPr CrBdBk20Lt91 CrWe',
    slideShow: 'SlideShowUT PnRe ZIx1',
};


const multipleSlideShowAutoObj = {
    Class: 'MultipleSlideShowAuto',
    ButtonSize: { Min: '28px', Max: '46px' },
    Content: 'SlideMultiple',
    ShowSlide: '3',
    SlidePadding: '24px',
    RunSlider: 3000,
    Magnify: 'Y',
    PrevNextButton: true,
    //SlideDirection: 'Line',
    //Responsive: [
    //    { "ViewPort": "768", "ShowSlides": "1" },
    //    { "ViewPort": "1024", "ShowSlides": "2" },
    //    { "ViewPort": "1300", "ShowSlides": "3" }

    //],
    Classes,
}

document.addEventListener('DOMContentLoaded', function () {

    CT.CeSr(multipleSlideShowAutoObj);

});

Infinite Slider

Source Code


<div class="Wh100p Ht40vh Sl:Ht70vh" id="infiniteSlider">
</div>


const infiniteSliderObj = {
    id: 'infiniteSlider',
    interval: null, // pass interval time in ms
    data: [
        { src: "/SliderImage/Snow/Snow1.jpg", title: "Pre Wedding Shoots", url: "/our-work/pre-wedding-shoot-in-manali", description: "Capture your love story in scenic locations with our cinematic pre-wedding shoots. From romantic poses to candid moments, we create beautiful memories that reflect your chemistry, perfect for invitations, reels, and wedding slideshows." },
        { src: "/SliderImage/Snow/Snow2.jpg", title: "Wedding Shoots", url: "/our-work/manali-wedding-shoot", description: "Our wedding photography service captures every emotion, ritual, and celebration. From candid shots to traditional portraits, we deliver timeless memories in both photos and cinematic videos, preserving your big day beautifully and professionally." },
        { src: "/SliderImage/Snow/Snow3.jpg", title: "Product Photography", url: "/our-work/product-photography-photographers-in-manali", description: "Professional product photography that captures your items in perfect detail. From flat lays to lifestyle shots, we create clean, attractive images ideal for e-commerce, catalogs, websites, and social media promotions that drive conversions." },
        { src: "/SliderImage/Snow/Snow2.jpg", title: "Commercial Shoots", url: "/our-work/commercial-manali-photography", description: "Boost your brand with commercial shoots designed for marketing and promotions. From real estate to retail, we capture powerful visuals that reflect your business, services, and style. Ideal for ads, brochures, websites, and digital media." },
        { src: "/SliderImage/Snow/Snow1.jpg", title: "Property Photography", url: "/our-work/commercial-manali-photography", description: "High-quality property photography that highlights interiors, exteriors, and scenic surroundings. Ideal for hotels, resorts, and homestays looking to attract bookings through stunning visuals that showcase space, lighting, and unique design details." },
    ],
    responsive: { // nunmber of slides to show on different devices
        phone: 1,
        tablet: 2,
        desktop: 3,
    },
    classes: {
        image: 'Wh100p Ht100p OtFtCr',
        captionContainer: 'PnAe PnBm6p PnLt50p PgTpBm10 PgLtRt10 Wh80p Br1 CrBrWe BrRs10 CrBk DyFx FxDnCn FxJyCtCr TmTeVe50p0p CrBdBk10Lt91',
        caption: 'CrWe TtAnCr',
    }
};

document.addEventListener('DOMContentLoaded', function () {

    CT.CeIeSr(infiniteSliderObj);

});

Manual Multi Self Align Slider

Explore Nature

Discover the beauty of the natural world through immersive experiences and stunning destinations.

Creative Minds

Dive into the world of innovation and art where imagination meets design and technology.

Tech Evolution

Stay ahead of the curve with the latest trends and breakthroughs in technology and digital life.

Healthy Living

Tips and guides on wellness, nutrition, and lifestyle choices for a healthier, happier you.

Inspire Change

Explore stories and ideas that spark transformation and make a lasting impact in the world.

Source Code


<div class="SelfAlignedSlider Wh100p">
    <div class="SlideContainer OwXAo OwYHn PnRe Wh100p Ht100p">

        <div class="gridBox CrBdPe20Lt91 CrWe BrRs2p Ht100p">
            <div style="height: 12rem;">
                <img class="Wh100p Ht100p BrRs8 OtFtCr" src="~/Images/girl.jpg" alt="Card image cap">
            </div>
            <h3 class="MnTp5">Explore Nature</h3>
            <p>
                Discover the beauty of the natural world through immersive experiences and stunning destinations.
            </p>
            <button class='Bn CrBrTe CrBdTe CrWe'>Button</button>
        </div>

        <div class="gridBox CrBdPe20Lt91 CrWe BrRs2p Ht100p">
            <div style="height: 12rem;">
                <img class="Wh100p Ht100p BrRs8 OtFtCr" src="~/Images/girl.jpg" alt="Card image cap">
            </div>
            <h3 class="MnTp5">Creative Minds</h3>
            <p>
                Dive into the world of innovation and art where imagination meets design and technology.
            </p>
            <button class='Bn CrBrTe CrBdTe CrWe'>Button</button>
        </div>

        <div class="gridBox CrBdPe20Lt91 CrWe BrRs2p Ht100p">
            <div style="height: 12rem;">
                <img class="Wh100p Ht100p BrRs8 OtFtCr" src="~/Images/girl.jpg" alt="Card image cap">
            </div>
            <h3 class="MnTp5">Tech Evolution</h3>
            <p>
                Stay ahead of the curve with the latest trends and breakthroughs in technology and digital life.
            </p>
            <button class='Bn CrBrTe CrBdTe CrWe'>Button</button>
        </div>

        <div class="gridBox CrBdPe20Lt91 CrWe BrRs2p Ht100p">
            <div style="height: 12rem;">
                <img class="Wh100p Ht100p BrRs8 OtFtCr" src="~/Images/girl.jpg" alt="Card image cap">
            </div>
            <h3 class="MnTp5">Healthy Living</h3>
            <p>
                Tips and guides on wellness, nutrition, and lifestyle choices for a healthier, happier you.
            </p>
            <button class='Bn CrBrTe CrBdTe CrWe'>Button</button>
        </div>

        <div class="gridBox CrBdPe20Lt91 CrWe BrRs2p Ht100p">
            <div style="height: 12rem;">
                <img class="Wh100p Ht100p BrRs8 OtFtCr" src="~/Images/girl.jpg" alt="Card image cap">
            </div>
            <h3 class="MnTp5">Inspire Change</h3>
            <p>
                Explore stories and ideas that spark transformation and make a lasting impact in the world.
            </p>
            <button class='Bn CrBrTe CrBdTe CrWe'>Button</button>
        </div>

    </div>
</div>


/* Subgrid */
.gridBox {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    padding: 10px;
}


// Self Aligned Slider
const selfAlignedSliderObj = {
    SelfAlign: true,
    ColumnGap: 10, // pixel
    Class: 'SelfAlignedSlider',
    ButtonSize: { Min: '16px', Max: '16px' }, // previous-next button size
    Content: 'SlideMultiple',
    ShowSlide: '3',
    SlidePadding: '2px',
    Magnify: 'Y',
    PrevNextButton: true,
    Responsive: [
        { "ViewPort": "768", "ShowSlides": "1" },
        { "ViewPort": "1024", "ShowSlides": "2" },
        { "ViewPort": "1300", "ShowSlides": "3" }
    ],
    Classes,
}

document.addEventListener('DOMContentLoaded', function () {

    CT.CeSr(selfAlignedSliderObj);

});

Web Tool

Welcome Amit

Logout

Change Password

Change Email