Slick Carousel

---

General Info

All carousels used in the theme are built with slick js.

Slick carousel needs these classes: .sq-slick and .carousel-sq.

Options

These are the carousel options that can be controlled using HTML data attributes:

• data-infinite - Infinite loop sliding.
  • Type: Boolean
  • Default Value: true
• data-show-slides - Number of slides to show.
  • Type: Int
  • Default Value: 1
• data-scroll-slides - Number of slides to scroll.
  • Type: Int
  • Default Value: 1
• data-dots - Show dot indicators.
  • Type: Boolean
  • Default Value: false
• data-arrows - Prev/Next Arrows.
  • Type: Boolean
  • Default Value: true
• data-fade - Enable fade.
  • Type: Boolean
  • Default Value: false
• data-speed - Slide/Fade animation speed.
  • Type: Int (ms)
  • Default Value: 300
• data-ease - CSS3 Animation Easing.
  • Type: String
  • Default Value: ease
• data-center-mode - Enables centered view with partial prev/next slides. Use with odd numbered slidesToShow counts.
  • Type: Boolean
  • Default Value: false
• data-center-padding - Side padding when in center mode (px or %).
  • Type: String
  • Default Value: '50px'
• data-variable-width - Variable width slides.
  • Type: Boolean
  • Default Value: false

Responsive

All attributes can be defined for a specific screen resolution.
Here is an example:

• data- resolution -attribute.

For example, for mobile the data-dots attribute will be data-mobile-dots.

Shadow

To add shadow to the slides you will need to add .shadow-sq class to the carousel.

---

Default Carousel

Copy
<div class="sq-slick carousel-sq shadow-sq" data-arrows="false" data-fade="true" data-ease="linear" data-speed="500">
    <!-- Slide 01-->
    <div>
        <div class="caption-content">
            <br>
            <h5>Slide 01</h5>
            <p>You can add text caption to this carousel. <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur faucibus magna vel ex semper, in pharetra justo pulvinar. </p>
            <br>
        </div>
        <div class="image-wrapper">
            <div class="image-inner">
                <img class="image-sq" src="assets/images/hero/hero_big_05.jpg" alt="">
            </div>
        </div>
    </div>
    ...
    <!-- Slide 03 - without background -->
    <div>
        <div class="caption-content">
          <br>
          <h5>Slide 03 without background</h5>
          <p>You can add text caption to this carousel. <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur faucibus magna vel ex semper, in pharetra justo pulvinar. </p>
          <br>
        </div>
    </div>
    ...
</div>

---

Center Carousel

Center Carousel it is a slick carousel and just needs the .center-sq class.

Copy
<div class="sq-slick carousel-sq center-sq shadow-sq" data-center-mode="true" data-center-padding="100px" data-desktop-center-padding="50px" data-show-slides="3" data-scroll-slides="3" data-tablet-show-slides="2" data-tablet-scroll-slides="2" data-mobile-show-slides="1" data-mobile-scroll-slides="1" data-tablet-center-padding="50px" data-mobile-center-padding="20px">
    <!-- Slide 01-->
    <div>
      <div class="caption-content">
         <img src="http://placehold.it/350x300?text=1" alt="">
      </div>
    </div>
    ...
</div>

See Fullpage Sample

---

Testimonials Carousel

Testimonials Carousel is a special carousel styled to be used for testimonials.

Copy
<div class="sq-slick carousel-sq testimonials-sq shadow-sq" data-arrows="false" data-fade="true" data-ease="linear" data-speed="500" data-dots="true">
    <!-- slide 01-->
    <div>
        <div class="caption-content">
             <h6>Slide 01</h6>
             <h2>They say</h2>
             <div class="testimonial-avatar">
                 <img src="assets/images/avatar/avatar_01.jpg" alt="">
             </div>
             <p class="testimonial-user-name">Albert Maori</p>
             <p>Lorem ipsum dolor sit amet... </p>
             <hr class="padded-sq">
             <div class="rating">
                 <i class="icon icon-heart"></i>
                 <span>7.5</span>
             </div>
        </div>
    </div>
    <!-- slide 02-->
    <div>
        ...
    </div>

</div>

See Fullpage Sample

---

Scaled Carousel

Scaled Carousel is a centered slick carousel centrat, that has the active slider scaled.

Copy
<div class="sq-slick carousel-sq center-sq scaled-sq shadow-sq" data-arrows="true" data-center-mode="true" data-center-padding="200px" data-desktop-center-padding="100px" data-tablet-center-padding="50px" data-mobile-center-padding="20px" data-tablet-arrows="false" data-mobile-arrows="false" >
    <!-- Slide 01 -->
    <div>
      <div class="caption-content">
          <p>You can add text caption to this carousel. <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur faucibus magna vel ex semper, in pharetra justo pulvinar. </p>
      </div>
      <div class="image-wrapper">
        <div class="image-inner">
            <img class="image-sq" src="assets/images/hero/hero_big_05.jpg" alt="">
        </div>
      </div>
    </div>
    <!-- Slide 02 -->
    <div>
      ...
    </div>
