Trying to make turn.js flipbook. interaction not working

Code Help HTML/CSS/JS
1

Question:

I’ve included the links to the repositories. I even uloaded the src files. Any idea why the flip funtionality isnt working?

Additionally, any ideas on how to resize the image would be helpful. going to play with css to bring it down for now.

Repl link:

https://replit.com/@TeeKundu/PureMoralSpool#index.html

code snippet (full code actually)
2

You are including jQuery from a local source and once from a CDN, you have to choose one.
You either use local or CDN (this goes inside the head tag):

<!-- Local -->
<script src="jquery-3.6.0.min.js"></script>
<script src="turn.min.js"></script>

<!-- OR CDN -->
<!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/turn.js/3/turn.min.js"></script> -->

And of course, the CSS for the flipbook

<style>
  #flipbook {
    margin: 20px auto;
    padding: 0;
  }

  #flipbook .page {
    width: 100%;
    height: 100%;
    background-color: white;
    background-size: 100% 100%;
  }
</style>
2 Likes