Provide example

[solamichealolawale]

Hi, I came across this package and I am happy you did. Unfortunately, I am having issues implementing this package or getting it to work on my demo project, as no example or implementation have been given. Below is a sample of my code.

<template>
  <div id="flipbook">
    <fw-bookblock>
      <div class="hard">Turn.js</div>
      <div class="hard"></div>
      <div>Page 1</div>
      <div>Page 2</div>
      <div>Page 3</div>
      <div>Page 4</div>
      <div class="hard"></div>
      <div class="hard"></div>
    </fw-bookblock>
  </div>
</template>

<script>
import { FwBookblock } from "vue-turnjs";
// import { FwTurn } from "vue-turnjs";

export default {
  components: { FwBookblock }
};
</script>

<style scoped>
body {
  overflow: hidden;
}

#flipbook {
  width: 400px;
  height: 300px;
}

#flipbook .page {
  width: 400px;
  height: 300px;
  background-color: white;
  line-height: 300px;
  font-size: 20px;
  text-align: center;
}

#flipbook .page-wrapper {
  -webkit-perspective: 2000px;
  -moz-perspective: 2000px;
  -ms-perspective: 2000px;
  -o-perspective: 2000px;
  perspective: 2000px;
}

#flipbook .hard {
  background: #ccc !important;
  color: #333;
  -webkit-box-shadow: inset 0 0 5px #666;
  -moz-box-shadow: inset 0 0 5px #666;
  -o-box-shadow: inset 0 0 5px #666;
  -ms-box-shadow: inset 0 0 5px #666;
  box-shadow: inset 0 0 5px #666;
  font-weight: bold;
}

#flipbook .odd {
  background: -webkit-gradient(
    linear,
    right top,
    left top,
    color-stop(0.95, #fff),
    color-stop(1, #dadada)
  );
  background-image: -webkit-linear-gradient(right, #fff 95%, #c4c4c4 100%);
  background-image: -moz-linear-gradient(right, #fff 95%, #c4c4c4 100%);
  background-image: -ms-linear-gradient(right, #fff 95%, #c4c4c4 100%);
  background-image: -o-linear-gradient(right, #fff 95%, #c4c4c4 100%);
  background-image: linear-gradient(right, #fff 95%, #c4c4c4 100%);
  -webkit-box-shadow: inset 0 0 5px #666;
  -moz-box-shadow: inset 0 0 5px #666;
  -o-box-shadow: inset 0 0 5px #666;
  -ms-box-shadow: inset 0 0 5px #666;
  box-shadow: inset 0 0 5px #666;
}

#flipbook .even {
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(0.95, #fff),
    color-stop(1, #dadada)
  );
  background-image: -webkit-linear-gradient(left, #fff 95%, #dadada 100%);
  background-image: -moz-linear-gradient(left, #fff 95%, #dadada 100%);
  background-image: -ms-linear-gradient(left, #fff 95%, #dadada 100%);
  background-image: -o-linear-gradient(left, #fff 95%, #dadada 100%);
  background-image: linear-gradient(left, #fff 95%, #dadada 100%);
  -webkit-box-shadow: inset 0 0 5px #666;
  -moz-box-shadow: inset 0 0 5px #666;
  -o-box-shadow: inset 0 0 5px #666;
  -ms-box-shadow: inset 0 0 5px #666;
  box-shadow: inset 0 0 5px #666;
}
</style>

I need a clear example or detailed guide on how to go through this.

Thank you.

[Reidond]

Hi, you can check examples or storybook packages