Revolution Slider Example

<div class="banner-container">
    <div class="revSlider">
        <ul>
            <li data-transition="3dcurtain-vertical" data-slotamount="4" data-masterspeed="500">
                <img src="~/Content/images/slider01.png" class="img-responsive" />
                <div class="caption lft large_text" data-y="50" data-x="20" data-speed="1000" data-start="2000" data-easing="easeInOutBounce">
                    <p>Hello, and welcome to my website!</p>
                </div>
                <div class="caption lfl medium_text" data-y="100" data-x="70" data-speed="500" data-start="3500" data-easing="easeOutQuad">
                    <p>If you do not already have an account, please @Html.ActionLink("Register Here", "Register", "Account", new { area = "" }, null).</p>
                </div>
                <div class="caption lfr medium_text" data-y="130" data-x="120" data-speed="500" data-start="4500" data-easing="easeOutQuart">
                    <p>If you already have an account, you may @Html.ActionLink("Log in Here", "Login", "Account", new { area = "" }, null).</p>
                </div>
                <div class="caption lft medium_text" data-y="185" data-x="180" data-speed="500" data-start="5500" data-easing="easeInOutCirc">
                    Registering an account removes the
                </div>
                <div class="caption lfb medium_text" data-y="210" data-x="250" data-speed="500" data-start="6000" data-easing="easeInOutCirc">
                    <p>advertisements at the top of the site.</p>
                </div>
                <div class="caption lft medium_text" data-y="250" data-x="50" data-speed="500" data-start="7000" data-easing="easeInOutBounce">
                    <p>Some content is available to anonymous users, however,</p>
                </div>
                <div class="caption lfl medium_text" data-y="275" data-x="100" data-speed="500" data-start="7250" data-easing="easeOutSine">
                    <p>a majority of the information is only available</p>
                </div>
                <div class="caption lfb medium_text" data-y="300" data-x="125" data-speed="500" data-start="7500" data-easing="easeInCubic">
                    <p>to registered and authenticated users.</p>
                </div>
            </li>
            <li data-transition="3dcurtain-horizontal" data-slotamount="7" data-masterspeed="500">
                <img src="~/Content/images/slider04.png" class="img-responsive" />
                <div class="caption lfl medium_text" data-y="15" data-x="330" data-speed="500" data-start="2000" data-easing="easeInOutCirc">
                    <p>Login controls are also located in</p>
                </div>
                <div class="caption lfr medium_text" data-y="40" data-x="360" data-speed="500" data-start="2750" data-easing="easeInOutCirc">
                    <p>the top-right corner of every page.</p>
                </div>
                <div class="caption lft medium_text" data-y="90" data-x="370" data-speed="1000" data-start="3750" data-easing="easeInOutElastic">
                    <p>If being viewed on a mobile browser,</p>
                </div>
                <div class="caption lfr medium_text" data-y="120" data-x="390" data-speed="750" data-start="4000" data-easing="easeInOutExpo">
                    <p>the login controls are located in</p>
                </div>
                <div class="caption lfb medium_text" data-y="150" data-x="410" data-speed="1250" data-start="4250" data-easing="easeInOutExpo">
                    <p>the navigation dropdown at the bottom.</p>
                </div>
                <div class="caption lfl large_text" data-y="200" data-x="420" data-speed="500" data-start="5250" data-easing="easeInElastic">
                    <p>There are currently</p>
                </div>
                <div class="caption lfr medium_text" data-y="245" data-x="440" data-speed="500" data-start="5750" data-easing="easeOutBounce">
                    <p>@OAuthWebSecurity.RegisteredClientData.Count OAuth client providers that you may</p>
                </div>
                <div class="caption lfb medium_text" data-y="270" data-x="470" data-speed="500" data-start="6250" data-easing="easeOutBack">
                    <p>use to authenticate with this website.</p>
                </div>
                <div class="caption lfl medium_text" data-y="300" data-x="525" data-speed="500" data-start="5000" data-easing="easeInOutElastic">
                    <i class="social social-facebookcircle fa-5x"></i>
                </div>
                <div class="caption lfl medium_text" data-y="300" data-x="600" data-speed="500" data-start="5500" data-easing="easeInOutElastic">
                    <i class="social social-twitterbirdcircle fa-5x"></i>
                </div>
                <div class="caption lfl medium_text" data-y="300" data-x="675" data-speed="500" data-start="6000" data-easing="easeInOutElastic">
                    <i class="social social-microsoftcircle fa-5x"></i>
                </div>
                <div class="caption lfl medium_text" data-y="300" data-x="750" data-speed="500" data-start="6500" data-easing="easeInOutElastic">
                    <i class="social social-googlecircle fa-5x"></i>
                </div>
            </li>
        </ul>
        <div class="tp-bannertimer"></div>
        <div class="tp-bannertimer tp-bottom"></div>
    </div>
</div>