Carousel

> >

Carousel One

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

Title One

Lorem ipsum dolor sit amet, consectet ur adipiscing elit. Duis vulputate eros nec odio egestas in dictum.

Title Two

Lorem ipsum dolor sit amet, consectet ur adipiscing elit. Duis vulputate eros nec odio egestas in dictum.

Title Three

Lorem ipsum dolor sit amet, consectet ur adipiscing elit. Duis vulputate eros nec odio egestas in dictum.

Title One

Lorem ipsum dolor sit amet, consectet ur adipiscing elit. Duis vulputate eros nec odio egestas in dictum.

Title Two

Lorem ipsum dolor sit amet, consectet ur adipiscing elit. Duis vulputate eros nec odio egestas in dictum.

Title Three

Lorem ipsum dolor sit amet, consectet ur adipiscing elit. Duis vulputate eros nec odio egestas in dictum.

Title One

Lorem ipsum dolor sit amet, consectet ur adipiscing elit. Duis vulputate eros nec odio egestas in dictum.

Title Two

Lorem ipsum dolor sit amet, consectet ur adipiscing elit. Duis vulputate eros nec odio egestas in dictum.

Title Three

Lorem ipsum dolor sit amet, consectet ur adipiscing elit. Duis vulputate eros nec odio egestas in dictum.

Title One

Lorem ipsum dolor sit amet, consectet ur adipiscing elit. Duis vulputate eros nec odio egestas in dictum.

Title Two

Lorem ipsum dolor sit amet, consectet ur adipiscing elit. Duis vulputate eros nec odio egestas in dictum.

Title Three

Lorem ipsum dolor sit amet, consectet ur adipiscing elit. Duis vulputate eros nec odio egestas in dictum.

SOURCE CODE

<div class="carousel carousel_1" data-pagination="false" data-autoheight="false">
    <div class="item">
        <div class="ico"><span class="fa fa-expand"></span></div>
        <div class="itemmain">
            <h3>Title 1</h3>
            <p>Content 1</p>
            <a href="#" class="Button_normal">DETAIL</a> 
        </div>   
    </div>
    <div class="item">
        <div class="ico"><span class="fa fa-cogs"></span></div>
        <div class="itemmain">
            <h3>Title 2</h3>
            <p>Content 1</p>
            <a href="#" class="Button_normal">DETAIL</a> 
        </div>
    </div>
    <div class="item">
        <div class="ico"><span class="fa fa-cube"></span></div>
        <div class="itemmain">
            <h3>Title 3</h3>
            <p>Content 3 </p>
            <a href="#" class="Button_normal">DETAIL</a> 
        </div>
    </div>
    <div class="item">
        <div class="ico"><span class="fa fa-expand"></span></div>
        <div class="itemmain">
            <h3>Title 4</h3>
            <p>Content 4 </p>
            <a href="#" class="Button_normal">DETAIL</a> 
        </div>
    </div>
    <div class="item">
        <div class="ico"><span class="fa fa-cogs"></span></div>
        <div class="itemmain">
            <h3>Title 5</h3>
            <p>Content 5 </p>
            <a href="#" class="Button_normal">DETAIL</a> 
        </div>
    </div>
    <div class="item">
        <div class="ico"><span class="fa fa-cube"></span></div>
        <div class="itemmain">
            <h3>Title 6</h3>
            <p>Content 6 </p>
            <a href="#" class="Button_normal">DETAIL</a> 
        </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.

Carousel Two

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

Title One

Lorem ipsum dolor sit amet, consectet ur adipiscing elit. Duis vulputate eros nec odio egestas in dictum.

Title Two

Lorem ipsum dolor sit amet, consectet ur adipiscing elit. Duis vulputate eros nec odio egestas in dictum.

Title Three

Lorem ipsum dolor sit amet, consectet ur adipiscing elit. Duis vulputate eros nec odio egestas in dictum.

Title Four

Lorem ipsum dolor sit amet, consectet ur adipiscing elit. Duis vulputate eros nec odio egestas in dictum.

Title One

Lorem ipsum dolor sit amet, consectet ur adipiscing elit. Duis vulputate eros nec odio egestas in dictum.

