CAROUSEL ONE
Aenean mollis tortor placerat mauris ornare suscipit. Praesent vitae faucibus sem. Nulla facilisi. Suspendisse quam dolor, suscipit tincidunt venenatis malesuada, interdum eu erat. Donec tempor tristique ”


SOURCE CODE
<div class="carousel carousel_1" data-items="4" data-navigation="true" data-pagination="true" data-autoplay="true">
    <div class="item">
        <div class="ico"><span class="glyphicons glyph-ipad"></span></div>
        <h3>title 1</h3>
        <p>Content text 1 ...  </p>
    </div>
    <div class="item">
        <div class="ico"><span class="glyphicons glyph-macbook"></span></div>
        <h3>title 2</h3>
        <p>Content text 2 ...  </p>
    </div>
    <div class="item">
        <div class="ico"><span class="glyphicons glyph-cogwheels"></span></div>
        <h3>title 3</h3>
        <p>Content text 3 ...  </p>
    </div>
    <div class="item">
        <div class="ico"><span class="glyphicons glyph-picture"></span></div>
        <h3>title 4</h3>
        <p>Content text 4 ...  </p>
    </div>
    <div class="item">
        <div class="ico"><span class="glyphicons glyph-heart"></span></div>
        <h3>title 5</h3>
        <p>Content text 5 ...  </p>
    </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.
CAROUSEL 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 adipiscing faucibus, risus nibh laoreet odio, a porttitor metus eros ut enim.

SOURCE CODE
<div class="carousel carousel_2" data-navigation="true" data-pagination="true" data-autoplay="true" data-autoheight="true">
    <div class="item"> <img alt="" src="/portals/31/controls_11.jpg">
        <div class="carousel_content text_left_pull">
            <h3>ABOUT OUR SKIN</h3>
            <p>content text ...</p>
        </div>
    </div>
    <div class="item"> <img alt="" src="/portals/31/controls_12.jpg">
        <div class="carousel_content text_left_pull">
            <h3>ABOUT OUR SKIN</h3>
            <p>content text ...</p>
        </div>
    </div>
    <div class="item"> <img alt="" src="/portals/31/controls_13.jpg">
        <div class="carousel_content text_left_pull">
            <h3>ABOUT OUR SKIN</h3>
            <p>content text ...</p>
        </div>
    </div>
</div>
SOURCE CODE
<div class="carousel carousel_2" data-navigation="true" data-pagination="true" data-autoplay="true" data-autoheight="true">
    <div class="item"> <img alt="" src="/portals/31/controls_11.jpg">
        <div class="carousel_content text_right_pull">
            <h3>ABOUT OUR SKIN</h3>
            <p>content text ...</p>
        </div>
    </div>
    <div class="item"> <img alt="" src="/portals/31/controls_12.jpg">
        <div class="carousel_content text_right_pull">
            <h3>ABOUT OUR SKIN</h3>
            <p>content text ...</p>
        </div>
    </div>
    <div class="item"> <img alt="" src="/portals/31/controls_13.jpg">
        <div class="carousel_content text_right_pull">
            <h3>ABOUT OUR SKIN</h3>
            <p>content text ...</p>
        </div>
    </div>
</div>
SOURCE CODE
<div class="carousel carousel_2" data-navigation="true" data-pagination="true" data-autoplay="true" data-autoheight="true">
    <div class="item"> <img alt="" src="/portals/31/controls_11.jpg">
        <div class="carousel_content text_top_pull">
            <h3>ABOUT OUR SKIN</h3>
            <p>content text ...</p>
        </div>
    </div>
    <div class="item"> <img alt="" src="/portals/31/controls_12.jpg">
        <div class="carousel_content text_top_pull">
            <h3>ABOUT OUR SKIN</h3>
            <p>content text ...</p>
        </div>
    </div>
    <div class="item"> <img alt="" src="/portals/31/controls_13.jpg">
        <div class="carousel_content text_top_pull">
            <h3>ABOUT OUR SKIN</h3>
            <p>content text ...</p>
        </div>
    </div>
