Skip to main content

HOW TO MAKE SIMPLE JQUERY SLIDER


HOW TO MAKE SIMPLE JQUERY SLIDER

HTML



<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>Slider</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="style/newcss.css"/>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
    
  $("#btn1").click(function(){
     $("#one").animate({width:'1080px',height:'500px'},600);
    $("#two").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#three").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#four").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#five").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#six").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#seven").animate({width:'0px',height:'0px',left:'1214px'},600);
    $("#btn1").hide();
    $("#btn2").show();
    $("#btn3").hide();
    $("#btn4").hide();
    $("#btn5").hide();
    $("#btn6").hide();
    $("#btn7").hide();
  });
  $("#btn2").click(function(){
  $("#btn1").hide();
    $("#btn2").hide();
    $("#btn3").show();
    $("#btn4").hide();
    $("#btn5").hide();
    $("#btn6").hide();
    $("#btn7").hide();
     $("#one").animate({width:'0px',height:'0px',left:'1214px',top:'500px'},600);
    $("#two").animate({width:'1080px',height:'500px'},600);
    $("#three").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#four").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#five").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#six").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#seven").animate({width:'0px',height:'500px',left:'135px'},600);
    });
    $("#btn3").click(function(){
  $("#btn1").hide();
    $("#btn2").hide();
    $("#btn3").hide();
    $("#btn4").show();
    $("#btn5").hide();
    $("#btn6").hide();
    $("#btn7").hide();
     $("#one").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#two").animate({width:'0px',height:'0px',left:'1214px',top:'0px'},600);
    $("#three").animate({width:'1080px',height:'500px'},600);
    $("#four").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#five").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#six").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#seven").animate({width:'0px',height:'500px',left:'135px'},600);
    });
      $("#btn4").click(function(){
  $("#btn1").hide();
    $("#btn2").hide();
    $("#btn3").hide();
    $("#btn4").hide();
    $("#btn5").show();
    $("#btn6").hide();
    $("#btn7").hide();
     $("#one").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#two").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#three").animate({width:'0px',height:'0px',left:'607px',top:'500px'},600);
    $("#four").animate({width:'1080px',height:'500px'},600);
    $("#five").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#six").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#seven").animate({width:'0px',height:'500px',left:'135px'},600);
    });
        $("#btn5").click(function(){
  $("#btn1").hide();
    $("#btn2").hide();
    $("#btn3").hide();
    $("#btn4").hide();
    $("#btn5").hide();
    $("#btn6").show();
    $("#btn7").hide();
     $("#one").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#two").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#three").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#four").animate({width:'0px',height:'500px',left:'1214px'},600);
    $("#five").animate({width:'1080px',height:'500px'},600);
    $("#six").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#seven").animate({width:'0px',height:'500px',left:'135px'},600);
    });
          $("#btn6").click(function(){
  $("#btn1").hide();
    $("#btn2").hide();
    $("#btn3").hide();
    $("#btn4").hide();
    $("#btn5").hide();
    $("#btn6").hide();
    $("#btn7").show();
     $("#one").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#two").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#three").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#four").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#five").animate({width:'0px',height:'500px',left:'1214px'},600);
    $("#six").animate({width:'1080px',height:'500px'},600);
    $("#seven").animate({width:'0px',height:'500px',left:'135px'},600);
    });
            $("#btn7").click(function(){
  $("#btn1").show();
    $("#btn2").hide();
    $("#btn3").hide();
    $("#btn4").hide();
    $("#btn5").hide();
    $("#btn6").hide();
    $("#btn7").hide();
    $("#one").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#two").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#three").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#four").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#five").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#six").animate({width:'0px',height:'500px',left:'1214px'},600);
    $("#seven").animate({width:'1080px',height:'500px'},600);
    });
});
</script> 
    </head>
    <body>
         <button id="btn7">seven</button>
                   <button id="btn6">six</button>
                   <button id="btn5">five</button>
                    <button id="btn4">four</button>
                    <button id="btn3">three</button>
                      <button id="btn2">two</button>
                      <button id="btn1">one</button> 
        <div id="cover">
            <div id="one"></div>
            <div id="two"></div>
            <div id="three"></div>
            <div id="four"></div>
            <div id="five"></div>
            <div id="six"></div>
            <div id="seven"></div>
        </div>
                      <script>
                          do {
   s += 1;
   document.write(s);
} while (s < 5);
                      </script>
    </body>
