X
en-UScy-GBbr-FR

Carousel

Features > Short Codes > Carousel
CAROUSEL ONE
Customized Skin

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolor mque laudantium, totam rem aperiam, voluptatem quia voluptas.

Learn More
Adjust Bugs

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolor mque laudantium, totam rem aperiam, voluptatem quia voluptas.

Learn More
Working hall

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolor mque laudantium, totam rem aperiam, voluptatem quia voluptas.

Learn More
Member Card

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolor mque laudantium, totam rem aperiam, voluptatem quia voluptas.

Learn More
Customized Skin

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolor mque laudantium, totam rem aperiam, voluptatem quia voluptas.

Learn More

SOURCE CODE 
 
<div class="carousel carousel_4 services_a" data-items="4" data-pagination="false" data-navigation="true" data-autoplay="5000">
    <div class="item">
        <div class="color1"> <span class="fa fa-phone"></span>
            <h6>Title 1</h6>
            <p>Content 1 </p>
            <a href="#">Learn More</a> 
        </div>
    </div>
    <div class="item">
        <div class="color2"> <span class="fa fa-sliders fa-rotate-90"></span>
            <h6>Title 2</h6>
            <p>Content 2 </p>
            <a href="#">Learn More</a> 
        </div>
    </div>
    <div class="item">
        <div class="color3"> <span class="fa fa-university"></span>
            <h6>Title 3</h6>
            <p>Content 3 </p>
            <a href="#">Learn More</a> 
        </div>
    </div>
    <div class="item">
        <div class="color4"> <span class="fa fa-calendar"></span>
            <h6>Title 4</h6>
            <p>Content 4 </p>
            <a href="#">Learn More</a> 
        </div>
    </div>
    <div class="item">
        <div class="color1"> <span class="fa fa-phone"></span>
            <h6>Title 5</h6>
            <p>Content 5 </p>
            <a href="#">Learn More</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

Full Support

April 08th,2014

Clean Design

June 26th,2014

Easy Settings

August 13rd,2014

Attractive Skin

September 09th,2014

Full Support

April 08th,2014

Clean Design

June 26th,2014


SOURCE CODE 
 
<div data-autoplay="3000" data-pagination="false" data-items="4" data-navigation="true" class="carousel carousel_6">
    <div class="item">
        <div class="photo_box"> 
            <a href="#">
                <div class="pic_box"> 
                    <img alt="" src="/portals/36/isotope1.jpg" />
                    <div class="shade"></div>
                </div>
            </a>
            <div class="bottom">
                <h3>Title 1</h3>
                <p>Content 1</p>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="photo_box"> 
            <a href="#">
                <div class="pic_box"> 
                    <img alt="" src="/portals/36/isotope2.jpg" />
                    <div class="shade"></div>
                </div>
            </a>
            <div class="bottom">
                <h3>Title 2</h3>
                <p>Content 2</p>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="photo_box"> 
            <a href="#">
                <div class="pic_box"> 
                    <img alt="" src="/portals/36/isotope3.jpg" />
                    <div class="shade"></div>
                </div>
            </a>
            <div class="bottom">
                <h3>Title 3</h3>
                <p>Content 3</p>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="photo_box"> 
            <a href="#">
                <div class="pic_box"> 
                    <img alt="" src="/portals/36/isotope4.jpg" />
                    <div class="shade"></div>
                </div>
            </a>
            <div class="bottom">
                <h3>Title 4</h3>
                <p>Content 4</p>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="photo_box"> 
            <a href="#">
                <div class="pic_box"> 
                    <img alt="" src="/portals/36/isotope5.jpg" />
                    <div class="shade"></div>
                </div>
            </a>
            <div class="bottom">
                <h3>Title 5</h3>
                <p>Content 5</p>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="photo_box"> 
            <a href="#">
                <div class="pic_box"> 
                    <img alt="" src="/portals/36/isotope6.jpg" />
                    <div class="shade"></div>
                </div>
            </a>
            <div class="bottom">
                <h3>Title 6</h3>
                <p>Content 6</p>
            </div>
        </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 THREE

SOURCE CODE 
 
<div class="carousel carousel_7" data-autoheight="false" data-autoplay="3000" data-pagination="true" data-items="1" data-navigation="true">
    <div class="item"> <img alt="" src="/portals/36/photo5_2.jpg" /> </div>
    <div class="item"> <img alt="" src="/portals/36/photo5_3.jpg" /> </div>
    <div class="item"> <img alt="" src="/portals/36/photo5_4.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 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

Unlimited Colors

March 12nd,2014

Full Support

April 08th,2014

Clean Design

June 26th,2014

Easy Settings

August 13rd,2014

Attractive Skin

September 09th,2014

Unlimited Colors

March 12nd,2014


SOURCE CODE 
 
<div data-autoheight="false" data-autoplay="3000" class="carousel carousel_8" data-navigation="false" data-pagination="false" data-items="5">
    <div class="item"> 
    	<img alt="" src="/portals/36/isotope2.jpg" />
        <h3>Title 1</h3>
        <p>Content 1</p>
    </div>
    <div class="item"> 
    	<img alt="" src="/portals/36/isotope3.jpg" />
        <h3>Title 2</h3>
        <p>Content 2</p>
    </div>
    <div class="item"> 
    	<img alt="" src="/portals/36/isotope4.jpg" />
        <h3>Title 3</h3>
        <p>Content 3</p>
    </div>
    <div class="item"> 
    	<img alt="" src="/portals/36/isotope5.jpg" />
        <h3>Title 4</h3>
        <p>Content 4</p>
    </div>
    <div class="item"> 
    	<img alt="" src="/portals/36/isotope6.jpg" />
        <h3>Title 5</h3>
        <p>Content 5</p>
    </div>
    <div class="item"> 
    	<img alt="" src="/portals/36/isotope7.jpg" />
        <h3>Title 6</h3>
        <p>Content 6</p>
    </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

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.

SOURCE CODE 
<div data-navigation="false" data-items="1" data-pagination="true" data-autoplay="3000" data-autoheight="false" class="carousel carousel_9 mb60">
  <div class="item"> <img alt="" src="/portals/36/photo5_4.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/36/photo5_3.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/36/photo5_2.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/36/photo5_4.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 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.