</div>
SOURCE CODE
<div class="carousel carousel_2" data-navigation="true" data-pagination="true" data-autoplay="true" data-autoheight="true">
    <div class="item"> <img alt="" src="/portals/161/controls_1.jpg">
        <div class="carousel_content text_bottom_pull">
            <h3>ABOUT OUR SKIN</h3>
            <p>content text ...</p>
        </div>
    </div>
    <div class="item"> <img alt="" src="/portals/161/controls_2.jpg">
        <div class="carousel_content text_bottom_pull">
            <h3>ABOUT OUR SKIN</h3>
            <p>content text ...</p>
        </div>
    </div>
    <div class="item"> <img alt="" src="/portals/161/controls_3.jpg">
        <div class="carousel_content text_bottom_pull">
            <h3>ABOUT OUR SKIN</h3>
            <p>content text ...</p>
        </div>
    </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 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 adipiscing faucibus, risus nibh laoreet odio, a porttitor metus eros ut enim.

SOURCE CODE
<div class="carousel carousel_3" data-items="5" data-pagination="false" data-navigation="true" data-autoplay="true">
    <div class="item">
        <div class="photo_box img_zoom ico_zoom"> 
            <a href="/portals/31/Photo_1_big.jpg"  class="LightBox_image_gallery2">
                <div class="pic_box"> 
                    <img  src="/portals/31/Photo_1.jpg" >
                    <div class="ico"><span class="glyphicons glyph-link"></span></div>
                    <div class="shade"></div>
                </div>
            </a>
            <div class="text_sytle_5">
                <h3>photographic lens </h3>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="photo_box img_zoom ico_zoom"> 
            <a href="/portals/31/Photo_2_big.jpg"  class="LightBox_image_gallery2">
                <div class="pic_box"> 
                    <img  src="/portals/31/Photo_2.jpg" >
                    <div class="ico"><span class="glyphicons glyph-link"></span></div>
                    <div class="shade"></div>
                </div>
            </a>
            <div class="text_sytle_5">
                <h3>A Quiet Life</h3>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="photo_box img_zoom ico_zoom"> 
            <a href="/portals/31/Photo_3_big.jpg"  class="LightBox_image_gallery2">
                <div class="pic_box"> 
                    <img  src="/portals/31/Photo_3.jpg" >
                    <div class="ico"><span class="glyphicons glyph-search"></span></div>
                    <div class="shade"></div>
                </div>
            </a>
            <div class="text_sytle_5">
                <h3>The designer's afternoon </h3>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="photo_box img_zoom ico_zoom"> 
            <a href="/portals/31/Photo_4_big.jpg"  class="LightBox_image_gallery2">
                <div class="pic_box"> 
                    <img  src="/portals/31/Photo_4.jpg" >
                    <div class="ico"><span class="glyphicons glyph-search"></span></div>
                    <div class="shade"></div>
                </div>
            </a>
            <div class="text_sytle_5">
                <h3>Vintage Classic </h3>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="photo_box img_zoom ico_zoom"> 
            <a href="/portals/31/Photo_5_big.jpg"  class="LightBox_image_gallery2">
                <div class="pic_box"> 
                    <img  src="/portals/31/Photo_5.jpg" >
                    <div class="ico"><span class="glyphicons glyph-search"></span></div>
                    <div class="shade"></div>
                </div>
            </a>
            <div class="text_sytle_5">
                <h3>The world of the camera </h3>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="photo_box img_zoom ico_zoom">
            <a href="/portals/31/Photo_1_big.jpg"  class="LightBox_image_gallery2">
                <div class="pic_box"> 
                    <img  src="/portals/31/Photo_1.jpg" >
                    <div class="ico"><span class="glyphicons glyph-search"></span></div>
                    <div class="shade"></div>
                </div>
            </a>
            <div class="text_sytle_5">
                <h3>photographic lens </h3>
            </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.




CAROUSEL FOUR
Aenean mollis tortor placerat mauris ornare suscipit. Praesent vitae faucibus sem. Nulla facilisi. Suspendisse quam dolor, suscipit tincidunt venenatis malesuada, interdum eu erat. Donec tempor tristique ”

