DNNGo demo dnn skin unlimited color pack 042 > Feature > Short Codes > Carousel

en-US

cy-GB

br-FR

en-US

cy-GB

br-FR

Carousel

> >

CAROUSEL 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

Mobile & Web Design

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

Customize Web Development

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

Photography

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

dnn design & skin

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

modules development

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

unlimited-color skin

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

the advantage of us

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

about our company

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

heroic upgraded

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

a post looks like this

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

a featured post

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

<div class="carousel carousel_1" data-pagination="false" data-autoplay="3000" data-items="4" data-navigation="true">
    <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`	false	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`	false	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 TWO

ABOUT OUR SKIN

Donec consectetur diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id, semper sed felis. Cum sociis natoque penatibus et magnis.Diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id.

ABOUT OUR SKIN

Donec consectetur diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id, semper sed felis. Cum sociis natoque penatibus et magnis.Diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id.

ABOUT OUR SKIN

Donec consectetur diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id, semper sed felis. Cum sociis natoque penatibus et magnis.Diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id.

ABOUT OUR SKIN

Donec consectetur diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id, semper sed felis. Cum sociis natoque penatibus et magnis.Diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id.

<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/30/controls_1.jpg">
        <div class="carousel_content text_left">
            <h3>ABOUT OUR SKIN</h3>
            <p>content text ...</p>
        </div>
    </div>
    <div class="item"> <img alt="" src="/portals/30/controls_2.jpg">
        <div class="carousel_content text_right">
            <h3>ABOUT OUR SKIN</h3>
            <p>content text ...</p>
        </div>
    </div>
    <div class="item"> <img alt="" src="/portals/30/controls_3.jpg">
        <div class="carousel_content text_top">
            <h3>ABOUT OUR SKIN</h3>
            <p>content text ...</p>
        </div>
    </div>
    <div class="item"> <img alt="" src="/portals/30/controls_1.jpg">
        <div class="carousel_content text_bottom">
            <h3>ABOUT OUR SKIN</h3>
            <p>content text ...</p>
        </div>
    </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`	false	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 THREE

<div class="carousel carousel_2" data-navigation="true" data-pagination="true" data-autoplay="3000" data-autoheight="true" data-items="1" >
    <div class="item">
        <img alt="" src="/portals/30/controls_1.jpg" />
    </div>
    <div class="item">
        <img alt="" src="/portals/30/controls_4.jpg" />
    </div>
    <div class="item">
        <img alt="" src="/portals/30/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`	false	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 FOUR

BUSINESS W0MAN

JUNE 12,2013

COLOURING PENCIL

MAY 3,2013

ELECTRONIC PRODUCTS

JUNE 21,2013

PHOTOGRAPHY

MAY 1,2012

CAROUSEL

JUNE 12,2011

<div class="carousel carousel_3" data-navigation="true" data-pagination="false" data-autoplay="3000" data-items="3">
    <div class="item"> 
        <div class="photo_box img_zoom ico_top_enter">
            <a title=" Title One" href="/Portals/30/controls_7.jpg" class="LightBox_image_gallery1">
            <div class="pic_box"> 
                <img alt="" src="/portals/30/controls_7.jpg" />
                <div class="ico"> <span class="glyphicons glyph-picture"></span> </div>
                <div class="shade"></div>
            </div>
            </a>
            <h3>BUSINESS W0MAN</h3>
            <p>JUNE 12,2013</p>
        </div>
    </div>
    <div class="item"> 
        <div class="photo_box img_zoom ico_top_enter">
            <a title=" Title One" href="/Portals/30/controls_8.jpg" class="LightBox_image_gallery1">
            <div class="pic_box"> 
                <img alt="" src="/portals/30/controls_8.jpg" />
                <div class="ico"> <span class="glyphicons glyph-picture"></span> </div>
                <div class="shade"></div>
            </div>
            </a>
            <h3>COLOURING PENCIL</h3>
            <p>MAY 3,2013</p>
        </div>
    </div>
    <div class="item">
        <div class="photo_box img_zoom ico_top_enter">
            <a title=" Title One" href="/Portals/30/controls_9.jpg" class="LightBox_image_gallery1">
            <div class="pic_box"> 
                <img alt="" src="/portals/30/controls_9.jpg" />
                <div class="ico"> <span class="glyphicons glyph-picture"></span> </div>
                <div class="shade"></div>
            </div>
            </a>
            <h3>ELECTRONIC PRODUCTS</h3>
            <p>JUNE 21,2013</p>
        </div>
    </div>
    <div class="item">
        <div class="photo_box img_zoom ico_top_enter">
            <a title=" Title One" href="/Portals/30/controls_10.jpg" class="LightBox_image_gallery1">
            <div class="pic_box"> 
                <img alt="" src="/portals/30/controls_10.jpg" />
                <div class="ico"> <span class="glyphicons glyph-picture"></span> </div>
                <div class="shade"></div>
            </div>
            </a>
            <h3>PHOTOGRAPHY</h3>
            <p>MAY 1,2012</p>
        </div>
    </div>
    <div class="item">
        <div class="photo_box img_zoom ico_top_enter">
            <a title=" Title One" href="/Portals/30/controls_11.jpg" class="LightBox_image_gallery1">
            <div class="pic_box"> 
                <img alt="" src="/portals/30/controls_11.jpg" />
                <div class="ico"> <span class="glyphicons glyph-picture"></span> </div>
                <div class="shade"></div>
            </div>
            </a>
            <h3>CAROUSEL</h3>
            <p>JUNE 12,2011</p>
        </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`	false	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`	false	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 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.

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.

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.

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.

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.

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.

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.

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.

COLOURING EIFHT

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

COLOURING NINE

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

COLOURING TEN

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

COLOURING ELEVEN

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

COLOURING TWELVE

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

COLOURING THIRTEEN

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

COLOURING FOURTEEN

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

COLOURING FIFTEEN

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

<div class="carousel carousel_4 data-navigation="true" data-pagination="true" data-autoplay="3000" data-items="5"">
    <div class="item"> <img alt="" src="/portals/30/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/30/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/30/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/30/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/30/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/30/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`	false	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 SIX

<div class="carousel carousel_6" data-navigation="true" data-pagination="false" data-autoplay="3000" data-items="6">
    <div class="item">
        <img alt="" src="/portals/30/carousel_6_img1.png" />
    </div>
    <div class="item">
        <img alt="" src="/portals/30/carousel_6_img2.png" />
    </div>
    <div class="item">
        <img alt="" src="/portals/30/carousel_6_img3.png" />
    </div>
    <div class="item">
        <img alt="" src="/portals/30/carousel_6_img4.png" />
    </div>
    <div class="item">
        <img alt="" src="/portals/30/carousel_6_img5.png" />
    </div>
    <div class="item">
        <img alt="" src="/portals/30/carousel_6_img6.png" />
    </div>
    <div class="item">
        <img alt="" src="/portals/30/carousel_6_img1.png" />
    </div>
    <div class="item">
        <img alt="" src="/portals/30/carousel_6_img2.png" />
    </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`	false	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`	false	boolean	Add height to owl-wrapper-outer so you can use diffrent heights on slides. Use it only for one item per page setting.