Title Two

Lorem ipsum dolor sit amet, consectet ur adipiscing elit. Duis vulputate eros nec odio egestas in dictum.

Title Three

Lorem ipsum dolor sit amet, consectet ur adipiscing elit. Duis vulputate eros nec odio egestas in dictum.

Title Four

Lorem ipsum dolor sit amet, consectet ur adipiscing elit. Duis vulputate eros nec odio egestas in dictum.

SOURCE CODE

<div data-autoheight="false" data-pagination="false" class="carousel carousel_2">
    <div class="photo_box  img_zoom">
        <a href="/Portals/19/Photo6.jpg" class="LightBox_image_gallery2" title="Title One">
            <div class="pic_box">
                <img alt="" src="/portals/19/Photo6.jpg" />
                <div class="ico"> <span class="fa fa-search"></span>  </div>
                <div class="shade"></div>
            </div>
        </a>
        <h3>Title One</h3>
        <p>content text ...</p>
        <a href="#">READ MORE</a>
    </div>
    <div class="photo_box  img_zoom">
        <a href="/Portals/19/Photo2.jpg" class="LightBox_image_gallery2" title="Title Two">
            <div class="pic_box">
                <img alt="" src="/portals/19/Photo2.jpg" />
                <div class="ico"> <span class="fa fa-search"></span>  </div>
                <div class="shade"></div>
            </div>
        </a>
        <h3>Title Two</h3>
        <p>content text ...</p>
        <a href="#">READ MORE</a>
    </div>
    <div class="photo_box  img_zoom">
        <a href="/Portals/19/Photo5.jpg" class="LightBox_image_gallery2" title="Title Three">
            <div class="pic_box">
                <img alt="" src="/portals/19/Photo5.jpg" />
                <div class="ico"> <span class="fa fa-search"></span>  </div>
                <div class="shade"></div>
            </div>
        </a>
        <h3>Title Three</h3>
        <p>content text ...</p>
        <a href="#">READ MORE</a>
    </div>
    <div class="photo_box  img_zoom">
        <a href="/Portals/19/Photo6.jpg" class="LightBox_image_gallery2" title="Title Four">
            <div class="pic_box">
                <img alt="" src="/portals/19/Photo6.jpg" />
                <div class="ico"> <span class="fa fa-search"></span>  </div>
                <div class="shade"></div>
            </div>
        </a>
        <h3>Title Four</h3>
        <p>content text ...</p>
        <a href="#">READ MORE</a>
    </div>
    <div class="photo_box  img_zoom">
        <a href="/Portals/19/Photo6.jpg" class="LightBox_image_gallery2" title="Title One">
            <div class="pic_box">
                <img alt="" src="/portals/19/Photo6.jpg" />
                <div class="ico"> <span class="fa fa-search"></span>  </div>
                <div class="shade"></div>
            </div>
        </a>
        <h3>Title One</h3>
        <p>content text ...</p>
        <a href="#">READ MORE</a>
    </div>
</div>

Carousel Three

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

SOURCE CODE

<div class="carousel carousel_3"  >
    <div class="item">
        <img alt="" src="/portals/19/controls_1.jpg" />
    </div>
    <div class="item">
        <img alt="" src="/portals/19/controls_2.jpg" />
    </div>
    <div class="item">
        <img alt="" src="/portals/19/controls_3.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 Four

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

Title One

Title Two

Title Three

Title Four

Title Five

Title Six

Title Seven

SOURCE CODE

