TurnJS and bootstrap section

Question

I am trying to add a section to my bootstrap web application that will use turnjs flip-book. My HTML code:

  <!-- TurnJS -->
<section id="turnJS" class="turnJS">
    <div id="flipbook">
        <div class="hard"> My Turn </div>
        <div class="hard"></div>
                            <div style="background-image:url(pages/01.jpg);"></div>
                            <div style="background-image:url(pages/02.jpg);"></div>
                            <div style="background-image:url(pages/03.jpg);"></div>
                            <div style="background-image:url(pages/04.jpg);"></div>
                            <div style="background-image:url(pages/05.jpg);"></div>
                            <div style="background-image:url(pages/06.jpg);"></div>
                            <div class="hard"></div>
                            <div class="hard"></div>
                        </div>
</section>

My JS code:

$("#flipbook").turn({
width: 400,
height: 300,
autoCenter: true

});

Any one has a working sample?

Answer 1

what is your problem? Dont know what is your problem... Could you explain your self a little better so the community can help you? If you are trying to add turnjs to your site you just need to add the div flipbook into a div or section with class container or row and that's it!

Here is an example:

<section id="turnJS" class="turnJS container"> <div class="row"> <div id="flipbook"> <div class="hard"> My Turn </div> <div class="hard"></div> <div style="background-image:url(pages/01.jpg);"></div> <div style="background-image:url(pages/02.jpg);"></div> <div style="background-image:url(pages/03.jpg);"></div> <div style="background-image:url(pages/04.jpg);"></div> <div style="background-image:url(pages/05.jpg);"></div> <div style="background-image:url(pages/06.jpg);"></div> <div class="hard"></div> <div class="hard"></div> </div> </div> </section>