SOURCE CODE
<div class="carousel carousel_3" data-items="3" data-pagination="true" data-navigation="true" data-autoplay="true" >
    <div class="item">
        <div class="photo_box  img_zoom ico_zoom"> 
            <a href="#">
                <div class="pic_box"> 
                    <img  src="/portals/31/Photo_1.jpg" >
                    <div class="ico"> <span class="glyphicons glyph-plus"></span> </div>
                    <div class="shade"></div>
                </div>
            </a>
            <div class="text_sytle_3">
                <h3>multi color pack </h3>
                <p>content text...</p>
            </div>
        </div>
    </div>
    <div class="item">    
        <div class="photo_box  img_zoom ico_zoom"> 
            <a href="#">
                <div class="pic_box"> 
                    <img  src="/portals/31/Photo_2.jpg" >
                    <div class="ico"> <span class="glyphicons glyph-plus"></span> </div>
                    <div class="shade"></div>
                </div>
            </a>
            <div class="text_sytle_3">
                <h3>The designer's afternoon </h3>
                <p>content text...</p>
            </div>
        </div>
    </div>
    <div class="item">    
        <div class="photo_box  img_zoom ico_zoom"> 
            <a href="#">
                <div class="pic_box"> 
                    <img  src="/portals/31/Photo_3.jpg" >
                    <div class="ico"> <span class="glyphicons glyph-plus"></span> </div>
                    <div class="shade"></div>
                </div>
            </a>
            <div class="text_sytle_3">
                <h3>The world of the camera </h3>
                <p>content text...</p>
            </div>
        </div>
    </div>
    <div class="item">    
        <div class="photo_box  img_zoom ico_zoom">
            <a href="#">
                <div class="pic_box"> 
                    <img  src="/portals/31/Photo_4.jpg" >
                    <div class="ico"> <span class="glyphicons glyph-plus"></span> </div>
                    <div class="shade"></div>
                </div>
            </a>
            <div class="text_sytle_3">
                <h3>Vintage Classic </h3>
                <p>content text...</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.


CAROUSEL FIVE
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 adipiscing faucibus, risus nibh laoreet odio, a porttitor metus eros ut enim.
SOURCE CODE
<div class="carousel carousel_4" data-autoplay="true" data-pagination="false" data-navigation="false" data-items="3" >
    <div class="item">
        <div class="photo_box shade_zoom"> 
            <a href="#">
                <div class="pic_box"> 
                    <img  src="/portals/31/member_1.jpg" >
                    <div class="ico"> <span class="glyphicons glyph-resize-small"></span> </div>
                    <div class="shade"></div>
                </div>
            </a>
        </div>
        <div class="text_sytle_6">
            <h3>ANDREA ARKOV</h3>
            <div class="info">design, ceo</div>
            <p>content text...</p>
            <div class="social-icons  clearfix"> <a href="#"><span class="social social-twitter"></span></a> <a href="#"><span class="social social-tumblr"></span></a> <a href="#"><span class="social social-facebook"></span></a> <a href="#"><span class="social social-picasa"></span></a> <a href="#"><span class="social social-google-plus"></span></a> </div>
        </div>
    </div>
    <div class="item">
        <div class="photo_box shade_zoom"> 
            <a href="#">
                <div class="pic_box"> 
                    <img  src="/portals/31/member_2.jpg" >
                    <div class="ico"> <span class="glyphicons glyph-resize-small"></span> </div>
                    <div class="shade"></div>
                </div>
            </a>
        </div>
        <div class="text_sytle_6">
            <h3>ANDREA ARKOV</h3>
            <div class="info">design, ceo</div>
            <p>content text...</p>
            <div class="social-icons  clearfix"> <a href="#"><span class="social social-twitter"></span></a> <a href="#"><span class="social social-tumblr"></span></a> <a href="#"><span class="social social-facebook"></span></a> <a href="#"><span class="social social-picasa"></span></a> <a href="#"><span class="social social-google-plus"></span></a> </div>
        </div>
    </div>
    <div class="item">
        <div class="photo_box shade_zoom"> 
            <a href="#">
                <div class="pic_box"> 
                    <img  src="/portals/31/member_3.jpg" >
                    <div class="ico"> <span class="glyphicons glyph-resize-small"></span> </div>
                    <div class="shade"></div>
                </div>
            </a>
        </div>
        <div class="text_sytle_6">
            <h3>ANDREA ARKOV</h3>
            <div class="info">design, ceo</div>
            <p>content text...</p>
            <div class="social-icons  clearfix"> <a href="#"><span class="social social-twitter"></span></a> <a href="#"><span class="social social-tumblr"></span></a> <a href="#"><span class="social social-facebook"></span></a> <a href="#"><span class="social social-picasa"></span></a> <a href="#"><span class="social social-google-plus"></span></a> </div>
        </div>
    </div>
    <div class="item">
        <div class="photo_box shade_zoom"> 
            <a href="#">
                <div class="pic_box"> 
                    <img  src="/portals/31/member_1.jpg" >
                    <div class="ico"> <span class="glyphicons glyph-resize-small"></span> </div>
                    <div class="shade"></div>
                </div>
            </a>
        </div>
        <div class="text_sytle_6">
            <h3>ANDREA ARKOV</h3>
            <div class="info">design, ceo</div>
            <p>content text...</p>
            <div class="social-icons  clearfix"> <a href="#"><span class="social social-twitter"></span></a> <a href="#"><span class="social social-tumblr"></span></a> <a href="#"><span class="social social-facebook"></span></a> <a href="#"><span class="social social-picasa"></span></a> <a href="#"><span class="social social-google-plus"></span></a> </div>
        </div>
    </div>
