Skip to content

Instantly share code, notes, and snippets.

@ynonp

ynonp/slider.html

Created September 9, 2012 10:44
Show Gist options
  • Save ynonp/3683730 to your computer and use it in GitHub Desktop.
Save ynonp/3683730 to your computer and use it in GitHub Desktop.
Download ZIP
Slider
Raw
slider.html
<!DOCTYPE html>
<html>
<head>
<title>Transitions Demo</title>
<style>
body { overflow:hidden; border:0; margin:0;}
#container {
width:200%;
}
.page {
float:left;
width:50%;
height:300px;
-webkit-transition:all 2s linear;
}
.page1 {
background: blue;
}
.page2 {
background: orange;
}
.left {
-webkit-transform: translate(-100%,0);
}
</style>
</head>
<body>
<div id="container">
<div class="page page1">
<button id="btn-next">next</button>
</div>
<div class="page page2">
<button id="btn-prev">prev</button>
</div>
</div>
<script>
var next = document.querySelector('#btn-next');
var prev = document.querySelector('#btn-prev');
next.addEventListener('click', function() {
document.querySelector('.page1').
setAttribute('class', 'page1 page left');
document.querySelector('.page2').
setAttribute('class', 'page2 page left');
});
prev.addEventListener('click', function() {
document.querySelector('.page1').
setAttribute('class', 'page page1');
document.querySelector('.page2').
setAttribute('class', 'page page2');
});
</script>
</body>
</html>
@LandRover
Copy link

<title>Transitions Demo</title> 
<style>
    body { overflow:hidden; }
    #container {
        width:200%;
        position: absolute;
        left: 0;
        top: 0;
    }

    .page {
        width:50%;
        height:300px;
        float:left;
    }
    .page1 {
        background: blue;
    }

    .page2 {
        background: orange;
    }


    .next {
        -webkit-transition: all 2s;
        left: -100% !important;
    }

    .prev {
        -webkit-transition: all 2s;
        left: 0 !important;
    }
</style>
next
prev 
<script>
    function next() {
        document.querySelector('#container').setAttribute('class', 'next');
    }

    function prev() {
        document.querySelector('#container').setAttribute('class', 'prev');
    }


</script>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment