Carousel
Features  >  Short Codes  >  Carousel

CAROUSE ONE

Donec in ut odio libero, at vulputate urna. Nulla tristique mi a massa convallis cursus. Nulla eu mi magna. Etiam suscipit commodo gravida. Cras suscipit, quam vitae adipiscing faucibus, risus nibh laoreet odio, a porttitor metus eros ut enim.

responsive web design

Donec in ut odio libero, at vulputate urna. Nulla tristique mi a massa convallis

DETAIL

Mobile & Web Design

Donec in ut odio libero, at vulputate urna. Nulla tristique mi a massa convallis

DETAIL

Customize Web Development

Donec in ut odio libero, at vulputate urna. Nulla tristique mi a massa convallis

DETAIL

Photography

Donec in ut odio libero, at vulputate urna. Nulla tristique mi a massa convallis

DETAIL

dnn design & skin

Donec in ut odio libero, at vulputate urna. Nulla tristique mi a massa convallis

DETAIL

modules development

Donec in ut odio libero, at vulputate urna. Nulla tristique mi a massa convallis

DETAIL

unlimited-color skin

Donec in ut odio libero, at vulputate urna. Nulla tristique mi a massa convallis

DETAIL

the advantage of us

Donec in ut odio libero, at vulputate urna. Nulla tristique mi a massa convallis

DETAIL

about our company

Donec in ut odio libero, at vulputate urna. Nulla tristique mi a massa convallis

DETAIL

heroic upgraded

Donec in ut odio libero, at vulputate urna. Nulla tristique mi a massa convallis

DETAIL

a post looks like this

Donec in ut odio libero, at vulputate urna. Nulla tristique mi a massa convallis

DETAIL

a featured post

Donec in ut odio libero, at vulputate urna. Nulla tristique mi a massa convallis

DETAIL

SOURCE CODE 
<div class="carousel carousel_1" data-autoheight="false" data-pagination="false" data-items="4" data-navigation="true" data-autoplay="3000">
    <div class="item">
        <div class="ico"><span class="glyphicons glyph-ipad"></span></div>
        <h3>Title 1</h3>
        <p>Content 1</p>
        <a href="#" class="Button_normal">DETAIL</a> 
    </div>
    <div class="item">
        <div class="ico"><span class="glyphicons glyph-macbook"></span></div>
        <h3>Title 2</h3>
        <p>Content 1</p>
        <a href="#" class="Button_normal">DETAIL</a> 
    </div>
    <div class="item">
        <div class="ico"><span class="glyphicons glyph-cogwheels"></span></div>
        <h3>Title 3</h3>
        <p>Content 3 </p>
        <a href="#" class="Button_normal">DETAIL</a> 
    </div>
    <div class="item">
        <div class="ico"><span class="glyphicons glyph-picture"></span></div>
        <h3>Title 4</h3>
        <p>Content 4 </p>
        <a href="#" class="Button_normal">DETAIL</a> 
    </div>
    <div class="item">
        <div class="ico"><span class="glyphicons glyph-heart"></span></div>
        <h3>Title 5</h3>
        <p>Content 5 </p>
        <a href="#" class="Button_normal">DETAIL</a> 
    </div>
    <div class="item">
        <div class="ico"><span class="glyphicons glyph-fire"></span></div>
        <h3>Title 6</h3>
        <p>Content 6 </p>
        <a href="#" class="Button_normal">DETAIL</a> 
    </div>
</div>

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.

CAROUSE TWO



SOURCE CODE 
<div class="carousel carousel_2" data-navigation="false"  data-autoheight="false" data-items="1" data-pagination="true" data-autoplay="3000">
    <div class="item"> <img alt="" src="/portals/32/controls_1.jpg" /> </div>
    <div class="item"> <img alt="" src="/portals/32/controls_2.jpg" /> </div>
    <div class="item"> <img alt="" src="/portals/32/controls_3.jpg" /> </div>
</div>

Option

Variable Default Type Description
data-items 1 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.

CAROUSE THREE


SOURCE CODE 
<div class="carousel carousel_2" data-navigation="false" data-pagination="true" data-autoplay="3000" data-autoheight="true" data-items="1">
    <div class="item">
        <img alt="" src="/portals/32/controls_1.jpg" />
    </div>
    <div class="item">
        <img alt="" src="/portals/32/controls_4.jpg" />
    </div>
    <div class="item">
        <img alt="" src="/portals/32/controls_5.jpg" />
    </div>
</div>

Option

Variable Default Type Description
data-items 1 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.



CAROUSE FOUR


BUSINESS W0MAN

JUNE 12,2013

COLOURING PENCIL

MAY 3,2013

ELECTRONIC PRODUCTS

