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
  • …
 
<html>
<head>
<title>My slider</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<style>
#slider{
    width:800px;
    height:600px;
    overflow:hidden;
    position:relative;
}
.slider_element{
    width:0px;
    height:600px;
    position:absolute;
    overflow:hidden;
    z-index:0;
}
</style>
<script>
var curr = 0;
$(function() {
    $('.slider_element').eq(curr).css('width', 0).animate({'width': '100%'}, 2000, 'easeOutExpo');
    $('#next_element').click(function(){
        if(curr < $('.slider_element').length-1){
            curr = curr + 1;
            $('.slider_element').css('z-index', 0);
            $('.slider_element').eq(curr).css('width', 0).css('z-index', 1).animate({'width': '100%'}, 2000, 'easeOutExpo');
        }
    });
    $('#prev_element').click(function(){        
        if(curr > 0){
            $('.slider_element').css('z-index', 0);
            $('.slider_element').eq(curr).css('width', '100%').css('z-index', 1).animate({'width': '0%'}, 2000, 'easeOutExpo');
            curr = curr - 1;
        }
    });
});
</script>
</head>
<body>
    <div id="slider">
        <div class="slider_element"><img src="http://foto.lib.ru/img/s/shatalow_s_w/alb_0010/priroda05.jpg" /></div>
        <div class="slider_element"><img src="http://img-fotki.yandex.ru/get/3310/bonoooooo.3e/0_72e7_751c95a0_XL.jpg" /></div>
        <div class="slider_element"><img src="http://tomatoz.ru/uploads/posts/2012-02/1329317594_0_134a2_a09fb317_xl.jpg" /></div>
        <div class="slider_element"><img src="http://auto.weare1.info/images/BMW-Vision-EfficientDynamics-2x800x600.jpg" /></div>
        <div class="slider_element"><img src="http://lubovnitza.ru/upload/medialibrary/251/2517e5c279d247824b7a14fbe5c103c1.jpg" /></div>
    </div>
    <a href="#" id="prev_element">Prev</a>
    <a href="#" id="next_element">Next</a>
</body>
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers