index.html

<!--
https://0.s3.envato.com/files/43917021/index.html
-->
<!DOCTYPE html>
<html><head>
    <title>jQuery Carousel Evolution</title>

    <link rel="Stylesheet" type="text/css" href="style/content.css">
    <link rel="Stylesheet" type="text/css" href="style/carousel.css">

    <script type="text/javascript" src="scripts/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.mousewheel.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.carousel-1.1.min.js"></script>
    <script type="text/javascript" src="scripts/sample01.js"></script>

<style>[touch-action="none"]{ -ms-touch-action: none; touch-action: none; }[touch-action="pan-x"]{ -ms-touch-action: pan-x; touch-action: pan-x; }[touch-action="pan-y"]{ -ms-touch-action: pan-y; touch-action: pan-y; }[touch-action="scroll"],[touch-action="pan-x pan-y"],[touch-action="pan-y pan-x"]{ -ms-touch-action: pan-x pan-y; touch-action: pan-x pan-y; }</style><style id="style-1-cropbar-clipper">/* Copyright 2014 Evernote Corporation. All rights reserved. */
.en-markup-crop-options {
    top: 18px !important;
    left: 50% !important;
    margin-left: -90px !important;
    width: 180px !important;
    border: 2px rgba(255,255,255,.38) solid !important;
    border-radius: 4px !important;
}

.en-markup-crop-options div div:first-of-type {
    margin-left: 0px !important;
}
</style></head>
<body>

<div class="column12container main_container">

<div class="column8 heading">
<h1>jQuery Carousel Evolution</h1>
<h2>The Web's Most Powerful Carousel Slider</h2>
</div>

<div class="column4 download">

</div>

<div class="column12">

<!-- carousel -->

<div class="carousel"> <!-- BEGIN CONTAINER -->

    <div class="slides" style="width: 930px; height: 330px;"> <!-- BEGIN CAROUSEL -->

        <div class="slideItem" style="width: 256px; height: 211.2px; top: 54px; right: 34.6px; opacity: 1; z-index: 4; display: block;"> <!-- SLIDE ITEM -->
            <a href="#">
                <img src="images/slide-1.jpg" style="width: 256px; height: 192px; display: inline-block;">
            </a>
        <div class="shadow" style="width: 400px; z-index: -1; position: absolute; margin: 0px; padding: 0px; border: none; overflow: hidden; left: 0px; bottom: 0px;"><div class="shadowLeft" style="position: relative; float: left;"></div><div class="shadowMiddle" style="position: relative; float: left; width: 56px;"></div><div class="shadowRight" style="position: relative; float: left;"></div></div></div>

        <div class="slideItem" style="width: 204.8px; height: 168.96px; top: 73.2px; right: -47.32px; opacity: 0; z-index: 3; display: none;">
            <a href="#">
                <img src="images/slide-2.jpg" style="width: 204.8px; height: 153.6px; display: inline-block;">
            </a>
        <div class="shadow" style="width: 400px; z-index: -1; position: absolute; margin: 0px; padding: 0px; border: none; overflow: hidden; left: 0px; bottom: 0px;"><div class="shadowLeft" style="position: relative; float: left;"></div><div class="shadowMiddle" style="position: relative; float: left; width: 4.80000000000001px;"></div><div class="shadowRight" style="position: relative; float: left;"></div></div></div>

        <div class="slideItem" style="width: 204.8px; height: 168.96px; top: 73.2px; right: 772.52px; opacity: 0; z-index: 3; display: none;">
            <a href="#">
                <img src="images/slide-3.jpg" style="width: 204.8px; height: 153.6px; display: inline-block;">
            </a>
        <div class="shadow" style="width: 400px; z-index: -1; position: absolute; margin: 0px; padding: 0px; border: none; overflow: hidden; left: 0px; bottom: 0px;"><div class="shadowLeft" style="position: relative; float: left;"></div><div class="shadowMiddle" style="position: relative; float: left; width: 4.80000000000001px;"></div><div class="shadowRight" style="position: relative; float: left;"></div></div></div>

        <div class="slideItem" style="width: 256px; height: 211.2px; top: 54px; right: 639.4px; opacity: 1; z-index: 4; display: block;">
            <a href="#">
                <img src="images/slide-4.jpg" style="width: 256px; height: 192px; display: inline-block;">
            </a>
        <div class="shadow" style="width: 400px; z-index: -1; position: absolute; margin: 0px; padding: 0px; border: none; overflow: hidden; left: 0px; bottom: 0px;"><div class="shadowLeft" style="position: relative; float: left;"></div><div class="shadowMiddle" style="position: relative; float: left; width: 56px;"></div><div class="shadowRight" style="position: relative; float: left;"></div></div></div>

        <div class="slideItem" style="width: 320px; height: 264px; top: 30px; right: 473px; opacity: 1; z-index: 5; display: block;">
            <a href="#">
                <img src="images/slide-5.jpg" style="width: 320px; height: 240px; display: inline-block;">
            </a>
        <div class="shadow" style="width: 400px; z-index: -1; position: absolute; margin: 0px; padding: 0px; border: none; overflow: hidden; left: 0px; bottom: 0px;"><div class="shadowLeft" style="position: relative; float: left;"></div><div class="shadowMiddle" style="position: relative; float: left; width: 120px;"></div><div class="shadowRight" style="position: relative; float: left;"></div></div></div>

        <div class="slideItem" style="width: 400px; height: 330px; top: 0px; right: 265px; opacity: 1; z-index: 6; display: block;">
            <a href="#">
                <img src="images/slide-6.jpg" style="width: 400px; height: 300px; display: inline-block;">
            </a>
        <div class="shadow" style="width: 400px; z-index: -1; position: absolute; margin: 0px; padding: 0px; border: none; overflow: hidden; left: 0px; bottom: 0px;"><div class="shadowLeft" style="position: relative; float: left;"></div><div class="shadowMiddle" style="position: relative; float: left; width: 200px;"></div><div class="shadowRight" style="position: relative; float: left;"></div></div></div>

        <div class="slideItem" style="width: 320px; height: 264px; top: 30px; right: 137px; opacity: 1; z-index: 5; display: block;">
                <img src="images/slide-7.jpg" style="width: 320px; height: 240px; display: inline-block;">
        <div class="shadow" style="width: 400px; z-index: -1; position: absolute; margin: 0px; padding: 0px; border: none; overflow: hidden; left: 0px; bottom: 0px;"><div class="shadowLeft" style="position: relative; float: left;"></div><div class="shadowMiddle" style="position: relative; float: left; width: 120px;"></div><div class="shadowRight" style="position: relative; float: left;"></div></div></div>

    <!--
	<div class="spinner" style="display: none; width: 400px; height: 300px; top: 0px; right: 265px; opacity: 1; z-index: 10; position: absolute; cursor: pointer; overflow: hidden; padding: 0px; margin: 0px; border: none;"></div>
	<div class="videoOverlay" style="display: none; width: 400px; height: 300px; top: 0px; right: 265px; opacity: 1; z-index: 9; position: absolute; cursor: pointer; overflow: hidden; padding: 0px; margin: 0px; border: none;"></div>
	-->
	</div> <!-- END SLIDES -->

<!--
<div class="nextButton"></div><div class="prevButton"></div>
<div class="buttonNav" style="width: 182px; height: 26px;">
	<div class="bullet" style="text-align: center;"></div>
	<div class="bullet" style="text-align: center;"></div>
	<div class="bullet" style="text-align: center;"></div>
	<div class="bullet" style="text-align: center;"></div>
	<div class="bullet" style="text-align: center;"></div>
	<div class="bullet bulletActive" style="text-align: center;"></div>
	<div class="bullet" style="text-align: center;"></div>

</div>
-->
</div> <!-- END CAROUSEL -->

</div>

<!-- left content -->
<div class="column8 leftContent">



<div class="columnLeftContent_container">
    <h2>Features</h2>
</div>

<div class="columnLeftContent_container">
    <div class="column1Left">
        <img src="images/configurable.jpg">
    </div>
    <div class="column2Left">
        <a id="image" name="image"></a>
        <h3>Configurable Image</h3>
        <p>Allows you to set the size of the front and back image. configurable number of images visible per scroll.
        Also set the position of the image.</p>
    </div>
</div>

<div class="columnLeftContent_container">
    <div class="column1Left">
        <img src="images/9styles.jpg">
    </div>
    <div class="column2Left">
        <a id="9styles" name="9styles"></a>
        <h3>9 Different Styles</h3>
        <p>You can create up to 9 different styles of carousel with this plugin.</p>
    </div>
</div>

<div class="columnLeftContent_container">
    <div class="column1Left">
        <img src="images/reflection.jpg">
    </div>
    <div class="column2Left">
        <a id="reflection" name="reflection"></a>
        <h3>Image Reflection</h3>
        <p>Displays reflection effects to your images. No more photoshop. The reflections appear instantly
        under each image. You are also allowed to specify the height of the reflection.</p>
    </div>
</div>

<div class="columnLeftContent_container">
    <div class="column1Left">
        <img src="images/shadow.jpg">
    </div>
    <div class="column2Left">
        <a id="shadow" name="shadow"></a>
        <h3>Shadow</h3>
        <p>Automatically create shadow effect for each image.</p>
    </div>
</div>

<div class="columnLeftContent_container">
    <div class="column1Left">
        <img src="images/description.jpg">
    </div>
    <div class="column2Left">
        <a id="description" name="description"></a>
        <h3>Text Description</h3>
        <p>You can add text description that associated with each image, and placing it anywhere in the web page.
        <a href="example02.html">See example preview.</a>
        </p>
    </div>
</div>

<div class="columnLeftContent_container">
    <div class="column1Left">
        <img src="images/autoplay.jpg">
    </div>
    <div class="column2Left">
        <a id="autoplay" name="autoplay"></a>
        <h3>Autoplay</h3>
        <p>Automatically animate through your carousel when visitors arrive on your website.
        Great for header sliders. You can set interval time of autoplay.
        </p>
    </div>
</div>

<div class="columnLeftContent_container">
    <div class="column1Left">
        <img src="images/button.jpg">
    </div>
    <div class="column2Left">
        <a id="button" name="button"></a>
        <h3>Navigation Button</h3>
        <p>Navigate through carousel image with next/prev button, or bullets and numbers button.</p>
    </div>
</div>

<div class="columnLeftContent_container">
    <div class="column1Left">
        <img src="images/video.jpg">
    </div>
    <div class="column2Left">
        <a id="video" name="video"></a>
        <h3>Video Support</h3>
        <p>jQuery Carousel Evolution can also play video from YouTube and Vimeo.
        </p>
    </div>
</div>

<div class="columnLeftContent_container">
    <div class="column1Left">
        <img src="images/browser.jpg">
    </div>
    <div class="column2Left">
        <a id="browser" name="browser"></a>
        <h3>Cross-browser Support</h3>
        <p>Displays consistently across all major browsers including Internet Explorer, Firefox, Opera, Chrome, and Safari.
        </p>
    </div>
</div>

<div class="columnLeftContent_container">
    <div class="column1Left">
        <img src="images/multiple.jpg">
    </div>
    <div class="column2Left">
        <a id="multiple" name="multiple"></a>
        <h3>Multiple Carousels</h3>
        <p>You can setup multiple carousels on a single web page and skin each one differently.
        </p>
    </div>
</div>

<div class="columnLeftContent_container">
    <div class="column1Left">
        <img src="images/unlimited.jpg">
    </div>
    <div class="column2Left">
        <a id="unlimited" name="unlimited"></a>
        <h3>Unlimited Images</h3>
        <p>Support unlimited number of images.
        </p>
    </div>
</div>

<div class="columnLeftContent_container">
    <div class="column1Left">
        <img src="images/mouse.jpg">
    </div>
    <div class="column2Left">
        <a id="mouse" name="mouse"></a>
        <h3>Mouse Control</h3>
        <p>Enhance the experience of your carousel by allowing users to seamlessly scroll through slides.</p>
    </div>
</div>

<div class="columnLeftContent_container">
    <div class="column1Left">
        <img src="images/callback.jpg">
    </div>
    <div class="column2Left">
        <a id="callback" name="callback"></a>
        <h3>Callback Functions</h3>
        <p>Run functions before and after animating between slides on your carousel.</p>
    </div>
</div>

<div class="columnLeftContent_container">
    <div class="column1Left">
        <img src="images/api.jpg">
    </div>
    <div class="column2Left">
        <a id="api" name="api"></a>
        <h3>Public API</h3>
        <p>The carousel plugin offers a public API which you can use to control component inside the slider from within your own scripts.</p>
    </div>
</div>

<div class="columnLeftContent_container">
    <div class="column1Left">
        <img src="images/search.jpg">
    </div>
    <div class="column2Left">
        <a id="search" name="search"></a>
        <h3>Search Engine Ready</h3>
        <p>All content is easily accessible to search engines and markup semantically correct to help you achieve
        the best possible SEO results.
        </p>
    </div>
</div>


</div> <!-- end left content -->

<!-- right content -->
<div class="column4 rightContent">

<div class="columnRightContent_container">

    <ul>
        <li>Sample 1</li>
        <li><a href="example02.html" class="preview">Sample 2</a></li>
        <li><a href="example03.html" class="preview">Sample 3</a></li>
    </ul>

    <br>

    <strong>Features List:</strong>

    <ul>
        <li><a href="#image">Configurable Image</a></li>
        <li><a href="#9styles">9 Different Styles</a></li>
        <li><a href="#reflection">Image Reflection</a></li>
        <li><a href="#shadow">Shadow</a></li>
        <li><a href="#description">Text Description</a></li>
        <li><a href="#autoplay">Autoplay</a></li>
        <li><a href="#button">Navigation Button</a></li>
        <li><a href="#video">Video Support</a></li>
        <li><a href="#browser">Cross-browser</a></li>
        <li><a href="#multiple">Multiple Carousels</a></li>
        <li><a href="#unlimited">Unlimited Images</a></li>
        <li><a href="#mouse">Mouse Control</a></li>
        <li><a href="#callback">Callback Functions</a></li>
        <li><a href="#api">Public API</a></li>
        <li><a href="#search">Search Engine Ready</a></li>
    </ul>
</div>

<div class="columnRightContent_container">
    <strong>Compatible With:</strong>
    <ul>
        <li>Internet Explorer 7+</li>
        <li>Chrome 2+</li>
        <li>Firefox 3.5+</li>
        <li>Opera 10.5+</li>
        <li>Safari 3+</li>
    </ul>
</div>

<div class="columnRightContent_container download_content">

</div>

</div> <!-- end right content -->

<div class="clear"></div>
</div>

<!-- footer -->
<div class="column12container footer">

    <div class="leftFooter">
        <strong>STAY CONNECTED</strong>
        <p>
        <a href="http://twitter.com/MapallaDev" target="_blank"><img src="images/twitter.png" alt="Twitter"></a>
        <a href="feed://codecanyon.net/feeds/users/Mapalla" target="_blank"><img src="images/rss.png" alt="RSS"></a>
        <a href="http://codecanyon.net/user/Mapalla" target="_blank"><img src="images/codecanyon.gif" alt="Mapalla"></a>
        </p>
    </div>

    <div class="rightFooter">

    </div>

</div>




</body></html>