Jquery Image Slider

Slide Effect

Here we will explain you how to slide Image and content in "Jquery Image Slider".

  • Username
  • Username
  • Username
    Password
  • Username
    Password
  • Username
    Password
    Remember me
  • Username
    Password
    Remember me
  • Username
    Password
    Remember me
    SIGN IN
  • Username
    Password
    Remember me
    SIGN IN
  • Username
    Password
    Remember me
    SIGN IN
    Forgot your password?
  • Username
    Password
    Remember me
    SIGN IN
    Forgot your password?
  • Yourname
    Password
    Remember me
    SIGN IN
    Forgot your password?
  • Yourname
    Remember me
    SIGN IN
    Forgot your password?
  • Yourname
    Remember me
    SIGN IN
    Forgot your password?
  • Yourname
    Remember me
    SIGN IN
    Forgot your password?
Download the Library NOW!

How To Use

1. Load jQuery and include Jquery Image Slider plugin files

To use Jquery Image Slider, you need to make sure both the Jquery Image Slider and jQuery 1.7 or higher scripts are included.

<!-- Important Jquery Image Slider stylesheet -->
<link rel="stylesheet" href="jquery-image-player-min.css">

<!--  jQuery 1.7+  -->
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>

<!--  jQuery 1.8+  -->
<script type="text/javascript" src="jquery-ui.min.js"></script>

<!-- Include js plugin -->
<script type="text/javascript" src="jquery-image-player-min.js"></script>

2. Set up your HTML

You need a special markup "data-duration". All you need is to wrap your li(Jquery Image Slider works with only li element) inside the container element. Any type of ID "uipg-video-player" is mandatory to apply proper styles that come from jquery-image-player-min.css file.

You need a new markup "data-effect / data-effect-steps / data-effect-animate", using this attribute you can animate your section.

Note: You can only have "data-duration" markup on the main LI and in "data-effect-animate" markup all the elements should be in "PX"

<div id="demo4">
<ul>
    <li data-duration="0"></li>
    <li data-duration="50">
        <div class="loginbox">
            <img src="demo-images/uipg-logo.png" class="logo" data-effect="animate" data-effect-steps="5" data-effect-animate="margin-top:0; opacity:1" />
        </div>
    </li>
    <li data-duration="500">
        <div class="loginbox">
            <img src="demo-images/uipg-logo.png" class="logo reset" />
        </div>
    </li>
    <li data-duration="50">
        <div class="loginbox">
            <img src="demo-images/uipg-logo.png" class="logo reset" />
            <div class="input" data-effect="animate" data-effect-steps="5" data-effect-animate="margin-top:0; opacity:1"><span>Username</span></div>
        </div>
    </li>
    <li data-duration="500">
        <div class="loginbox">
            <img src="demo-images/uipg-logo.png" class="logo reset" />
            <div class="input reset"><span>Username</span></div>
        </div>
    </li>
    <li data-duration="50">
        <div class="loginbox">
            <img src="demo-images/uipg-logo.png" class="logo reset" />
            <div class="input reset"><span>Username</span></div>
            <div class="input" data-effect="animate" data-effect-steps="5" data-effect-animate="margin-top:0; opacity:1"><span>Password</span></div>
        </div>
    </li>
    <li data-duration="500">
        <div class="loginbox">
            <img src="demo-images/uipg-logo.png" class="logo reset" />
            <div class="input reset"><span>Username</span></div>
            <div class="input reset"><span>Password</span></div>
        </div>
    </li>
    <li data-duration="50">
        <div class="loginbox">
            <img src="demo-images/uipg-logo.png" class="logo reset" />
            <div class="input reset"><span>Username</span></div>
            <div class="input reset"><span>Password</span></div>
            <div class="rememberme" data-effect="animate" data-effect-steps="5" data-effect-animate="margin-top:0; opacity:1">Remember me</div>
        </div>
    </li>
    <li data-duration="500">
        <div class="loginbox">
            <img src="demo-images/uipg-logo.png" class="logo reset" />
            <div class="input reset"><span>Username</span></div>
            <div class="input reset"><span>Password</span></div>
            <div class="rememberme reset">Remember me</div>
        </div>
    </li>
    <li data-duration="50">
        <div class="loginbox">
            <img src="demo-images/uipg-logo.png" class="logo reset" />
            <div class="input reset"><span>Username</span></div>
            <div class="input reset"><span>Password</span></div>
            <div class="rememberme reset">Remember me</div>
            <div class="button" data-effect="animate" data-effect-steps="5" data-effect-animate="margin-top:0; opacity:1">SIGN IN</div>
        </div>
    </li>
    <li data-duration="500">
        <div class="loginbox">
            <img src="demo-images/uipg-logo.png" class="logo reset" />
            <div class="input reset"><span>Username</span></div>
            <div class="input reset"><span>Password</span></div>
            <div class="rememberme reset">Remember me</div>
            <div class="button reset">SIGN IN</div>
        </div>
    </li>
    <li data-duration="50">
        <div class="loginbox">
            <img src="demo-images/uipg-logo.png" class="logo reset" />
            <div class="input reset"><span>Username</span></div>
            <div class="input reset"><span>Password</span></div>
            <div class="rememberme reset">Remember me</div>
            <div class="button reset">SIGN IN</div>
            <div class="forgotpassword" data-effect="animate" data-effect-steps="5" data-effect-animate="margin-top:0; opacity:1">Forgot your password?</div>
        </div>
    </li>
    <li data-duration="1000">
        <div class="loginbox">
            <img src="demo-images/uipg-logo.png" class="logo reset" />
            <div class="input reset"><span>Username</span></div>
            <div class="input reset"><span>Password</span></div>
            <div class="rememberme reset">Remember me</div>
            <div class="button reset">SIGN IN</div>
            <div class="forgotpassword reset">Forgot your password?</div>
        </div>
    </li>
    <li data-duration="1000">
        <div class="loginbox">
            <img src="demo-images/uipg-logo.png" class="logo reset" />
            <div class="input reset"><span class="actName">Yourname</span></div>
            <div class="input reset"><span>Password</span></div>
            <div class="rememberme reset">Remember me</div>
            <div class="button reset">SIGN IN</div>
            <div class="forgotpassword reset">Forgot your password?</div>
        </div>
    </li>
    <li data-duration="1000">
        <div class="loginbox">
            <img src="demo-images/uipg-logo.png" class="logo reset" />
            <div class="input reset"><span class="actName">Yourname</span></div>
            <div class="input reset"><span class="actPass"></span></div>
            <div class="rememberme reset">Remember me</div>
            <div class="button reset">SIGN IN</div>
            <div class="forgotpassword reset">Forgot your password?</div>
        </div>
    </li>
    <li data-duration="1000">
        <div class="loginbox">
            <img src="demo-images/uipg-logo.png" class="logo reset" />
            <div class="input reset"><span class="actName">Yourname</span></div>
            <div class="input reset"><span class="actPass"></span></div>
            <div class="rememberme reset">Remember me</div>
            <div class="button reset actSign">SIGN IN</div>
            <div class="forgotpassword reset">Forgot your password?</div>
        </div>
    </li>
    <li data-duration="50">
        <div class="loginbox" data-effect="animate" data-effect-steps="10" data-effect-animate="margin-top:-320px;">
            <img src="demo-images/uipg-logo.png" class="logo reset" />
            <div class="input reset"><span class="actName">Yourname</span></div>
            <div class="input reset"><span class="actPass"></span></div>
            <div class="rememberme reset">Remember me</div>
            <div class="button reset actSign">SIGN IN</div>
            <div class="forgotpassword reset">Forgot your password?</div>
        </div>
    </li>
    <li data-duration="50">
        <div class="loginbox welcome" data-effect="animate" data-effect-steps="10" data-effect-animate="margin-top:0;">
            <img src="demo-images/img5.png" />
        </div>
    </li>
    <li data-duration="1000">
        <div class="loginbox">
            <img src="demo-images/img5.png" />
        </div>
    </li>
