We dreaming of the future. Join us!

Create your story with the Quadra Responsive theme.

We dreaming of the future. Join us!

Create your story with the Quadra Responsive theme.

Example Using
<div class="hero-slider height-full 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.

Drop us a message

You're in the right place! Just drop us a message. How can we help?

Or see contact page
Validation error occured. Please enter the fields and submit it again.
Thank You ! Your email has been delivered.