Example Using
<div class="hero-slider height-700 custom-slider" data-slider='{"dots": false, "arrows": true, "adaptiveHeight":true, "speed": 400, "draggable":true, "slidesToShow": 1, "slidesToScroll": 1,}'>...</div>
You can select your slider's height via helper classes. Quadra's reader plugin is read your classes automatically. Just a few examples for helper classes;
.height-500 - Slider's height will be 500px automatically. You can set it what you want from 0 to 999.
.height-full - This option will be full screen according to the device. And will be responsived to screen resizes.
.qdr-controls-x - You can select the slider dots and arrows.
.c-grab - pointer, default, disabled, hand Options for cursor options on the slider.
.bg-soft-darkX - .bg-soft-whiteX - .bg-soft-coloredX - .bg-soft-gradientX - Options to semi-transparent colors on the slider images.
Quadra is have 1000+ helpers for create exclusive themes in shortest times! You can check the documentation for them.
Layer animations
<div class="colored top-15 animated font-16-mobile" data-animation="fadeInUp" data-animation-delay="800"> Your Text</div>
You can give animations to items easily. You just need add data-animation="yourAnimation" tags for animations. You can find the animation types on here;
bounce
flash
pulse
rubberBand
shake
swing
tada
wobble
jello
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
flip
flipInX
flipInY
flipOutX
flipOutY
lightSpeedIn
lightSpeedOut
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
slideInUp
slideInDown
slideInLeft
slideInRight
slideOutUp
slideOutDown
slideOutLeft
slideOutRight
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
hinge
rollIn
rollOut
You can see effects on here; Animations and you can visit plugin website.
Delays for layer animations
<div class="animated" data-animation="hinge" data-animation-delay="1500"> Your Text</div>
You can set different animation delays for each items. You only need add the time(miliseconds) on data-animation-delay="" area.
Layer Positions and styles
<div class="animated top-35 left--22" data-animation="fadeInUp" data-animation-delay="800">...</div>
You can select your slider's height via helper classes. Quadra's reader plugin is read your classes automatically. Just a few examples for helper classes;
.top-32 - This item will have "top: 32px;" style.
.left--24 - This item will have "left: -24px;" style.
.pt-121 - This item will have "padding-top: 121px;" style.
.fs-45 - This item will have "font-size: 45px;" style.
data-color="#f90000" This item will have "color: #f90000;" style. (You can add these attributes on the div, a, p or another tag.)
data-bgcolor="#ccc" This item will have "background-color: #ccc;" style. (You can add these attributes on the div, a, p or another tag.)
data-background="images/yourImage.jpg" This item will have "background-image: url(images/yourImage.jpg);" style. (You can add these attributes on the div, a, p or another tag.)
And much more! You can use those helpers on all theme elements. Not for only slider. You can see a lot of helpers on the documentation.