<div class="carousel carousel_4" data-autoheight="false" data-pagination="false">
    <div class="photo_box ico_LeftAndRight_enter">
        <div class="pic_box"> 
            <img alt="" src="/portals/19/psds32202.jpg" />
            <div class="ico">
                <h3>Title One</h3>
                <href="/Portals/19/psds32202.jpg" class="LightBox_image_gallery3" title="Title One"> <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 class="photo_box ico_LeftAndRight_enter">
        <div class="pic_box"> 
            <img alt="" src="/portals/19/dnngo-11.jpg" />
            <div class="ico">
                <h3>Title Two</h3>
                <href="/Portals/19/dnngo-11.jpg" class="LightBox_image_gallery3" title="Title One"> <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 class="photo_box ico_LeftAndRight_enter">
        <div class="pic_box"> 
            <img alt="" src="/portals/19/apic1494.jpg" />
            <div class="ico">
                <h3>Title Three</h3>
                <href="/Portals/19/apic1494.jpg" class="LightBox_image_gallery3" title="Title One"> <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 class="photo_box ico_LeftAndRight_enter">
        <div class="pic_box"> 
            <img alt="" src="/portals/19/hbh.jpg" />
            <div class="ico">
                <h3>Title Four</h3>
                <href="/Portals/19/hbh.jpg" class="LightBox_image_gallery3" title="Title One"> <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 class="photo_box ico_LeftAndRight_enter">
        <div class="pic_box"> 
            <img alt="" src="/portals/19/fe10667.jpg" />
            <div class="ico">
                <h3>Title Five</h3>
                <href="/Portals/19/fe10667.jpg" class="LightBox_image_gallery3" title="Title One"> <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 class="photo_box ico_LeftAndRight_enter">
        <div class="pic_box"> 
            <img alt="" src="/portals/19/apic2333.jpg" />
            <div class="ico">
                <h3>Title Six</h3>
                <href="/Portals/19/apic2333.jpg" class="LightBox_image_gallery3" title="Title One"> <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 class="photo_box ico_LeftAndRight_enter">
        <div class="pic_box"> 
            <img alt="" src="/portals/19/xpic589.jpg" />
            <div class="ico">
                <h3>Title Seven</h3>
                <href="/Portals/19/xpic589.jpg" class="LightBox_image_gallery3" title="Title One"> <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>

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.

Carousel Five

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

Create Website

Professional & Hard

Mobilesite

Responsive Web

Read Books

More Concentrate

Skin Design

Clean & Attractive

Touch Keyboard

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

SOURCE CODE

<div data-autoplay="false" class="carousel carousel_5 " data-navigation="false" data-autoheight="false">
    <div class="photo_box  ico_left_enter"> <a href="/Portals/19/gpic707.jpg" class="LightBox_image_gallery1" title="Create Website">
        <div class="pic_box"> <img alt="" src="/portals/19/gpic707.jpg" />
            <div class="ico"> <span class="fa fa-search"></span> </div>
            <div class="shade"></div>
        </div>
        </a>
        <h3>Create Website</h3>
        <p>Professional & Hard</p>
    </div>
    <div class="photo_box  ico_left_enter"> <a href="/Portals/2048/hc130617-04.jpg" class="LightBox_image_gallery1" title="Skin Features">
        <div class="pic_box"> <img alt="" src="/portals/2048/hc130617-04.jpg" />
            <div class="ico"> <span class="fa fa-search"></span> </div>
            <div class="shade"></div>
        </div>
        </a>
        <h3>Mobilesite</h3>
        <p>Responsive Web</p>
    </div>
    <div class="photo_box  ico_left_enter"> <a href="/Portals/19/10732.jpg" class="LightBox_image_gallery1" title="Create DNN Website">
        <div class="pic_box"> <img alt="" src="/portals/19/10732.jpg" />
            <div class="ico"> <span class="fa fa-search"></span> </div>
            <div class="shade"></div>
        </div>
        </a>
        <h3>Read Books </h3>
        <p>More Concentrate</p>
    </div>
    <div class="photo_box  ico_left_enter"> <a href="/Portals/19/book.jpg" class="LightBox_image_gallery1" title="Read Books">
        <div class="pic_box"> <img alt="" src="/portals/19/book.jpg" />
            <div class="ico"> <span class="fa fa-search"></span> </div>
            <div class="shade"></div>
        </div>
        </a>
        <h3>Skin Design</h3>
        <p>Clean & Attractive</p>
    </div>
    <div class="photo_box  ico_left_enter"> <a href="/Portals/19/xpic7339.jpg" class="LightBox_image_gallery1" title="Touch Keyboard">
        <div class="pic_box"> <img alt="" src="/portals/19/xpic7339.jpg" />
            <div class="ico"> <span class="fa fa-search"></span> </div>
            <div class="shade"></div>
        </div>
        </a>
        <h3>Touch Keyboard</h3>
        <p>Nunc at pellentesque libero. Quisque quis elit eget enim facilisis gravida.</p>
    </div>