JUNE 21,2013

PHOTOGRAPHY

MAY 1,2012

CAROUSEL

JUNE 12,2011

SOURCE CODE 
<div class="carousel carousel_3" data-pagination="false" data-autoheight="false" data-items="3" data-navigation="true" data-autoplay="3000">
    <div class="item"> <img alt="" src="/portals/32/controls_7.jpg" />
        <h3>Title 1</h3>
        <p>Content 1</p>
    </div>
    <div class="item"> <img alt="" src="/portals/32/controls_8.jpg" />
        <h3>Title 2</h3>
        <p>Content 2</p>
    </div>
    <div class="item"> <img alt="" src="/portals/32/controls_9.jpg" />
        <h3>Title 3</h3>
        <p>Content 3</p>
    </div>
    <div class="item"> <img alt="" src="/portals/32/controls_10.jpg" />
        <h3>Title 4</h3>
        <p>Content 4</p>
    </div>
    <div class="item"> <img alt="" src="/portals/32/controls_11.jpg" />
        <h3>Title 5</h3>
        <p>Content 5</p>
    </div>
</div>

Option

Variable Default Type Description
data-items 3 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.




CAROUSE FIVE


COLOURING ONE

Donec in ut odio libero, at vulputate urna. Nulla tristique mi a massa convallis cursus. Donec in ut odio libero, at vulputate urna.

>> MORE INFO

COLOURING ONE

Donec in ut odio libero, at vulputate urna. Nulla tristique mi a massa convallis cursus. Donec in ut odio libero, at vulputate urna.

>> MORE INFO

COLOURING TWO

Donec in ut odio libero, at vulputate urna. Nulla tristique mi a massa convallis cursus. Donec in ut odio libero, at vulputate urna.

>> MORE INFO

COLOURING THREE

Donec in ut odio libero, at vulputate urna. Nulla tristique mi a massa convallis cursus. Donec in ut odio libero, at vulputate urna.

>> MORE INFO

COLOURING FOUR

Donec in ut odio libero, at vulputate urna. Nulla tristique mi a massa convallis cursus. Donec in ut odio libero, at vulputate urna.

>> MORE INFO

COLOURING FIVE

Donec in ut odio libero, at vulputate urna. Nulla tristique mi a massa convallis cursus. Donec in ut odio libero, at vulputate urna.

>> MORE INFO

COLOURING SIX

Donec in ut odio libero, at vulputate urna. Nulla tristique mi a massa convallis cursus. Donec in ut odio libero, at vulputate urna.

>> MORE INFO

COLOURING SEVEN

Donec in ut odio libero, at vulputate urna. Nulla tristique mi a massa convallis cursus. Donec in ut odio libero, at vulputate urna.

>> MORE INFO
SOURCE CODE 
<div class="carousel carousel_4" data-autoheight="false" data-items="5" data-navigation="true" data-pagination="true" data-autoplay="3000">
    <div class="item"> <img alt="" src="/portals/32/controls_7.jpg" />
        <div class="sliding">
            <h3>Title 1</h3>
            <p>Content 1 </p>
            <a href="#">&gt;&gt;  MORE INFO</a> 
        </div>
    </div>
    <div class="item"> <img alt="" src="/portals/32/controls_8.jpg" />
        <div class="sliding">
            <h3>Title 2</h3>
            <p>Content 2 </p>
            <a href="#"> &gt;&gt;  MORE INFO</a> 
        </div>
    </div>
    <div class="item"> <img alt="" src="/portals/32/controls_9.jpg" />
        <div class="sliding">
            <h3>Title 3</h3>
            <p>Content 3 </p>
            <a href="#">&gt;&gt;  MORE INFO</a> 
        </div>
    </div>
    <div class="item"> <img alt="" src="/portals/32/controls_10.jpg" />
        <div class="sliding">
            <h3>Title 4</h3>
            <p>Content 4 </p>
            <a href="#">&gt;&gt;  MORE INFO</a> 
        </div>
    </div>
    <div class="item"> <img alt="" src="/portals/32/controls_11.jpg" />
        <div class="sliding">
            <h3>Title 5</h3>
            <p>Content 5 </p>
            <a href="#">&gt;&gt;  MORE INFO</a> 
        </div>
    </div>
    <div class="item"> <img alt="" src="/portals/32/controls_7.jpg" />
        <div class="sliding">
            <h3>Title 6</h3>
            <p>Content 6 </p>
            <a href="#">&gt;&gt;  MORE INFO</a> 
        </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.


CAROUSE FIVE


