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.

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/31/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/31/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/31/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/31/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/31/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/31/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/31/Pic23.jpg" /> </div>
    <div class="item"> <img alt="" src="/portals/31/Pic24.jpg" /> </div>
    <div class="item"> <img alt="" src="/portals/31/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.


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/31/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/31/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/31/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/31/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/31/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/31/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/31/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/31/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/31/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/31/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.