Elements transitions - Fade
Slide 01 - This is an example with fade transition.
Elements transitions - Fade
Slide 02 - This is an example with fade transition.
Elements transitions - Fade
Slide 03 - This is an example with fade transition.
Elements transitions - Slide Up
Slide 01 - This is an example with .slide-up transition.
Elements transitions - Slide Up
Slide 02 - This is an example with .slide-up transition.
Elements transitions - Slide Up
Slide 03 - This is an example with .slide-up transition.
Elements Transition
Carousel content can have a initial loading transition or when the slide content become active.
You need to apply to .hero-big element one of the classes:
- .fade-sq
- .slide-up-sq
<div class="sq-slick hero-big fade-sq">
<!--Slide 01-->
<div>
<div class="caption-content">
<h1>Default Hero Big - Slide 01</h1>
<p>The entire content is ... </p>
<button class="button-sq text-transform-uppercase-sq font-wight-extrabold">Call to action</button>
</div>
<div class="image-wrapper">
<div class="image-inner">
<img class="image-sq" src="assets/images/hero/hero_big_01.jpg" alt="">
</div>
</div>
</div>
<!--Slide 02-->
<div>
...
</div>
...
</div>