Hero Slider | Quadra Multi Concept HTML Theme

Slider Options & Basic Shortcodes

You can find plugin website here; Slick Slider Plugin.

You don't need any CSS or Javascript code for customize slides and layers. You can edit them with helper classes and plugin options attribute on the slider div. There is possible and simply set the height, speed, responsive options .etc of the slider. You can change transition effects, dots, arrows, draggable .etc features on the slider div simply.

And you can edit all layers with the Quadra Helpers. You do not have to use Javascript and CSS codes. You can style all layers with only classes.

Quadra is have 1000+ helpers for create exclusive themes in shortest times! You can check the documentation for them.

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.

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.

Create a pixel perfect web site with the Quadra!

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;

You can set different animation delays for each items. You only need add the time(miliseconds) on data-animation-delay="" area.

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;

Drop us a message

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.

Create a pixel perfect web site with the Quadra!

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;

You can set different animation delays for each items. You only need add the time(miliseconds) on data-animation-delay="" area.

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;

Drop us a message

Recommend Links;