SOURCE CODE 
<div class="carousel carousel_5" data-pagination="false" data-autoheight="false" data-items="5" data-navigation="true" data-autoplay="3000">
    <div class="item"> <img alt="" src="/portals/32/psds32202.jpg" />
        <div class="sliding">
            <a href="#">&gt;&gt;  </a> 
        </div>
    </div>
    <div class="item"> <img alt="" src="/portals/32/dnngo-11.jpg" />
        <div class="sliding">
            <a href="#"> &gt;&gt;  </a> 
        </div>
    </div>
    <div class="item"> <img alt="" src="/portals/32/apic1494.jpg" />
        <div class="sliding">
            <a href="#">&gt;&gt;  </a> 
        </div>
    </div>
    <div class="item"> <img alt="" src="/portals/32/hbh.jpg" />
        <div class="sliding">
            <a href="#">&gt;&gt;  </a> 
        </div>
    </div>
    <div class="item"> <img alt="" src="/portals/32/fe10667.jpg" />
        <div class="sliding">
            <a href="#">&gt;&gt; </a> 
        </div>
    </div>
    <div class="item"> <img alt="" src="/portals/32/apic2333.jpg" />
        <div class="sliding">
            <a href="#">&gt;&gt;  </a> 
        </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.


Smart SKin

Cras at ultrices erat, sed vulputate eros. Nunc at augue gravida est fermentum vulputate. Pellentesque et ipsum in dui.

Mobilesite

Cras at ultrices erat, sed vulputate eros. Nunc at augue gravida est fermentum vulputate. Pellentesque et ipsum in dui.

Smart SKin

Cras at ultrices erat, sed vulputate eros. Nunc at augue gravida est fermentum vulputate. Pellentesque et ipsum in dui.

Mobilesite

Cras at ultrices erat, sed vulputate eros. Nunc at augue gravida est fermentum vulputate. Pellentesque et ipsum in dui.


SOURCE CODE 
<div class="conboxr">
    <div class="conboxr_shadow pt-60 pb-60 animation fadeInUp">
        <div class="dnn_layout">
            <div class="carousel carousel_6" data-pagination="false" data-autoheight="false" data-autoplay="3000" data-items="2" data-navigation="true">
                <div class="item clearfix">
                    <div class="carousel_6left"> <img alt="" class="img-responsive" src="/portals/32/conboxrpic1.jpg" /> </div>
                    <div class="carousel_6right">
                        <h4>Smart SKin</h4>
                        <p>Cras at ultrices erat, sed vulputate eros. Nunc at augue gravida est fermentum vulputate. Pellentesque et ipsum in dui.</p>
                    <div><span>&gt;</span><a href="#">View More</a></div>
                    </div>
                </div>
                <div class="item clearfix">
                    <div class="carousel_6left"> <img alt="" class="img-responsive" src="/portals/32/conboxrpic2.jpg" /> </div>
                    <div class="carousel_6right">
                        <h4>Mobilesite</h4>
                        <p>Cras at ultrices erat, sed vulputate eros. Nunc at augue gravida est fermentum vulputate. Pellentesque et ipsum in dui.</p>
                    <div><span>&gt;</span><a href="#">View More</a></div>
                    </div>
                </div>
                <div class="item clearfix">
                    <div class="carousel_6left"> <img alt="" class="img-responsive" src="/portals/32/conboxrpic1.jpg" /> </div>
                    <div class="carousel_6right">
                        <h4>Smart SKin</h4>
                        <p>Cras at ultrices erat, sed vulputate eros. Nunc at augue gravida est fermentum vulputate. Pellentesque et ipsum in dui.</p>
                    <div><span>&gt;</span><a href="#">View More</a></div>
                    </div>
                </div>
                <div class="item clearfix">
                    <div class="carousel_6left"> <img alt="" class="img-responsive" src="/portals/32/conboxrpic2.jpg" /> </div>
                    <div class="carousel_6right">
                        <h4>Mobilesite</h4>
                        <p>Cras at ultrices erat, sed vulputate eros. Nunc at augue gravida est fermentum vulputate. Pellentesque et ipsum in dui.</p>
                    <div><span>&gt;</span><a href="#">View More</a></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Option

Variable Default Type Description
data-items 2 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.


John FranK

Lorem ipsum dolor sit amet, consectetuer adipisc elit. Donec libero. Suspendisse purus nec placerat bibendbibendum. Cras id urna. Morbi tincidunt, lorem, eu posuere nunc justo.

1

Dennis Hawk

Lorem ipsum dolor sit amet, consectetuer adipisc elit. Donec libero. Suspendisse purus nec placerat bibendbibendum. Cras id urna. Morbi tincidunt, lorem, eu posuere nunc justo.

2

Tom Smith

Lorem ipsum dolor sit amet, consectetuer adipisc elit. Donec libero. Suspendisse purus nec placerat bibendbibendum. Cras id urna. Morbi tincidunt, lorem, eu posuere nunc justo.

