Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE HTML> 
<html> 
    <head>
        <title>Slider karo4e na JS</title>
        <meta charset="utf-8" http-equiv="content-type">
        
        <link href="slider.css" type="text/css" rel="stylesheet">
    </head>    
    <body> 
        <div class='slider'>
            <div class='slider-images'> 
                <div class="slider_images-wrap">
                <img  #id='firstimg'  src="img/Animals___Under_water____Sea_turtle_swims_067775_25.jpg">
                      <img src="img/Tan-huong-mua-he-tren-quan-dao-Gili-diem-den-ly-tuong-o-Indonesia-4.jpg">    
​
                    <img src="img/Dolphin-HD-Wallpaper_13-1600x900.jpg">
            <img src="img/nature-sand-birds-depth-of-field-sea-beach-1600x900-wallpaper.jpg">
            </div>
            </div>
        
        <div class="slider_navigation">
            <a href="#" class='slider_pager slider_pager_previos'><i class="icon-chevron-left icon-large"></i></a>
            <a href="#" class='slider_pager slider_pager_next'><i class="icon-chevron-right icon-large"></i></a>    
        </div>
        
            <ul class="slider_pagination">
                <li class="slider_pagination-item"><a href="#" data-slider_item="0" class="active">1</a></li>
                <li class="slider_pagination-item"><a href="#" data-slider_item="1" class="active">2</a></li> 
                <li class="slider_pagination-item"><a href="#" data-slider_item="2" class="active">3</a></li> 
                <li class="slider_pagination-item"><a href="#" data-slider_item="3" class="active">4</a></li> 
            </ul>
        
        
        </div>
        <script src="slider.js"></script>
        <script>
                new Slider('.slider',{
                    direction: 'horizontal',
                    currentSlide:2
                });
        
        </script>
    </body>
        >
 
body {
    margin: 0;
    background: #eeeeee
}
​
.slider { 
background: #fe2fe2;
 width: 1000px;;
margin:10% 10%;
padding: 0;
    
 }
.slider_images-wrap {
    overflow-x: scroll;
    padding-left:6px;
}
.slider_images-wrap > img{ 
    display:inline-block;
    width:1000px;
     margin-left:-5px;
    vertical-align: bottom;
    line-height: 0;
      
}
#firstimg  {
    
margin:5px;
​
}
 
​
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers