CodePen

HTML

            
              <body>
    <div class="wrapper">
      <div class="column">
        Column 1
        <button id="btn1">Next</button>
      </div>
      <div class="column">
        Column 2
        <button id="btn2">Next</button>
      </div>
      <div class="column">
        Column 3
        <button id="btn3">Next</button>
      </div>
  </div>
</body>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              body {overflow-x:hidden;}

.wrapper {width:300%}

.column {float:left; width: 33.33333%; }
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $("#btn1").click(function() {
  $(".wrapper").css("margin-left","-100%");
});
$("#btn2").click(function() {
  $(".wrapper").css("margin-left","-200%");
});
$("#btn3").click(function() {
  $(".wrapper").css("margin-left","0%");
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................