X
en-UScy-GBbr-FR
CAROUSEL ONE

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

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

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