en-UScy-GBbr-FR
X
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.



SOURCE CODE
<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
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/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

SOURCE CODE
<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


SOURCE CODE
<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

SOURCE CODE
<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
SOURCE CODE
<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.