</ul>
</div>

3. Do the Styling

Now call the styling codes for styling.

<style>
	#demo4 .galWrapper{background:#2f4159;}
	#demo4 .loginbox, #demo4 .input, #demo4 .button{border-radius:5px;}
	#demo4 .loginbox{position: absolute; top: 10px; left:50%; margin-left:-145px; width:290px; height:320px; display:block; background-color:#f7f6f2; overflow:hidden; }
	#demo4 .logo{width:82px; margin:0 auto; display:block; padding:20px 0 32px; }
	#demo4 .input, #demo4 .rememberme, #demo4 .button, #demo4 .forgotpassword{width:240px; height:40px; line-height:40px; margin:0 auto 10px; display:block; background-color:#ebe6e2; font-weight:bold; color:#bfbcb5; }
	#demo4 .input span{ float:left; padding-left:12px; font-size:16px;}
	#demo4 .input span.actName{color:#009a9a;}
	#demo4 .input span.actPass{width:66px; height:10px; float:left; margin:18px 15px; display:block; background:url(../demo-images/password.png) repeat-x 0 0;}
	#demo4 .rememberme{ height:35px; line-height:35px; background:url(../demo-images/radio.png) no-repeat left center; font-size:14px; text-indent:20px; font-weight:normal;}
	#demo4 .button{background:#009a9a; font-size:16px; text-align:center; color:#fff;}
	#demo4 .button.actSign{background-color:#24b6b5; color:#222;}
	#demo4 .forgotpassword{height:20px; line-height:20px; background-color:transparent; text-align:center; font-size:11px; font-weight:normal;}
	#demo4 .logo, #demo4 .input, #demo4 .rememberme, #demo4 .button, #demo4 .forgotpassword{margin-top:100px;}
	#demo4 .reset{margin-top:0;}
	#demo4 .welcome{margin-top:300px;}
</style>

4. Call the plugin

Now call the styling codes for styling.

$(document).ready(function(){
	$('#demo1').jsVideoPlayer({
		showTitle : false,
		showVolumeControl : false,
		playerWidth:400,
		playerHeight:385
	});
});

Player Demos

comments powered by Disqus