</div>

See Fullpage Sample

---

In Grid Scaled Carousel

In Grid Scaled Carousel is a centered slick carousel, that has the active slide width 100% of the wrapping .container.

See Fullpage Sample

Copy
<div class="sq-slick carousel-sq center-sq scaled-sq in-grid-sq-sq shadow-sq" data-center-mode="true" data-variable-width="true" data-mobile-variable-width="false" data-mobile-center-padding="20px" data-mobile-arrows="false">
    <!-- Slide 01 -->
    <div>
      <div class="caption-content">
      </div>
      <div class="image-wrapper">
        <div class="image-inner">
            <img class="image-sq" src="assets/images/hero/hero_big_10.jpg" alt="">
        </div>
      </div>
    </div>
    <!-- Slide 02 -->
    <div>
      ...
    </div>
</div>

---

Articles Carousel

Articles Carousel is a slider with articles module or .property-item slides.

It has the .article-sq-slick class.

Shadow

To add shadow to this specific slider you need to use .shadow-sq on each .property-item element.

Property Items Sample

Copy
<div class="sq-slick article-sq-slick" data-arrows="false" data-center-mode="true" data-center-padding="0px" data-desktop-center-padding="0px" data-show-slides="2" data-scroll-slides="2" data-mobile-show-slides="1" data-mobile-scroll-slides="1" data-tablet-center-padding="0px" data-mobile-center-padding="40px">
    <!-- Slide 01-->
    <div>
        <div class="property-item caption-sq shadow-sq light-shadow-sq">
            ...
        </div>
    </div>
    <!-- Slide 01-->
    <div>
        ...
    </div>
    ...
</div>

See Fullpage Sample


Article Items Sample

Copy
<div class="sq-slick article-sq-slick" data-center-mode="true" data-center-padding="0px" data-desktop-center-padding="0px" data-show-slides="3" data-scroll-slides="3" data-tablet-show-slides="2" data-tablet-scroll-slides="2" data-mobile-show-slides="1" data-mobile-scroll-slides="1" data-tablet-center-padding="0px" data-mobile-center-padding="50px">
    <!-- Slide 01-->
    <div>
        <div class="article-sq item">
            <div class="item-inner">
                <!-- image container -->
                <a class="image-sq" href="#">
                    <span class="image-wrapper">
                        <span class="image-inner">
                            <img class="image-sq" src="assets/images/magic_grid/magic_grid_article_05.jpg" alt="">
                        </span>
                    </span>
                </a>
                <!-- typography container-->
                <div class="typo-sq">
                    <p class="typo-label-sq" data-label-before="Architecture" data-label-after="Book a home in"></p>
                    <p class="typo-title-sq">Tesla to Build Three More Gigafactories</p>
                    <p class="typo-desc-sq">Nunc sit amet velit nibh. Proin consectetur, ante quis tristique mattis, massa massa condimentum enim.</p>

                    <a href="" class="read-more-sq">read more <i class="icon icon-arrow-right-122"></i></a>
                </div>
            </div>
        </div>
    </div>
    <!-- Slide 02-->
    <div>
      ...
    </div>
    ...
</div>

See Fullpage Sample

Arrows

If you need the carousel arrow to be in line with the title, we created .arrows-top-sq class.

Copy
<div class="sq-slick article-sq-slick arrows-top-sq" data-arrows="true" data-center-mode="true" data-center-padding="0px" data-desktop-center-padding="0px" data-show-slides="2" data-scroll-slides="2" data-mobile-show-slides="1" data-mobile-scroll-slides="1" data-tablet-center-padding="0px" data-mobile-center-padding="40px">
    <!-- Slide 01-->
    <div>
        <div class="property-item caption-sq shadow-sq light-shadow-sq">
            ...
        </div>
    </div>
    <!-- Slide 01-->
    <div>
        ...
    </div>
    ...
</div>

See Fullpage Sample

Width

For a full width carousel you need to use .fullwidth-sq class even though the carousel is inside a .container class.

See Fullpage Sample

Copy
<div class="sq-slick article-sq-slick fullwidth-sq" data-center-mode="true" data-center-padding="0px" data-desktop-center-padding="0px" data-show-slides="3" data-scroll-slides="3" data-tablet-show-slides="2" data-tablet-scroll-slides="2" data-mobile-show-slides="1" data-mobile-scroll-slides="1" data-tablet-center-padding="0px" data-mobile-center-padding="50px">
    <!-- Slide 01-->
    <div>
        <div class="article-sq item">
            ..
        </div>
    </div>
    <!-- Slide 02-->
    <div>
      ...
    </div>
    ...
</div>

---