Javascript SlideShow

How To Create Images Slider In Javascript  

javascript slideshow


In This Javascript Tutorial we will See How To Make Two Images SlideShow Using translateXtranslateY To Display The Next And Previous Image In JS And Netbeans Editor .


Horizontal Slider Source Code:

    
<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Slider 1</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <style>
            
            *{box-sizing: border-box}
            
            .main{
                   border: 1px solid #000;
                   width:50%;
                   position: relative;
                   background: url('../../images/wood-2.jpg');
                   background-size: cover;
                   margin: 50px auto;
                 }
                 
                 .container{
                             width: 500px;
                             height: 250px;
                             margin: 30px auto;
                             border: 1px solid #000;
                             position: relative;
                             overflow: hidden;
                 }   
            
                 .container .slider{
                                     width: 2500px;
                                     height: 250px;
                                     position: absolute;
                                     transition: all 1s ease-in-out;
                 }
                 
                 .container .slider .box{
                                         float: left;
                                         width: 500px;
                                         height: 100%;
                 }
                 
                 .container .slider .box:first-child{background: red}
                 .container .slider .box:nth-child(2){background: green}
                 .container .slider .box:nth-child(3){background: blue}
                 .container .slider .box:nth-child(4){background: black}
                 .container .slider .box:last-child{background: yellow}
                 
                 
                 .main .nav{
                             position: absolute;
                             top: 40%;
                             width: 60px;
                             height: 60px;
                             line-height: 60px;
                             font-size: 45px;
                             color: #fff;
                             background: rgba(36,33,32,0.4);
                             cursor: pointer;
                             transition: all .5s ease-in-out;
                             text-align: center;
                             opacity: 0.5;
                 }
                 
                 
                 .main:hover .nav{ opacity: 1 }
                 
                 .main .nav:hover{
                                   background: rgba(10,10,10,0.6);
                                   color: orangered;
                 }
                 
                 .next{right:0}
                 .previous{left: 0}
                 
        </style>
        
    </head>
    <body>
       
        <div class="main">
            
            <div class="container">
                
                <div class="slider" id="sld">
                    
                    <div class="box"></div>
                    <div class="box"></div>
                    <div class="box"></div>
                    <div class="box"></div>
                    <div class="box"></div>
                    
                </div>
                
            </div>
            
            <span  class="nav previous" onclick="fPrevious()"><</span>
            <span  class="nav next" onclick="fNext()">></span>
            
        </div>
        
        <script>
            
            var showed_box = 0;
            
            function fNext(){
                
                showed_box += -500;
                
                if(showed_box < -2000)
                    showed_box = 0;
                
                document.getElementById('sld').style.transform = "translateX("+showed_box+"px)"; 
            }
            
            function fPrevious(){
                
                showed_box += 500;
                
                if(showed_box > 0)
                    showed_box = -2000;
                
                document.getElementById('sld').style.transform = "translateX("+showed_box+"px)"; 
                
            }
            
        </script>
        
        
    </body>
</html>



OUTPUT:



horizontal slideshow in javascript



Vertical Slider Source Code:

    
<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Slider 2</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <style>
            
            *{box-sizing: border-box}
            
            .main{
                   border: 1px solid #000;
                   width:30%;
                   position: relative;
                   background: url('../../images/wood-2.jpg');
                   background-size: cover;
                   margin: 50px auto;
                 }
                 
                 .container{
                             width: 250px;
                             height: 500px;
                             margin: 30px auto;
                             border: 1px solid #000;
                             position: relative;
                             overflow: hidden;
                 }   
            
                 .container .slider{
                                     width: 250px;
                                     height: 2500px;
                                     position: absolute;
                                     transition: all 1s ease-in-out;
                 }
                 
                 .container .slider .box{
                                         float: left;
                                         width: 250px;
                                         height: 500px;
                 }
                 
                 .container .slider .box:first-child{background: red}
                 .container .slider .box:nth-child(2){background: green}
                 .container .slider .box:nth-child(3){background: blue}
                 .container .slider .box:nth-child(4){background: black}
                 .container .slider .box:last-child{background: yellow}
                 
                 
                 .main .nav{
                             position: absolute;
                             right:  40%;
                             width: 60px;
                             height: 60px;
                             line-height: 60px;
                             font-size: 45px;
                             color: #fff;
                             background: rgba(36,33,32,0.4);
                             cursor: pointer;
                             transition: all .5s ease-in-out;
                             text-align: center;
                             opacity: 0.5;
                 }
                 
                 
                 .main:hover .nav{ opacity: 1 }
                 
                 .main .nav:hover{
                                   background: rgba(10,10,10,0.6);
                                   color: orangered;
                 }
                 
                 .next{top:0}
                 .previous{bottom: 0}
                 
        </style>
        
    </head>
    <body>
       
        <div class="main">
            
            <div class="container">
                
                <div class="slider" id="sld">
                    
                    <div class="box"></div>
                    <div class="box"></div>
                    <div class="box"></div>
                    <div class="box"></div>
                    <div class="box"></div>
                    
                </div>
                
            </div>
            
            <span  class="nav previous" onclick="fPrevious()">&dArr;</span>
            <span  class="nav next" onclick="fNext()">&uArr;</span>
            
        </div>
        
        <script>
            
            var showed_box = 0;
            
            function fNext(){
                
                showed_box += -500;
                
                if(showed_box < -2000)
                    showed_box = 0;
                
                document.getElementById('sld').style.transform = "translateY("+showed_box+"px)"; 
            }
            
            function fPrevious(){
                
                showed_box += 500;
                
                if(showed_box > 0)
                    showed_box = -2000;
                
                document.getElementById('sld').style.transform = "translateY("+showed_box+"px)"; 
                
            }
            
        </script>
        
        
    </body>
</html>




OUTPUT:


vertical slideshow in javascript





Share this

Related Posts

Previous
Next Post »