X
GO
en-UScy-GB

Carousel

Features   >   Short Codes   >   Carousel
November 21, 2024
1

The flames

Mauris at ultricies eros. Morbi vel dui nec arcu suscipit euismod. Phasellus pellentes untque lectus eget commodo ligula dolor.

More Information

2

The flames

Mauris at ultricies eros. Morbi vel dui nec arcu suscipit euismod. Phasellus pellentes untque lectus eget commodo ligula dolor.

More Information

3

The flames

Mauris at ultricies eros. Morbi vel dui nec arcu suscipit euismod. Phasellus pellentes untque lectus eget commodo ligula dolor.

More Information

4

The flames

Mauris at ultricies eros. Morbi vel dui nec arcu suscipit euismod. Phasellus pellentes untque lectus eget commodo ligula dolor.

More Information

5

The flames

Mauris at ultricies eros. Morbi vel dui nec arcu suscipit euismod. Phasellus pellentes untque lectus eget commodo ligula dolor.

More Information

6

The flames

Mauris at ultricies eros. Morbi vel dui nec arcu suscipit euismod. Phasellus pellentes untque lectus eget commodo ligula dolor.

More Information

7

The flames

Mauris at ultricies eros. Morbi vel dui nec arcu suscipit euismod. Phasellus pellentes untque lectus eget commodo ligula dolor.

More Information

8

The flames

Mauris at ultricies eros. Morbi vel dui nec arcu suscipit euismod. Phasellus pellentes untque lectus eget commodo ligula dolor.

More Information

SOURCE CODE 
<div class="carousel carousel_1 " data-items="4" data-navigation="true" data-pagination="true" data-autoplay="true">
    <div class="item ">
        <div class="main">
            <div class="ico"><span>1</span></div>
            <h3>The flames </h3>
            <p>Content text 1 ... </p>
            <p><a href="#">More Information</a></p>
        </div>
    </div>
    <div class="item">
        <div class="main">
            <div class="ico"><span>2</span></div>
            <h3>The flames </h3>
            <p>Content text 2 ... </p>
            <p><a href="#">More Information</a></p>
        </div>
    </div>
    <div class="item">
        <div class="main">
            <div class="ico"><span>3</span></div>
            <h3>The flames </h3>
            <p>Content text 3 ... </p>
            <p><a href="#">More Information</a></p>
        </div>
    </div>
    <div class="item">
        <div class="main">
            <div class="ico"><span>4</span></div>
            <h3>The flames </h3>
            <p>Content text 4 ... </p>
            <p><a href="#">More Information</a></p>
        </div>
    </div>
    <div class="item">
        <div class="main">
            <div class="ico"><span>5</span></div>
            <h3>The flames </h3>
            <p>Content text 5 ... </p>
            <p><a href="#">More Information</a></p>
            </div>
        </div>
    </div>
<br />

option

Variable Default Type Description
data-items 4 int This variable allows you to set the maximum amount of items displayed at a time with the widest browser width.
data-navigation true boolean Display "next" and "prev" buttons.
data-pagination true boolean Show pagination.
data-autoplay true int/boolean Change to any integrer for example data-autoplay ="5000" to play every 5 seconds. If you set data-autoplay="false" Stop auto scroll animation.

SOURCE CODE 
<div class="carousel carousel_2" data-autoheight="false" data-navigation="true" data-pagination="true" data-autoplay="true">
    <div class="item"> <img alt="" src="/portals/21/photo_20.jpg" /> </div>
    <div class="item"> <img alt="" src="/portals/21/photo_21.jpg" /> </div>
    <div class="item"> <img alt="" src="/portals/21/photo_20.jpg" /> </div>
    <div class="item"> <img alt="" src="/portals/21/photo_21.jpg" /> </div>
    <div class="item"> <img alt="" src="/portals/21/photo_20.jpg" /> </div>
    <div class="item"> <img alt="" src="/portals/21/photo_21.jpg" /> </div>
</div>

option

Variable Default Type Description
data-navigation true boolean Display "next" and "prev" buttons.
data-pagination true boolean Show pagination.
data-autoplay true int/boolean Change to any integrer for example data-autoplay ="5000" to play every 5 seconds. If you set data-autoplay="false" Stop auto scroll animation.
data-autoheight true boolean Add height to owl-wrapper-outer so you can use diffrent heights on slides. Use it only for one item per page setting.


carousel_title

Nunc at pellentesque libero. Quisque quis elit eget enim facilisis gravida.

carousel_title

Nunc at pellentesque libero. Quisque quis elit eget enim facilisis gravida.

carousel_title

Nunc at pellentesque libero. Quisque quis elit eget enim facilisis gravida.

carousel_title

Nunc at pellentesque libero. Quisque quis elit eget enim facilisis gravida.

carousel_title

Nunc at pellentesque libero. Quisque quis elit eget enim facilisis gravida.

carousel_title

Nunc at pellentesque libero. Quisque quis elit eget enim facilisis gravida.

carousel_title

Nunc at pellentesque libero. Quisque quis elit eget enim facilisis gravida.

carousel_title

Nunc at pellentesque libero. Quisque quis elit eget enim facilisis gravida.

