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

16 € / hour

VW Golf 7 1.6 TDI - DSG 1.6 TDI - DSG 1.6 TDI - DSG

8.7

A/C

A

x 4

16 € / hour

VW Golf 7 1.6 TDI - DSG

8.7

A/C

A

x 4

16 € / hour

VW Golf 7 1.6 TDI - DSG

8.7

A/C

A

x 4

16 € / hour

VW Golf 7 1.6 TDI - DSG

8.7

A/C

A

x 4

16 € / hour

VW Golf 7 1.6 TDI - DSG

8.7

A/C

A

x 4

16 € / hour

VW Golf 7 1.6 TDI - DSG

8.7

A/C

A

x 4

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-desktop-show-slides="2" data-desktop-scroll-slides="2" 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="40px">
    <!-- Slide 01-->
    <div>
        <div class="property-item caption-sq shadow-sq light-shadow-sq">
            ...
        </div>
    </div>
    <!-- Slide 01-->
    <div>
        ...
    </div>
    ...
</div>

Copy
<div class="sq-slick article-sq-slick" data-center-mode="true" data-center-padding="0px" data-desktop-center-padding="0px" data-show-slides="4" data-scroll-slides="4" data-desktop-show-slides="2" data-desktop-scroll-slides="2" 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="40px">
    <!-- Slide 01-->
    <div>
        <div class="property-item caption-sq shadow-sq light-shadow-sq">
            ...
        </div>
    </div>
    <!-- Slide 01-->
    <div>
        ...
    </div>
    ...
</div>

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>

Arrows

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

Section title

16 € / hour

VW Golf 7 1.6 TDI - DSG 1.6 TDI - DSG 1.6 TDI - DSG

8.7

A/C

A

x 4

16 € / hour

VW Golf 7 1.6 TDI - DSG

8.7

A/C

A

x 4

16 € / hour

VW Golf 7 1.6 TDI - DSG

8.7

A/C

A

x 4

16 € / hour

VW Golf 7 1.6 TDI - DSG

8.7

A/C

A

x 4

16 € / hour

VW Golf 7 1.6 TDI - DSG

8.7

A/C

A

x 4

16 € / hour

VW Golf 7 1.6 TDI - DSG

8.7

A/C

A

x 4

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

Width

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

Tesla to Build Three More Gigafactories

Nunc sit amet velit nibh. Proin consectetur, ante quis tristique mattis, massa massa condimentum enim.

read more

Tesla to Build Three More Gigafactories

Nunc sit amet velit nibh. Proin consectetur, ante quis tristique mattis, massa massa condimentum enim.

read more

Tesla to Build Three More Gigafactories

Nunc sit amet velit nibh. Proin consectetur, ante quis tristique mattis, massa massa condimentum enim.

read more

Tesla to Build Three More Gigafactories

Nunc sit amet velit nibh. Proin consectetur, ante quis tristique mattis, massa massa condimentum enim.

read more

Tesla to Build Three More Gigafactories

Nunc sit amet velit nibh. Proin consectetur, ante quis tristique mattis, massa massa condimentum enim.

read more

Tesla to Build Three More Gigafactories

Nunc sit amet velit nibh. Proin consectetur, ante quis tristique mattis, massa massa condimentum enim.

read more

Copy
<div class="sq-slick article-sq-slick arrows-top-sq 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>