3D Cube Image Slider using HTML, CSS & JavaScript
In this article we are going to create an 3D Cube Image Slider using HTML, CSS & JS. This will be an easy way to display some images or a profile card of the employee. This project is for intermediates because later you will see that we will be linking some external frameworks of JavaScript. The CSS code is a bit lengthy cause there we have taken each cube and its content and aligned them so that it doesn’t look messy.
Hello Coders!! Welcome back to Codewithrandom with this fresh and new blog in which we are going to learn how to make 3D Cube Image Slider using HTML, CSS & JS. I hope you have got an idea about this project.
HTML Code for 3D Cube Image Slider
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<link rel="stylesheet" href="css/style5.css">
<title>Our Members</title>
</head>
<body>
<section>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="box">
<div class="details">
<div class="imgbox">
<img src="https://www.dropbox.com/s/0pm3v2q6cg7kbqa/user%281%29.jpg?dl=0" alt="" class="img">
</div>
<h3>A. A. Einstein<br><span>Creative UX Designer</span></h3>
</div>
<div class="info">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo adipisci reprehenderit veritatis voluptatum libero commodi repellendus, enim sed nihil. Ut, dolore quas quasi enim nesciunt excepturi velit tempore illum quidem.
</div>
</div>
</div>
<div class="swiper-slide">
<div class="box">
<div class="details">
<div class="imgbox">
<img src="https://www.dropbox.com/s/123rxu77pxhp1ju/user%283%29.jpg?dl=0" alt="" class="img">
</div>
<h3>N. H. Bohr<br><span>Web Devloper</span></h3>
</div>
<div class="info">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo adipisci reprehenderit veritatis voluptatum libero commodi repellendus, enim sed nihil. Ut, dolore quas quasi enim nesciunt excepturi velit tempore illum quidem.
</div>
</div>
</div>
<div class="swiper-slide">
<div class="box">
<div class="details">
<div class="imgbox">
<img src="https://www.dropbox.com/s/8cj7tu5rgno31yn/user%282%29.jpg?dl=0" alt="" class="img">
</div>
<h3>S. I. Newton <br><span>Creative UI Designer</span></h3>
</div>
<div class="info">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo adipisci reprehenderit veritatis voluptatum libero commodi repellendus, enim sed nihil. Ut, dolore quas quasi enim nesciunt excepturi velit tempore illum quidem.
</div>
</div>
</div>
<div class="swiper-slide">
<div class="box">
<div class="details">
<div class="imgbox">
<img src="https://www.dropbox.com/s/8cj7tu5rgno31yn/user%282%29.jpg?dl=0" alt="" class="img">
</div>
<h3>S. I. Newton <br><span>Creative UI Designer</span></h3>
</div>
<div class="info">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo adipisci reprehenderit veritatis voluptatum libero commodi repellendus, enim sed nihil. Ut, dolore quas quasi enim nesciunt excepturi velit tempore illum quidem.
</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</section>
</body>
</html>In this HTML code we have defined the structure in which we have create a swipe container and defined a content in it. We have created 5 container in it and there we have added some paragraphs. And in the last we have added an pagination under div tag it will basically act as an effect while moving the cubes.
5+ HTML CSS Projects With Source Code
Css Code for 3D Cube Image Slider
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html{
font-size: 64.5%;
}
section{
position: relative;
width: 100vw;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: space-around;
background: red;
}
.swiper-container {
position: relative;
width: 38rem;
height: auto;
}
.swiper-wrapper{
position: relative;
width: 38rem;
height: auto;
}
.swiper-slide{
position: relative;
width: 38rem;
height: auto;
}
.box{
position: relative;
width: 38rem;
height: auto;
background-color: #FFF;
padding: 4rem;
padding-top: 90px;
}
.details{
display: flex;
align-items: center;
}
.details .imgbox{
width: 10rem;
height: 10rem;
display: flex;
align-items: center;
justify-content: center;
margin-right: 1rem;
}
.imgbox img{
object-fit: cover;
overflow: hidden;
border-radius: 50%;
cursor: pointer;
}
.details h3{
font-size: 1.7rem;
color: #00FF84;
font-weight: 600;
letter-spacing: 0.1rem;
line-height: 1.7rem;
}
.details h3 span{
margin-top: 1rem;
color: #999;
font-weight: 500;
font-size: 1.5rem;
}
.info{
font-size: 1.6rem;
color: #999;
padding: 2rem;
}
@media (max-width: 392px) {
html{
font-size: 44%;
}
}
@media (max-width: 269px) {
html{
font-size: 35%;
}
}In this CSS code we have styled all the tags and the ids which were present in the HTML Code basically the content which defined we have gave the alignment to defined content and basically padded and set the position for the cube so that every thing stays inside in it. And the content doesn’t mix up and get messy. Let us see the final output of the project.
JavaScript Code for 3D Cube Image Slider
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container',
{ effect: 'cube', grabCursor: true, cubeEffect: { shadow: true, slideShadows: true, shadowOffset: 20, shadowScale: 0.94, }, loop: true,
autoplay: { delay: 2000, }, pagination: { el: '.swiper-pagination', }, });
</script>In this JS code we have linked an external JavaScript Framework and then coded for the container like when it should be delayed while moving what will be the shadow. For rotating loop must be true then only it will rotate. Let us see the final output of the code.
Password Strength Calculator Using HTML, CSS, And JAVASCRIPT
Final Output 3D Cube Image Slider using HTML, CSS & JavaScript
We have Successfully created our 3D Cube Image Slider using HTML, CSS & JavaScript. You can use this project for your personal needs and the respective lines of code are given with the code pen link mentioned above.
If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.
Written By – Harsh Sawant
Code By – @harshh9