</div> 

option

Variable Default Type Description
data-items 3 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.

CAROUSEL SIX
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 adipiscing faucibus, risus nibh laoreet odio, a porttitor metus eros ut enim.
SOURCE CODE
<div class="carousel carousel_5"  data-autoplay="true" data-pagination="false" data-navigation="true" data-items="4">
    <div class="item">
        <a href="#"><img  src="/portals/31/carousel_1.jpg" ></a>
    </div>
    <div class="item">
        <a href="#"><img  src="/portals/31/carousel_2.jpg" ></a>
    </div>
    <div class="item">
        <a href="#"><img  src="/portals/31/carousel_3.jpg" ></a>
    </div>

    <div class="item">
        <a href="#"><img  src="/portals/31/carousel_1.jpg" ></a>
    </div>
    <div class="item">
        <a href="#"><img  src="/portals/31/carousel_2.jpg" ></a>
    </div>
    <div class="item">
        <a href="#"><img  src="/portals/31/carousel_3.jpg" ></a>
    </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.

CAROUSEL SEVEN
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 adipiscing faucibus, risus nibh laoreet odio, a porttitor metus eros ut enim.
 
 
SOURCE CODE
<div class="carousel carousel_6" data-autoplay="true" data-pagination="true" data-navigation="true" data-items="2">
    <div class="item">
        <div class="photo_box img_zoom ico_zoom"> 
            <a href="#">
                <div class="pic_box"> 
                    <img  src="/portals/31/carousel6_01.jpg" >
                    <div class="ico"> <span class="glyphicons glyph-plus"></span> </div>
                    <div class="shade"></div>
                </div>
            </a>
        </div>
    </div>
    <div class="item">
        <div class="photo_box img_zoom ico_zoom"> 
            <a href="#">
                <div class="pic_box"> 
                    <img  src="/portals/31/carousel6_02.jpg" >
                    <div class="ico"> <span class="glyphicons glyph-plus"></span> </div>
                    <div class="shade"></div>
                </div>
            </a>
        </div>
    </div>
    <div class="item">
        <div class="photo_box img_zoom ico_zoom"> 
            <a href="#">
                <div class="pic_box"> 
                    <img  src="/portals/31/carousel6_01.jpg" >
                    <div class="ico"> <span class="glyphicons glyph-plus"></span> </div>
                    <div class="shade"></div>
                </div>
            </a>
        </div>
    </div>
    <div class="item">
        <div class="photo_box img_zoom ico_zoom"> 
            <a href="#">
                <div class="pic_box"> 
                    <img  src="/portals/31/carousel6_02.jpg" >
                    <div class="ico"> <span class="glyphicons glyph-plus"></span> </div>
                    <div class="shade"></div>
                </div>
            </a>
        </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.

