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.
Similar Code Snippets:
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.