Slick Hero Big

Slick Hero Big is a full page carousel.

Default Slick Hero Big

Default Slick Hero Big has sliders with these two containers:

  • .caption-content - for slide content
  • .image-wrapper - for slide background

See Default Slick Hero Big - Fullpage Sample 

<div class="sq-slick hero-big">
    <!--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>

Content Alignment

To align the slide content you can use any of the following classes:

  • .top-sq
  • .bottom-sq
  • .left-sq
  • .right-sq

Also you can combine the classes like: .top-sq with .left-sq.

See Content Alignment - Fullpage Sample 

<div class="sq-slick hero-big top-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>

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
See Elements Transition - Fullpage Sample 

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

Slides Transitions

By default there is no transition between slides. To have a fade transition we will add the following attributes:

  • data-fade="true"
  • data-speed="500"
  • data-ease="linear"
See Slides Transitions - Fullpage Sample 

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

Video Style

You can use a video wrapper insead a image wrapper in case you need to play a video in background

See Video Wrapper Sample - Fullpage 

<div class="sq-slick hero-big" data-fade="true" data-speed="500" data-ease="linear">
    <!--Slide 01-->
    <div>
        <div class="caption-content">
           ...
        </div>
        <div class="video-wrapper ">
			<iframe src="https://www.youtube.com/embed/W0LHTWG-UmQ?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&playlist=W0LHTWG-UmQ" frameborder="0" allowfullscreen></iframe>
		</div>
    </div>
    <!--Slide 02-->
    <div> ... </div>
    ...
</div>