SOURCE CODE 
<div data-items="4" data-navigation="true" data-pagination="true" data-autoplay="true" class="carousel carousel_3">
    <div class="item">
        <div class="photo_box  ico_zoom"> 
            <a href="/Portals/21/img2.jpg" class="LightBox_image_gallery3">
                <div class="pic_box"> 
                	<img alt="" src="/portals/21/img2.jpg" />
                    <div class="ico"> <span class="fa fa-search "></span> </div>
                    <div class="shade"></div>
                </div>
            </a>
            <div class="text_sytle_6">
                <h3>carousel_title</h3>
                <p> Content text  ... </p>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="photo_box  ico_zoom"> 
            <a href="/Portals/21/img3.jpg" class="LightBox_image_gallery3">
                <div class="pic_box"> 
                    <img alt="" src="/portals/21/img3.jpg" />
                    <div class="ico"> <span class="fa fa-search "></span> </div>
                    <div class="shade"></div>
                </div>
            </a>
            <div class="text_sytle_6">
                <h3>carousel_title</h3>
                <p> Content text  ... </p>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="photo_box  ico_zoom"> 
            <a href="/Portals/21/img4.jpg" class="LightBox_image_gallery3">
                <div class="pic_box"> 
                    <img alt="" src="/portals/21/img4.jpg" />
                    <div class="ico"> <span class="fa fa-search "></span> </div>
                    <div class="shade"></div>
                </div>
            </a>
            <div class="text_sytle_6">
                <h3>carousel_title</h3>
                <p> Content text  ... </p>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="photo_box  ico_zoom"> 
            <a href="/Portals/21/img5.jpg" class="LightBox_image_gallery3">
                <div class="pic_box"> 
                    <img alt="" src="/portals/21/img5.jpg" />
                    <div class="ico"> <span class="fa fa-search "></span> </div>
                    <div class="shade"></div>
                </div>
            </a>
            <div class="text_sytle_6">
                <h3>carousel_title</h3>
                <p> Content text  ... </p>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="photo_box  ico_zoom"> 
            <a href="/Portals/21/img6.jpg" class="LightBox_image_gallery3">
                <div class="pic_box"> 
                    <img alt="" src="/portals/21/img6.jpg" />
                    <div class="ico"> <span class="fa fa-search "></span> </div>
                    <div class="shade"></div>
                </div>
            </a>
            <div class="text_sytle_6">
                <h3>carousel_title</h3>
                <p> Content text  ... </p>
            </div>
        </div>
    </div>
 </div>
 <br />

option

Variable Default Type Description
data-items 4 int This variable allows you to set the maximum amount of items displayed at a time with the widest browser width.
data-navigation true boolean Display "next" and "prev" buttons.
data-pagination true boolean Show pagination.
data-autoplay true int/boolean Change to any integrer for example data-autoplay ="5000" to play every 5 seconds. If you set data-autoplay="false" Stop auto scroll animation.
data-autoheight true boolean Add height to owl-wrapper-outer so you can use diffrent heights on slides. Use it only for one item per page setting.

SOURCE CODE 
<div class="carousel carousel_4" data-items="5" data-navigation="true" data-pagination="false" data-autoplay="true">
    <div class="item">
        <div class="photo_box ico_LeftAndRight_enter">
            <div class="pic_box"> 
                <img alt="" src="/portals/21/img2.jpg" />
                <div class="ico"> 
                    <a href="/Portals/21/img2.jpg" class="LightBox_image_gallery4"><span class="fa fa-search ico_left"></span></a> 
                    <a href="#"><span class="fa fa-link ico_right"></span></a> 
                </div>
                <div class="shade"></div>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="photo_box ico_LeftAndRight_enter">
            <div class="pic_box"> 
                <img alt="" src="/portals/21/img3.jpg" />
                <div class="ico"> 
                    <a href="/Portals/21/img3.jpg" class="LightBox_image_gallery4"><span class="fa fa-search ico_left"></span></a> 
                    <a href="#"><span class="fa fa-link ico_right"></span></a> 
                </div>
                <div class="shade"></div>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="photo_box ico_LeftAndRight_enter">
            <div class="pic_box"> 
                <img alt="" src="/portals/21/img4.jpg" />
                <div class="ico"> 
                    <a href="/Portals/21/img4.jpg" class="LightBox_image_gallery4"><span class="fa fa-search ico_left"></span></a> 
                    <a href="#"><span class="fa fa-link ico_right"></span></a> 
                </div>
                <div class="shade"></div>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="photo_box ico_LeftAndRight_enter">
            <div class="pic_box"> 
                <img alt="" src="/portals/21/img5.jpg" />
                <div class="ico"> 
                    <a href="/Portals/21/img5.jpg" class="LightBox_image_gallery4"><span class="fa fa-search ico_left"></span></a> 
                    <a href="#"><span class="fa fa-link ico_right"></span></a> 
                </div>
                <div class="shade"></div>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="photo_box ico_LeftAndRight_enter">
            <div class="pic_box"> 
                <img alt="" src="/portals/21/img6.jpg" />
                <div class="ico"> 
                    <a href="/Portals/21/img6.jpg" class="LightBox_image_gallery4"><span class="fa fa-search ico_left"></span></a> 
                    <a href="#"><span class="fa fa-link ico_right"></span></a> 
                </div>
                <div class="shade"></div>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="photo_box ico_LeftAndRight_enter">
            <div class="pic_box"> 
                <img alt="" src="/portals/21/img7.jpg" />
                <div class="ico"> 
                    <a href="/Portals/21/img7.jpg" class="LightBox_image_gallery4"><span class="fa fa-search ico_left"></span></a>
                    <a href="#"><span class="fa fa-link ico_right"></span></a> 
                </div>
                <div class="shade"></div>
            </div>
        </div>
    </div>
</div>

option

Variable Default Type Description
data-items 5 int This variable allows you to set the maximum amount of items displayed at a time with the widest browser width.
data-navigation true boolean Display "next" and "prev" buttons.
data-pagination true boolean Show pagination.
data-autoplay true int/boolean Change to any integrer for example data-autoplay ="5000" to play every 5 seconds. If you set data-autoplay="false" Stop auto scroll animation.
data-autoheight true boolean Add height to owl-wrapper-outer so you can use diffrent heights on slides. Use it only for one item per page setting.