Vue

by ChangJoo Park

HTML

<div id="app">
  <div class="page-wrapper">
    <div class="page page-1"></div>
    <div class="page page-2"></div>
    <div class="page page-3"></div>
  </div>
  <div style="position: fixed; bottom: 0; width: 5rem; height: 2rem;">
    <button @click="active(0)"></button>
    <button @click="active(1)"></button>
    <button @click="active(2)"></button>
  </div>
</div>

CSS

html, body, #app, .page-wrapper {
  width: 100%;
  height: 100%;
}

.page-wrapper {
  display: flex;
  width: 100%;
  overflow: hidden;
}

.page {
  width: 100%;
  height: 100%;
  background-color:chartreuse;
  flex: 0 0 100%;
  box-sizing: border-box;
  border: 5px solid red;
}

.page-1 {
  background-color: red;
}

.page-2 {
  background-color: blue;
}

.page-3 {
  background-color: yellow;
}

Vue

new Vue({
  el: "#app"
})