CAROUSEL EIGHT
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 adipiscing faucibus, risus nibh laoreet odio, a porttitor metus eros ut enim.
SOURCE CODE
<div class="carousel carousel_7"  data-autoplay="true" data-pagination="false" data-navigation="true" data-items="5">
    <div class="item">
        <img alt="" src="/portals/31/link_1.png" >
    </div>
    <div class="item">
        <img alt="" src="/portals/31/link_2.png" >
    </div>
    <div class="item">
        <img alt="" src="/portals/31/link_3.png" >
    </div>
    <div class="item">
        <img alt="" src="/portals/31/link_4.png" >
    </div>
    <div class="item">
        <img alt="" src="/portals/31/link_5.png" >
    </div>
    <div class="item">
        <img alt="" src="/portals/31/link_1.png" >
    </div>
    <div class="item">
        <img alt="" src="/portals/31/link_2.png" >
    </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.

CAROUSEL NINE
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 adipiscing faucibus, risus nibh laoreet odio, a porttitor metus eros ut enim.
SOURCE CODE
<div class="carousel carousel_8" data-autoplay="true" data-pagination="false" data-navigation="true" data-items="3" >
    <div class="item">
        <div class="photo_box"> 
            <a href="#">
                <div class="pic_box"> 
                    <img alt="" src="/portals/31/home7_carousel_img1.jpg" >
                    <div class="ico"> <span class="glyphicons glyph-search"></span> </div>
                    <div class="shade"></div>
                </div>
            </a>
            <div class="text_style5">
                <h3>Mobilesite Development</h3>
                <p class="date">October 25th, 2014</p>
                <p>content text...</p>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="photo_box"> 
            <a href="#">
                <div class="pic_box"> 
                    <img alt="" src="/portals/31/home7_carousel_img2.jpg" >
                    <div class="ico"> <span class="glyphicons glyph-search"></span> </div>
                    <div class="shade"></div>
                </div>
            </a>
            <div class="text_style5">
                <h3>Ultra Responsive Web</h3>
                <p class="date">December 18th, 2014</p>
                <p>content text...</p>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="photo_box"> 
            <a href="#">
                <div class="pic_box"> 
                    <img alt="" src="/portals/31/home7_carousel_img3.jpg" >
                    <div class="ico"> <span class="glyphicons glyph-search"></span> </div>
                    <div class="shade"></div>
                </div>
            </a>
            <div class="text_style5">
                <h3>Website Template</h3>
                <p class="date">January 09th, 2015</p>
                <p>content text...</p>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="photo_box"> 
            <a href="#">
                <div class="pic_box"> 
                    <img alt="" src="/portals/31/home7_carousel_img1.jpg" >
                    <div class="ico"> <span class="glyphicons glyph-search"></span> </div>
                    <div class="shade"></div>
                </div>
            </a>
            <div class="text_style5">
                <h3>Mobilesite Development</h3>
                <p class="date">October 25th, 2014</p>
                <p>content text...</p>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="photo_box"> 
            <a href="#">
                <div class="pic_box"> 
                    <img alt="" src="/portals/31/home7_carousel_img2.jpg" >
                    <div class="ico"> <span class="glyphicons glyph-search"></span> </div>
                    <div class="shade"></div>
                </div>
            </a>
            <div class="text_style5">
                <h3>Ultra Responsive Web</h3>
                <p class="date">December 18th, 2014</p>
                <p>content text...</p>
            </div>
        </div>
    </div>
</div> 

option

Variable Default Type Description
data-items 3 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.