Slides transitions - Fade

Slide 01 - This is an example with fade transition.
Add data-fade="true" data-speed="500" data-ease="linear" to obtain this effect.

Slides transitions - Fade

Slide 02 - This is an example with fade transition.
Add data-fade="true" data-speed="500" data-ease="linear" to obtain this effect.

Slides transitions - Fade

Slide 01 - This is an example with fade transition.
Add data-fade="true" data-speed="500" data-ease="linear" to obtain this effect.

Slides Transition


Default nu există tranziție intre slideuri, pentru a avea fade transition vom adăuga următoarele atribute:

  • data-fade="true"
  • data-speed="500"
  • data-ease="linear"

<div class="sq-slick hero-big" data-fade="true" data-speed="500" data-ease="linear">
    <!--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>