Flipbook Slider using JavaScript

Flipbook Slider using JavaScript
Code Snippet:Flipbook Slider
Author: Nidhanshu Sharma
Published: January 17, 2024
Last Updated: January 22, 2024
Downloads: 8,411
License: MIT
Edit Code online: View on CodePen
Read More

This Vanilla JavaScript code snippet helps you to create a flipbook image slider. It comes with next and previous buttons to slide the images with a page flipping animation. You just need to add your images (as background) inside the back and front container then this code will automatically renders a realistic book style image slider.

How to Create Flipbook Slider using JavaScript

1. First of all, create a div element with a class name “right” and place two figure elements with class names “back” and “front” respectively. Place the background image URL inside the style attribute of both back and front containers.

Repeat the same method for next slides. You can add multiple pages according to your needs.

 <div class="book-section">
       <p>With ❤️ by <a href="https://github.com/nidhanshusharma" target="_blank">Nidhanshu Sharma</a></p>
        <div class="container">
           <div class="right">
                <figure class="back" id="back-cover"></figure>
                <figure class="front" style="background-image: url('https://source.unsplash.com/450x450/?girl');"></figure>
            </div>
            <div class="right">
                <figure class="back" style="background-image: url('https://source.unsplash.com/450x450/?cat');"></figure>
                <figure class="front" style="background-image: url('https://source.unsplash.com/450x450/?rose');"></figure>
            </div>
            <div class="right">
                <figure class="back" style="background-image: url('https://source.unsplash.com/450x450/?building');"></figure>
                <figure class="front" style="background-image: url('https://source.unsplash.com/450x450/?tech');"></figure>
            </div>
            <div class="right">
                <figure class="back" style="background-image: url('https://source.unsplash.com/450x450/?coding');"></figure>
                <figure class="front" style="background-image: url('https://source.unsplash.com/450x450/?girl');"></figure>
            </div>
            <div class="right">
                <figure class="back" style="background-image: url('https://source.unsplash.com/450x450/?laptop');"></figure>
                <figure class="front" style="background-image: url('https://source.unsplash.com/450x450/?mobile');"></figure>
            </div>
            <div class="right">
                <figure class="back" style="background-image: url('https://source.unsplash.com/450x450/?girl');"></figure>
                <figure class="front" id="cover">
                    <h1>Book Title</h1>
                    <p>CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts.</p>
                </figure>
            </div>
        </div>
        <button onclick="turnLeft()">Prev</button> <button onclick="turnRight()">Next</button>
        <br/>
    </div>

2. After that, add the following CSS styles for the flipbook slider into your project:

body{
    margin:0;
    background-color: #ffecc6;
}
*{
    box-sizing: border-box;
}
.book-section{
    height: 100vh;
    width: 100%;
    padding: 40px 0;
    text-align: center;
}
.book-section > .container{
    height: 400px;
    width: 500px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2%;
    margin-bottom: 30px;
    perspective: 1200px;
}
.container > .right{
    position: absolute;
    height: 100%;
    width: 50%;
    transition: 0.7s ease-in-out;
    transform-style: preserve-3d;
}
.book-section > .container > .right{
    right:0;
    transform-origin: left;
    border-radius: 10px 0 0 10px;
}
.right > figure.front, .right > figure.back{
    margin: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    left:0;
    top:0;
    background-size: 200%;
    background-repeat: no-repeat;
    backface-visibility: hidden;
    background-color: white;
    overflow: hidden;
}
.right > figure.front{
    background-position: right;
    border-radius: 0 10px 10px 0;
    box-shadow: 2px 2px 15px -2px rgba(0,0,0,0.2);
}
.right > figure.back{
    background-position: left;
    border-radius: 10px 0 0 10px;
    box-shadow: -2px 2px 15px -2px rgba(0,0,0,0.2);
    transform: rotateY(180deg);
}
.flip{
    transform: rotateY(-180deg);
}
.flip::before{
    content: "";
    position: absolute;
    top:0;
    left:0;
    z-index: 10;
    width: 100%;
    height: 100%;
    border-radius: 0 10px 10px 0;
    background-color: rgba(0,0,0,0.1);
}
.book-section > button{
    border: 2px solid #ef9f00;
    background-color: transparent;
    color: #ef9f00;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    margin: 10px;
    transition: 0.3s ease-in-out;
}
.book-section > button:focus, .book-section > button:active{
    outline: none;
}
.book-section > p{
    color: rgba(0,0,0,0.7);
    font-family: calibri;
    font-size: 24px;
        margin: 15px 0;
}
.book-section > p > a{
    text-decoration: none;
    color: #ef9f00;
}
.book-section > button:hover{
    background-color: #ef9f00;
    color: #fff;
}
.front#cover, .back#back-cover{
    background-color: #ffcb63;
    font-family: calibri;
    text-align: left;
    padding: 0 30px;
}
.front#cover h1{
    color: #fff;
}
.front#cover p{
    color: rgba(0,0,0,0.8);
    font-size: 14px;

}

3. Finally, add the following JavaScript code to activate the flipbook image slider.

var right = document.getElementsByClassName("right");
    var si = right.length;
    var z=1;
    turnRight();
    function turnRight()
    {
        if(si>=1){
            si--;
        }
        else{
            si=right.length-1;
            function sttmot(i){
                setTimeout(function(){right[i].style.zIndex="auto";},300);
            }
            for(var i=0;i<right.length;i++){
                right[i].className="right";
                sttmot(i);
                z=1;
            }
        }
        right[si].classList.add("flip");
        z++;
        right[si].style.zIndex=z;
    }
    function turnLeft()
    {
        if(si<right.length){
            si++;
        }
        else{
            si=1;
            for(var i=right.length-1;i>0;i--){
                right[i].classList.add("flip");
                right[i].style.zIndex=right.length+1-i;
            }
        }
        right[si-1].className="right";
        setTimeout(function(){right[si-1].style.zIndex="auto";},350);
    }

That’s all! hopefully, you have successfully created a flipbook slider. If you have any questions or facing any issues, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...