</div>

Carousel Six

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

Create Website

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

Skin Features

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

Create DNN Website

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

Read Books

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

Touch Keyboard

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

SOURCE CODE

<div data-navigation="false" data-autoheight="false" class="carousel carousel_6">
    <div class="photo_box  ico_left_enter">
        <href="/Portals/19/gpic707.jpg" class="LightBox_image_gallery1" title="Create Website">
            <div class="pic_box">
                <img alt="" src="/portals/19/gpic707.jpg" />
                <div class="ico"> <span class="fa fa-search"></span>  </div>
                <div class="shade"></div>
            </div>
        </a>
        <h3>Title One</h3>
        <p>content text ...</p>
    </div>
    <div class="photo_box  ico_left_enter">
        <href="/Portals/19/hc130617-04.jpg" class="LightBox_image_gallery1" title="Skin Features">
            <div class="pic_box">
                <img alt="" src="/portals/19/hc130617-04.jpg" />
                <div class="ico"> <span class="fa fa-search"></span>  </div>
                <div class="shade"></div>
            </div>
        </a>
        <h3>Title Two</h3>
        <p>content text ...</p>
    </div>
    <div class="photo_box  ico_left_enter">
        <href="/Portals/19/10732.jpg" class="LightBox_image_gallery1" title="Create DNN Website">
            <div class="pic_box">
                <img alt="" src="/portals/19/10732.jpg" />
                <div class="ico"> <span class="fa fa-search"></span>  </div>
                <div class="shade"></div>
            </div>
        </a>
        <h3>Title Three</h3>
        <p>content text ...</p>
    </div>
    <div class="photo_box  ico_left_enter">
        <href="/Portals/19/book.jpg" class="LightBox_image_gallery1" title="Read Books">
            <div class="pic_box">
                <img alt="" src="/portals/19/book.jpg" />
                <div class="ico"> <span class="fa fa-search"></span>  </div>
                <div class="shade"></div>
            </div>
        </a>
        <h3>Title Fore</h3>
        <p>content text ...</p>
    </div>
    <div class="photo_box  ico_left_enter">
        <href="/Portals/19/xpic7339.jpg" class="LightBox_image_gallery1" title="Touch Keyboard">
            <div class="pic_box">
                <img alt="" src="/portals/19/xpic7339.jpg" />
                <div class="ico"> <span class="fa fa-search"></span>  </div>
                <div class="shade"></div>
            </div>
        </a>
        <h3>Title Five</h3>
        <p>content text ...</p>
    </div>
</div>

Carousel Seven

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

Full Support

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

dvanced Technology

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

Responsive Web

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

Unlimited Colors

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

Advanced Technology

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

Responsive Web

Lorem ipsum dolor sit amet, consectet ur adipiscing elit. Duis vulputate eros nec odio egestas in dictum.

Unlimited Colors

Lorem ipsum dolor sit amet, consectet ur adipiscing elit. Duis vulputate eros nec odio egestas in dictum.

Title Four

Lorem ipsum dolor sit amet, consectet ur adipiscing elit. Duis vulputate eros nec odio egestas in dictum.

SOURCE CODE

