X

Carousel1

Unlimited Colors

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

Read More

File Manager

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

Read More

Friendly Tags

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

Read More

Top Seller

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

Read More

Unlimited Colors

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

Read More

File Manager

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

Read More

SOURCE CODE 
<div class="carousel carousel_2"  data-items="4"  data-navigation="true" data-pagination="false" data-autoplay="true">
    <div class="item">
        <div class="ico"><span class="glyphicons glyph-magic"></span></div>
        <h3>Title 1</h3>
        <p>Content 1</p>
        <a href="#" class="Button_normal">Read More</a>
    </div>
    <div class="item">
        <div class="ico"><span class="glyphicons glyph-folder-open"></span></div>
        <h3>Title 2</h3>
        <p>Content 2</p>
        <a href="#" class="Button_normal">Read More</a>
    </div>
    <div class="item">
        <div class="ico"><span class="glyphicons glyph-tags"></span></div>
        <h3>Title 3</h3>
        <p>Content 3</p>
        <a href="#" class="Button_normal">Read More</a>
    </div>
    <div class="item">
        <div class="ico"><span class="glyphicons glyph-cup"></span></div>
        <h3>Title 4</h3>
        <p>Content 4</p>
        <a href="#" class="Button_normal">Read More</a>
    </div>
    <div class="item">
        <div class="ico"><span class="glyphicons glyph-magic"></span></div>
        <h3>Title 5</h3>
        <p>Content 5</p>
        <a href="#" class="Button_normal">Read More</a>
    </div>
    <div class="item">
        <div class="ico"><span class="glyphicons glyph-folder-open"></span></div>
        <h3>Title 6</h3>
        <p>Content 6</p>
        <a href="#" class="Button_normal">Read More</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.

Title 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.

READ MORE

Title Two

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.

READ MORE

Title Three

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.

READ MORE

Title Four

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.

READ MORE

Title 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.

READ MORE

Title Two

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.

READ MORE

SOURCE CODE 
<div data-items="3"  data-navigation="true" data-pagination="false" data-autoplay="true" class="carousel carousel_3">
    <div class="item">
        <img alt="" src="/portals/35/pic20.jpg" />
        <h3>Title 1</h3>
        <p>Content 1</p>
        <a href="#" class="Button_normal">READ MORE</a>
    </div>
    <div class="item">
        <img alt="" src="/portals/35/pic21.jpg" />
        <h3>Title 2</h3>
        <p>Content 2</p>
        <a href="#" class="Button_normal">READ MORE</a>
    </div>
    <div class="item">
        <img alt="" src="/portals/35/pic22.jpg" />
        <h3>Title 3</h3>
        <p>Content 3</p>
        <a href="#" class="Button_normal">READ MORE</a>
    </div>
    <div class="item">
        <img alt="" src="/portals/35/pic20.jpg" />
        <h3>Title 4</h3>
        <p>Content 4</p>
        <a href="#" class="Button_normal">READ MORE</a>
    </div>
    <div class="item">
        <img alt="" src="/portals/35/pic21.jpg" />
        <h3>Title 5</h3>
        <p>Content 5</p>
        <a href="#" class="Button_normal">READ MORE</a>
    </div>
    <div class="item">
        <img alt="" src="/portals/35/pic22.jpg" />
        <h3>Title 6</h3>
        <p>Content 6</p>
        <a href="#" class="Button_normal">READ MORE</a>
    </div>
</div>


SOURCE CODE 
<div class="carousel carousel_4" data-navigation="false" data-pagination="true" data-autoplay="true" data-autoheight="false" >
    <div class="item"> <img alt="" src="/portals/35/pic23.jpg" /> </div>
    <div class="item"> <img alt="" src="/portals/35/pic24.jpg" /> </div>
    <div class="item"> <img alt="" src="/portals/35/pic25.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

May 10th,2014

Read More

Carousel Title

May 10th,2014

Read More

Carousel Title

May 10th,2014

Read More

Carousel Title

May 10th,2014

Read More

Carousel Title

May 10th,2014

Read More

Carousel Title

May 10th,2014

Read More

Carousel Title

May 10th,2014

Read More

Carousel Title

May 10th,2014

Read More

Carousel Title

May 10th,2014

Read More

Carousel Title

May 10th,2014

