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> 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:
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>