3

John FranK

Lorem ipsum dolor sit amet, consectetuer adipisc elit. Donec libero. Suspendisse purus nec placerat bibendbibendum. Cras id urna. Morbi tincidunt, lorem, eu posuere nunc justo.

4

SOURCE CODE 
<div class="conboxu">
    <div class="conboxu_shadow pt-20 pb-60">
        <div class="dnn_layout">
            <div class="conboxu_bottom">
                <div class="carousel carousel_7" data-navigation="false" data-autoheight="false" data-items="3" data-pagination="true" data-autoplay="3000">
                    <div class="item">
                        <h3>John FranK</h3>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipisc elit. Donec libero. Suspendisse purus nec placerat bibendbibendum. Cras id urna. Morbi tincidunt, lorem, eu posuere nunc justo. </p>
                        <span>1</span> 
					</div>
                    <div class="item">
                        <h3>Dennis Hawk</h3>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipisc elit. Donec libero. Suspendisse purus nec placerat bibendbibendum. Cras id urna. Morbi tincidunt, lorem, eu posuere nunc justo. </p>
                        <span>2</span> 
					</div>
                    <div class="item">
                        <h3>Tom Smith</h3>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipisc elit. Donec libero. Suspendisse purus nec placerat bibendbibendum. Cras id urna. Morbi tincidunt, lorem, eu posuere nunc justo. </p>
                        <span>3</span> 
					</div>
                    <div class="item">
                        <h3>John FranK</h3>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipisc elit. Donec libero. Suspendisse purus nec placerat bibendbibendum. Cras id urna. Morbi tincidunt, lorem, eu posuere nunc justo. </p>
                        <span>4</span> 
					</div>
                </div>
            </div>
        </div>
    </div>
</div>

Option

Variable Default Type Description
data-items 3 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="SectionStyles11">
    <div class="dnn_layout">
        <div data-autoheight="false" data-pagination="false" data-items="4" data-navigation="true" data-autoplay="3000" class="carousel carousel_8">
            <div class="item"> <a href="#"><img alt="" src="/portals/32/show15.jpg" /></a> </div>
            <div class="item"> <a href="#"><img alt="" src="/portals/32/show16.jpg" /></a> </div>
            <div class="item"> <a href="#"> <img alt="" src="/portals/32/show17.jpg" /></a> </div>
            <div class="item"> <a href="#"><img alt="" src="/portals/32/show18.jpg" /></a> </div>
            <div class="item"> <a href="#"><img alt="" src="/portals/32/show15.jpg" /></a> </div>
            <div class="item"> <a href="#"><img alt="" src="/portals/32/show16.jpg" /></a> </div>
            <div class="item"> <a href="#"><img alt="" src="/portals/32/show17.jpg" /></a> </div>
            <div class="item"> <a href="#"><img alt="" src="/portals/32/show18.jpg" /></a> </div>
        </div>
    </div>
</div>

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="pt-60 pb-60">
    <div class="dnn_layout">
        <div class="content_mid clearfix">
            <div class="pane_layout">
                <div class="row">
                    <div class="col-sm-12">
                        <div data-autoheight="false" data-pagination="false" data-autoplay="3000" data-items="6" data-navigation="true" class="carousel carousel_9">
                            <div class="item"> <a href="#"><img alt="" src="/portals/32/show27.jpg" /></a> </div>
                            <div class="item"> <a href="#"><img alt="" src="/portals/32/show28.jpg" /></a> </div>
                            <div class="item"><a href="#"> <img alt="" src="/portals/32/show29.jpg" /></a> </div>
                            <div class="item"><a href="#"> <img alt="" src="/portals/32/show30.jpg" /></a> </div>
                            <div class="item"><a href="#"> <img alt="" src="/portals/32/show31.jpg" /></a> </div>
                            <div class="item"><a href="#"> <img alt="" src="/portals/32/show32.jpg" /></a> </div>
                            <div class="item"><a href="#"> <img alt="" src="/portals/32/show27.jpg" /> </a></div>
                            <div class="item"><a href="#"> <img alt="" src="/portals/32/show28.jpg" /> </a></div>
                            <div class="item"><a href="#"> <img alt="" src="/portals/32/show29.jpg" /></a> </div>
                            <div class="item"><a href="#"> <img alt="" src="/portals/32/show30.jpg" /></a> </div>
                            <div class="item"><a href="#"> <img alt="" src="/portals/32/show31.jpg" /></a> </div>
                            <div class="item"><a href="#"> <img alt="" src="/portals/32/show32.jpg" /></a> </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Option

Variable Default Type Description
data-items 6 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.