Trying to make turn.js flipbook. interaction not working


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:

code snippet (full code actually)

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=""></script> -->
<!-- <script src=""></script> -->

And of course, the CSS for the flipbook

  #flipbook {
    margin: 20px auto;
    padding: 0;

  #flipbook .page {
    width: 100%;
    height: 100%;
    background-color: white;
    background-size: 100% 100%;