Scroll to Top

Options

Through these options you can make creative sliders as your wishes.

SITEMAP Documentation / Js Plugins / Slideshow / Options

Demo

variable default data-type options function
slides .slide string class, tagname select the div to slide
animationTimeEnterance 500 numeric any number it will count milli seconds, 1000ms = 1s set the time of animation entrance
animationTimeExit 400 numeric any number set the time of animation exit
animationNextEntrance slideInDown string animation name @keyframe animation to perform in normal entrance
animationNextExit slideOutDown string animation name @keyframe animation to perform in normal Exit
animationPreviousEntrance slideInDown string animation name @keyframe animation on prev button click entrance
animationPreviousExit slideOutUp string animation name @keyframe animation on prev button click exit
WaitTime 2000 numeric any number in ms total time of the animation
animationTimeFunction ease-in-out string timing function how the animation would carry out
mainHeight 100 numeric number in pixels initially sets the height of slider
alignImages true bool true, false center align image vertically and horizontally.
alignReference .fullPic string class, tagname alignment will occur to these referers only
autoPlay false bool true, false automatically plays the slider
addControls true bool true, false will hide or show the slide controls
controlsAutohide false bool true, false automatically hides the slider controls after sometime.
controlsBtnClass btn btn-dark pad-5 marginX-5 hover-blue8 string class name it will activated on controls
controlPrev prev string any html previous button control name or html/symbol
controlNext next string any html next button control name or html/symbol
controlStart start string any html start button control name or html/symbol
controlStop stop string any html stop button control name or html/symbol
controlPause pause string any html pause button control name or html/symbol
outbox false bool true, false animation will occour out of the box if true.
HeightOnLarge 600 numeric number in px height of slider on large devices
HeightOnMedium 400 numeric number in px height of slider on large devices
HeightOnSmall 100 numeric number in px height of slider on large devices
setHeight true bool true, false set the height of the images.

Code copy

<script>
        $(".mainSlider").slideshow({
            autoPlay: true,
            controlsAutohide: true,
            controlsBtnClass: 'btn btn-light marginX-5 padX-10 padY-5',
            outbox: false,
            alignImages: true,
            setHeight: true,
            WaitTime: 3000,
            animationNextEntrance: "pulse",
            animationNextExit: "slideOutRight",
            HeightOnMedium: 300
        });

    </script>

Feedback

Developed By Egrammi Studios