Wings of the sea


Wings of the sea

You can use special animations for slick slider on the Quadra. For all layer animations, you can visit the animations page.

Slick Slider, a very useful and fast slider, is optimized for Quadra. Extra images, articles or videos can be added as a layer. You can give positions and animations for these layers as you wish. Also you can use CSS3 animations for the background like zoom animation, parallax, blur, etc.

This slider can be used optionally as hero, image slider, video slider, twitter feed, testimonials, image carousel. Examples for all of these features are available at Quadra.

All Slick Slider examples can be used in any demos or pages by copying and pasting. You can use it the way you want without the need for CSS or Javascript editing.

Also, all slider instances are fully responsive and look great on all screen sizes. To do this, simply choose how it looks at the resolution you want on the "data-slick" additional feature.

Big thanks to Ken Wheeler for great Slick Slider plugin. You can find plugin page & documentation on here: Slick Slider.

How to use Slick Slider

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.

<div class="bg-slider has-details custom-slider controls-mouseover arrows-long" data-slick='{"speed": 900, "arrows": true, "autoplaySpeed": 5000, "autoplay": true }'>...</div>
divider design template

Customize background images on slider

There are "div" tags with class name "slide" in the slick slider. Each one is for a different slide. You can use "data-background" attribute or "data-bg" attribute on these. The "data-bg" attribute is only used for lazy load. So you can use lazy load for every slide background. You can also use lazy load for images you add with the normal "img" tag. All you have to do is enter the original image path to the "data-lazy" attribute. You can add any loader path to the "src" attribute.

Example for covered background image with lazy load for a slide:

<div class="slide" data-bg="url(yourImagePath/yourImage.jpg)">...</div>

Example for covered background image with classic way for a slide:

<div class="slide" data-background="yourImagePath/yourImage.jpg">...</div>

Use different background images for mobile devices and desktops for each slide

You can also add a different image for slide background images on mobile devices. So same slide, different background images for mobile devices and desktops. It is enough to add "data-mobile-background" attribute for use this feature. You can use "data-background" and "data-mobile-background" attributes together. Quadra will display the appropriate one according to the screen size.

Example for display different background images for mobile and desktop:

<div class="slide" data-background="yourLargeImage.jpg" data-mobile-background="yourMobileImage.jpg">...</div>

Customize background image positions for mobile and desktops

You can position slide background images easily. It is only necessary to add the shortcut classes to the "slide" tag. You can position the background images in different positions on mobile devices and desktop also.

Example for covered background image with special position for a slide:

<div class="slide bg-rightbottom" data-bg="url(yourImagePath/yourImage.jpg)">...</div>

Example classes for re-position background images for all screen sizes:


Example classes for re-position background images for mobile devices:

divider design template

Add animations to layers

This is pretty easy and is used in the same way as classic appear animations. Add the "animate" class to the animation you want, and give the animation you want with the "data-animation" attribute. You can also add a delay to any layer you want and make the animations look better and sequentially. For this, you can write the time you want in ms in the "data-animation-delay" feature. When each slide is active, the animations will rework with certain delays. You can visit all the animations that can be added to layers here.

Example for an animated layer:

<p class="fs-17 lh-25 mt-5 animate" data-animation="zoomIn" data-animation-delay="200">...</p>
Please tell us if you want to see more creative Slick Slider templates in Quadra. We really care about it.
website logo template
Drop us a message

You're at the right place now! How can we help?

Copied Copied to clipboard.