<div class="carousel carousel_7" data-pagination="false" data-autoheight="false">
    <div class="photo_box  img_zoom"> <a href="/Portals/19/Photo6.jpg" class="LightBox_image_gallery2" title="Title One">
        <div class="pic_box"> <img alt="" src="/portals/19/Photo6.jpg" />
            <div class="ico"> <span class="fa fa-search"></span> </div>
            <div class="shade"></div>
        </div>
        </a>
        <h3>Full Support</h3>
        <p>Mauris at ultricies eros. Morbi vel dui nec arcu suscipit euismod. Phasellus pellentes untque lectus eget. </p>
        <a class="H5_More" href="#">Read More<span></span> </a> </div>
    <div class="photo_box  img_zoom"> <a href="/Portals/19/Photo2.jpg" class="LightBox_image_gallery2" title="Title Two">
        <div class="pic_box"> <img alt="" src="/portals/19/Photo2.jpg" />
            <div class="ico"> <span class="fa fa-search"></span> </div>
            <div class="shade"></div>
        </div>
        </a>
        <h3>dvanced Technology</h3>
        <p>Mauris at ultricies eros. Morbi vel dui nec arcu suscipit euismod. Phasellus pellentes untque lectus eget. </p>
        <a class="H5_More" href="#">Read More <span></span> </a> </div>
    <div class="photo_box  img_zoom"> <a href="/Portals/19/Photo5.jpg" class="LightBox_image_gallery2" title="Title Three">
        <div class="pic_box"> <img alt="" src="/portals/19/Photo5.jpg" />
            <div class="ico"> <span class="fa fa-search"></span> </div>
            <div class="shade"></div>
        </div>
        </a>
        <h3>Responsive Web</h3>
        <p>Mauris at ultricies eros. Morbi vel dui nec arcu suscipit euismod. Phasellus pellentes untque lectus eget. </p>
        <a class="H5_More" href="#">Read More <span></span> </a> </div>
    <div class="photo_box  img_zoom"> <a href="/Portals/19/Photo8.jpg" class="LightBox_image_gallery2" title="Title Four">
        <div class="pic_box"> <img alt="" src="/portals/19/Photo8.jpg" />
            <div class="ico"> <span class="fa fa-search"></span> </div>
            <div class="shade"></div>
        </div>
        </a>
        <h3>Unlimited Colors</h3>
        <p>Mauris at ultricies eros. Morbi vel dui nec arcu suscipit euismod. Phasellus pellentes untque lectus eget. </p>
        <a class="H5_More" href="#">Read More <span></span> </a> </div>
    <div class="photo_box  img_zoom"> <a href="/Portals/19/Photo6.jpg" class="LightBox_image_gallery2" title="Title One">
        <div class="pic_box"> <img alt="" src="/portals/19/Photo6.jpg" />
            <div class="ico"> <span class="fa fa-search"></span> </div>
            <div class="shade"></div>
        </div>
        </a>
        <h3>Advanced Technology</h3>
        <p>Mauris at ultricies eros. Morbi vel dui nec arcu suscipit euismod. Phasellus pellentes untque lectus eget. </p>
        <a class="H5_More" href="#">Read More<span></span> </a> </div>
    <div class="photo_box  img_zoom"> <a href="/Portals/19/Photo2.jpg" class="LightBox_image_gallery2" title="Title Two">
        <div class="pic_box"> <img alt="" src="/portals/19/Photo2.jpg" />
            <div class="ico"> <span class="fa fa-search"></span> </div>
            <div class="shade"></div>
        </div>
        </a>
        <h3>Responsive Web</h3>
        <p>Lorem ipsum dolor sit amet, consectet ur adipiscing elit. Duis vulputate eros nec odio egestas in dictum. </p>
        <a class="H5_More" href="#">Read More<span></span> </a> </div>
    <div class="photo_box  img_zoom"> <a href="/Portals/19/Photo5.jpg" class="LightBox_image_gallery2" title="Title Three">
        <div class="pic_box"> <img alt="" src="/portals/19/Photo5.jpg" />
            <div class="ico"> <span class="fa fa-search"></span> </div>
            <div class="shade"></div>
        </div>
        </a>
        <h3>Unlimited Colors</h3>
        <p>Lorem ipsum dolor sit amet, consectet ur adipiscing elit. Duis vulputate eros nec odio egestas in dictum. </p>
        <a class="H5_More" href="#">Read More <span></span> </a> </div>
    <div class="photo_box  img_zoom"> <a href="/Portals/19/Photo8.jpg" class="LightBox_image_gallery2" title="Title Four">
        <div class="pic_box"> <img alt="" src="/portals/19/Photo8.jpg" />
            <div class="ico"> <span class="fa fa-search"></span> </div>
            <div class="shade"></div>
        </div>
        </a>
        <h3>Title Four</h3>
        <p>Lorem ipsum dolor sit amet, consectet ur adipiscing elit. Duis vulputate eros nec odio egestas in dictum. </p>
        <a class="H5_More" href="#">Read More </a> </div>
</div>