Read More
SOURCE CODE 
<div data-items="5"  data-navigation="true" data-pagination="false" data-autoplay="true" class="carousel carousel_5">
    <div class="photo_box content_zoom content_sytle_2"> 
        <div class="pic_box"> 
            <img  src="/portals/35/pic26.jpg" >
            <div class="content ">
                <div class="vertical_center_1">
                    <div class="vertical_center_2">
                        <h3>Carousel Title</h3>
                        <p>May 10th,2014</p>
                        <a href="#" class="but">Read More</a> 
                    </div>
                </div>
            </div>
            <div class="shade"></div>
        </div>
    </div>
    <div class="photo_box content_zoom content_sytle_2"> 
        <div class="pic_box"> 
            <img  src="/portals/35/pic27.jpg" >
            <div class="content ">
                <div class="vertical_center_1">
                    <div class="vertical_center_2">
                        <h3>Carousel Title</h3>
                        <p>May 10th,2014</p>
                        <a href="#" class="but">Read More</a> 
                    </div>
                </div>
            </div>
            <div class="shade"></div>
        </div>
    </div>
    <div class="photo_box content_zoom content_sytle_2"> 
        <div class="pic_box"> 
            <img  src="/portals/35/pic28.jpg" >
            <div class="content ">
                <div class="vertical_center_1">
                    <div class="vertical_center_2">
                        <h3>Carousel Title</h3>
                        <p>May 10th,2014</p>
                        <a href="#" class="but">Read More</a> 
                    </div>
                </div>
            </div>
            <div class="shade"></div>
        </div>
    </div>
    <div class="photo_box content_zoom content_sytle_2"> 
        <div class="pic_box"> 
            <img  src="/portals/35/pic29.jpg" >
            <div class="content ">
                <div class="vertical_center_1">
                    <div class="vertical_center_2">
                        <h3>Carousel Title</h3>
                        <p>May 10th,2014</p>
                        <a href="#" class="but">Read More</a> 
                    </div>
                </div>
            </div>
            <div class="shade"></div>
        </div>
    </div>
    <div class="photo_box content_zoom content_sytle_2"> 
        <div class="pic_box"> 
            <img  src="/portals/35/pic30.jpg" >
            <div class="content ">
                <div class="vertical_center_1">
                    <div class="vertical_center_2">
                        <h3>Carousel Title</h3>
                        <p>May 10th,2014</p>
                        <a href="#" class="but">Read More</a> 
                    </div>
                </div>
            </div>
            <div class="shade"></div>
        </div>
    </div>
    <div class="photo_box content_zoom content_sytle_2"> 
        <div class="pic_box"> 
            <img  src="/portals/35/pic31.jpg" >
            <div class="content ">
                <div class="vertical_center_1">
                    <div class="vertical_center_2">
                        <h3>Carousel Title</h3>
                        <p>May 10th,2014</p>
                        <a href="#" class="but">Read More</a> 
                    </div>
                </div>
            </div>
            <div class="shade"></div>
        </div>
    </div>
    <div class="photo_box content_zoom content_sytle_2"> 
        <div class="pic_box"> 
            <img  src="/portals/35/pic32.jpg" >
            <div class="content ">
                <div class="vertical_center_1">
                    <div class="vertical_center_2">
                        <h3>Carousel Title</h3>
                        <p>May 10th,2014</p>
                        <a href="#" class="but">Read More</a> 
                    </div>
                </div>
            </div>
            <div class="shade"></div>
        </div>
    </div>
    <div class="photo_box content_zoom content_sytle_2"> 
        <div class="pic_box"> 
            <img  src="/portals/35/pic33.jpg" >
            <div class="content ">
                <div class="vertical_center_1">
                    <div class="vertical_center_2">
                        <h3>Carousel Title</h3>
                        <p>May 10th,2014</p>
                        <a href="#" class="but">Read More</a> 
                    </div>
                </div>
            </div>
            <div class="shade"></div>
        </div>
    </div>
    <div class="photo_box content_zoom content_sytle_2"> 
        <div class="pic_box"> 
            <img  src="/portals/35/pic34.jpg" >
            <div class="content ">
                <div class="vertical_center_1">
                    <div class="vertical_center_2">
                        <h3>Carousel Title</h3>
                        <p>May 10th,2014</p>
                        <a href="#" class="but">Read More</a> 
                    </div>
                </div>
            </div>
            <div class="shade"></div>
        </div>
    </div>
    <div class="photo_box content_zoom content_sytle_2"> 
        <div class="pic_box"> 
            <img  src="/portals/35/pic35.jpg" >
            <div class="content ">
                <div class="vertical_center_1">
                    <div class="vertical_center_2">
                        <h3>Carousel Title</h3>
                        <p>May 10th,2014</p>
                        <a href="#" class="but">Read More</a> 
                    </div>
                </div>
            </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.