Slick Full Page Search

Slick Full Page Search is built with Hero Search and Slick Hero Big modules.

Hero Big with Hero Search Horizontal

Hero Big with Hero Search Horizontal - Fullpage Sample


<div class="hero-search-full-page">
    <!-- Hero Search Horizontal -->
    <div class=" h-search-h shadow-sq animate-sq">...</div>
    
    <!-- Slick Hero Big -->
    div class="sq-slick hero-big slide-up-sq left-sq" data-mobile-arrows="false" data-tablet-arrows="false" data-mobile-dots="true" data-tablet-dots="true" data-fade="true" data-speed="500" data-ease="linear">
        <!--Slide 01-->
        <div> ... </div>
        <!--Slide 02-->
        <div> ... </div>
        ...
    </div>
</div>

Hero Big with Hero Search Vertical

Hero Big with Hero Search Vertical - Fullpage Sample


<div class="hero-search-full-page">
    <!-- Hero Search Horizontal -->
    <div class=" h-search-v narrow-sq animate-sq shadow-sq">...</div>
    
    <!-- Slick Hero Big -->
    div class="sq-slick hero-big slide-up-sq left-sq" data-mobile-arrows="false" data-tablet-arrows="false" data-mobile-dots="true" data-tablet-dots="true" data-fade="true" data-speed="500" data-ease="linear">
        <!--Slide 01-->
        <div> ... </div>
        <!--Slide 02-->
        <div> ... </div>
        ...
    </div>
</div>

Low Style

For the cases where you need a carousel that is not that tall you can add the class.low-sq.

Low Style - Fullpage Sample


<div class="hero-search-full-page low-sq">
    <!-- Hero Search Horizontal -->
    <div class="h-search-v narrow-sq animate-sq shadow-sq">...</div>
    
    <!-- Slick Hero Big -->
    <div class="sq-slick hero-big slide-up-sq left-sq" data-mobile-arrows="false" data-tablet-arrows="false" data-mobile-dots="true" data-tablet-dots="true" data-fade="true" data-speed="500" data-ease="linear">
        ...
    </div>
</div>

Video Style

As you can see in the Slick Hero Big documentation you can use a video wrapper inside a slick carousel.

Hero Big Video with Hero Search Horizontal - Fullpage Sample