</html>


CSS





body
{
    margin: 0px;
    background: url('slide2.jpg')no-repeat;
}


#cover
{
    height: 500px;
    width: 1080px;
    
    margin: auto;
    overflow: hidden;
}

#one
{
    height: 500px;
    width: 0px;
    position: absolute;
    background:pink;
    left: 135px;
    background: url(../images/slide8.jpg)no-repeat;
    
    
    
}

#two
{
    height: 500px;
    width: 0px;
    position: absolute;
    background:green;
      left: 135px;
       background: url(../images/slide2.jpg)no-repeat;
    
}
#three
{
    height: 500px;
    width: 0px;
    position: absolute;
    background:red;
      left: 135px;
       background: url(../images/slide3.jpg)no-repeat;
    
}
#four
{
    height: 500px;
    width: 0px;
    position: absolute;
    background:yellowgreen;
     left: 135px;
      background: url(../images/slide4.jpg)no-repeat;
    
}
#five
{
    height: 500px;
    width: 0px;
    position: absolute;
    background:purple;
     left: 135px;
      background: url(../images/slide5.jpg)no-repeat;
    
}
#six
{
    height: 500px;
    width: 0px;
    position: absolute;
    background:orangered;
      left: 135px;
       background: url(../images/slide6.jpg)no-repeat;
    
}
#seven
{
    height: 500px;
    width: 0px;
    position: absolute;
    background:blue;
      left: 135px;
       background: url(../images/slide7.jpg)no-repeat;
    
}
#btn1
{
    position: absolute;
}

#btn2
{
    position: absolute;
}
#btn3
{
    position: absolute;
}
#btn4
{
    position: absolute;
}
#btn5
{
    position: absolute;
}
#btn6
{
    position: absolute;
}
#btn7
{
    position: absolute;
}

Labels:

Comments

Post a Comment

Popular posts from this blog

Wo-commerce sidebar navigation

There is Plus Minus Image you can change it in your own code
Post a Comment
Read more

How to add attribute in input type onload

Add this script this will target your input type submit and set an attribute on it when page load. <script> function functionAddAttribute(){     $("input:submit").attr("accesskey","g"); }; window.onload = functionAddAttribute; </script> <noscript>Your browser does not support JavaScript!</noscript> This is html <input type="submit" value="this is button" />
Post a Comment
Read more

HOW TO IMPLEMENT ADAPTIVE IMAGE IN WORDPRESS

If you don't know about Adaptive image please Read my last artical. STEP:1 COPY .htaccess , Adaptive-image.php, ai-cookie.php, DS_Store file in your root directory STEP 2: CREATE folder in wp-contant/uploads/adaptive/ai-cache if .htaccess file already exist then pest this code in it but be carefull take its backup CODE #START Adaptive-Images #Add any directories you wish to omit from the Adaptive-Images process on a new line. #Omit plugins, wp-includes and wp-admin content. RewriteCond %{REQUEST_URI} !wp-content/plugins RewriteCond %{REQUEST_URI} !wp-includes RewriteCond %{REQUEST_URI} !wp-admin #Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above directories #to adaptive-images.php so we can select appropriately sized versions RewriteRule .(?:jpe?g|gif|png)$ adaptive-images.php #END Adaptive-Images UNDER # BEGIN WordPress <IfModule mod_rewrite.c> RewriteEngine On STEP3: Open Adaptive-image.php change with it $cache_path    = "wp-content/upl...
Post a Comment
Read more