Home Web Design CSS CSS 3D Cube Carousel With jQuery | HTML Cube Image Gallery Slider

CSS 3D Cube Carousel With jQuery | HTML Cube Image Gallery Slider

July 20, 2019

14611

Want to create a cubic image gallery using HTML, CSS, & jQuery. Solution: CSS 3D Cube Carousel With jQuery, HTML Cube Image Gallery.

Previously I have shared a 3D Image Gallery Using Pure CSS, But this a carousel with cubic effect. Basically, Cube is a three-dimensional element, also in this effect has a cube rotating function. The function is based on JavaScript‘s library jQuery.

Today you will learn to create an image carousel or slider with a cube. This is a simple carousel which slides with a flip effect that gives this a cube shape. The carousel has two buttons for next & previous element, these are functioned by jQuery. You can use this effect on your website or next project.

So, Today I am sharing CSS 3D Cube Carousel With jQuery. In other words, HTML Cube Image Gallery. Basically, This is a carousel but I am using as a kind of image slider. You can also use this a testimonial slider, & anything else as your requirement. This is a very simple tutorial & easy to understand Just need to know the basics of HTML, CSS, & JS.

If you are thinking now how this cube carousel actually is, then see the preview given below.

Preview Of HTML Cube Image Gallery Slider

See this video preview to getting an idea of how this cube slider looks like.

Now you can see this visually. If you like this, then get the source code of its.

CSS 3D Cube Carousel With jQuery Source Code

Before sharing source code, let’s talk about it. As you know I have used HTML, CSS, & jQuery to creating this design or function. I have used HTML data-* attribute to store custom data. For creating the structure, I have created a main div & another div inside the main div. For placing images create separate divs for every image.

These images randomly comes form Lorem Picsum. Basically, this is like lorem ipsum of Images I mean dummy images. All the effects are based on CSS transform property transform: rotate . jQuery part has a fewer line of codes because it has prebuilt functions. JS is attached to the next & previous buttons. As you can see the arrows on buttons are Unicode symbols.

There are many basic CSS properties, I can’t explain all in writing. Because they are the simple & basic thing, if you have knowledge of CSS then you will understand very easily. For creating this program you have to create 3 files. First for HTML, second for CSS, & third for JS or jQuery. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given here below.

<!DOCTYPE html>
<!--Code By Webdevtrick ( https://webdevtrick.com )-->
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>3D Image Cube Carousel | Webdevtrick.com</title>
  <link href="https://fonts.googleapis.com/css?family=Staatliches&display=swap" rel="stylesheet">
  <link href="style.css" rel="stylesheet">
</head>

<body>

<div class="container">
  <div class="carousel" data-slide="1">
    <div class="slides">
      <img src="https://picsum.photos/700/700?random=1" />
    </div>
    <div class="slides">
      <img src="https://picsum.photos/700/700?random=2" />
    </div>
    <div class="slides">
      <img src="https://picsum.photos/700/700?random=3" />
    </div>
    <div class="slides">
      <img src="https://picsum.photos/700/700?random=4" />
    </div>
  </div>
  <div class="next">NEXT &#8680;</div>
  <div class="prev">&#8678; PREV</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script  src="function.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>3D Image Cube Carousel | Webdevtrick.com</title>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

/** Code By Webdevtrick ( https://webdevtrick.com ) **/
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html, body {
  width: 100%;
  height: 100%;
}
body {
  margin-top: 200px;
  background: #333;
  font-family: 'Staatliches', cursive;
  font-size: 2em;
  line-height: 1.5;
}
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 5em;
  perspective: 100em;
}
.carousel {
  position: relative;
  width: 15em;
  height: 15em;
  margin: 0 auto;
  transform-style: preserve-3d;
  transition: transform 0.5s ease;
}
.carousel[data-slide="1"] {
  transform: rotateY(0deg);
}
.carousel[data-slide="2"] {
  transform: rotateY(-90deg);
}
.carousel[data-slide="3"] {
  transform: rotateY(-180deg);
}
.carousel[data-slide="4"] {
  transform: rotateY(-270deg);
}
.slides {
  position: absolute;
  width: 15em;
  height: 15em;
  background: white;
}
.slides img {
  width: 100%;
}
.back, .slides:nth-child(3) {
  transform: translateZ(-7.5em) rotateY(180deg);
}
.right, .slides:nth-child(2) {
  transform: rotateY(-270deg) translateX(7.5em);
  transform-origin: top right;
}
.left, .slides:nth-child(4) {
  transform: rotateY(270deg) translateX(-7.5em);
  transform-origin: center left;
}
.front, .slides:nth-child(1) {
  transform: translateZ(7.5em);
}
.next, .prev {
  position: absolute;
  top: 50%;
  right: 0;
  width: 6em;
  margin-top: -2.5em;
  border-radius: 3px;
  background: #212121;
  text-align: center;
  line-height: 3;
  letter-spacing: 5px;
  color: white;
  transform: translateY(-50%);
  cursor: pointer;
}
.prev:hover {
  background:  #e60023;
}
.prev {
  left: 0;
}
.next:hover {
  background:  #e60023;
}
.cf:before, .slides:before,
.cf:after,
.slides:after {
  content: " ";
  display: table;
}
.cf:after, .slides:after {
  clear: both;
}
.cf, .slides {
  *zoom: 1;
}

100

101

102

103

/** Code By Webdevtrick ( https://webdevtrick.com ) **/

*, *:before, *:after {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

html, body {

width: 100%;

height: 100%;

}

body {

margin-top: 200px;

background: #333;

font-family: 'Staatliches', cursive;

font-size: 2em;

line-height: 1.5;

}

.container {

width: 90%;

max-width: 1200px;

margin: 0 auto;

padding-bottom: 5em;

perspective: 100em;

}

.carousel {

position: relative;

width: 15em;

height: 15em;

margin: 0 auto;

transform-style: preserve-3d;

transition: transform 0.5s ease;

}

.carousel[data-slide="1"] {

transform: rotateY(0deg);

}

.carousel[data-slide="2"] {

transform: rotateY(-90deg);

}

.carousel[data-slide="3"] {

transform: rotateY(-180deg);

}

.carousel[data-slide="4"] {

transform: rotateY(-270deg);

}

.slides {

position: absolute;

width: 15em;

height: 15em;

background: white;

}

.slides img {

width: 100%;

}

.back, .slides:nth-child(3) {

transform: translateZ(-7.5em) rotateY(180deg);

}

.right, .slides:nth-child(2) {

transform: rotateY(-270deg) translateX(7.5em);

transform-origin: top right;

}

.left, .slides:nth-child(4) {

transform: rotateY(270deg) translateX(-7.5em);

transform-origin: center left;

}

.front, .slides:nth-child(1) {

transform: translateZ(7.5em);

}

.next, .prev {

position: absolute;

top: 50%;

right: 0;

width: 6em;

margin-top: -2.5em;

border-radius: 3px;

background: #212121;

text-align: center;

line-height: 3;

letter-spacing: 5px;

color: white;

transform: translateY(-50%);

cursor: pointer;

}

.prev:hover {

background: #e60023;

}

.prev {

left: 0;

}

.next:hover {

background: #e60023;

}

.cf:before, .slides:before,

.cf:after,

.slides:after {

content: " ";

display: table;

}

.cf:after, .slides:after {

clear: both;

}

.cf, .slides {

*zoom: 1;

}

function.js

Now create a JavaScript file named ‘function.js‘ and put the codes.

/** Code By Webdevtrick ( https://webdevtrick.com ) **/
var $carousel = $('.carousel'),
    currentSlide, nextSlide;

$('.next').click(function() {
  currentSlide = $carousel.attr('data-slide');
  nextSlide = +currentSlide === 4 ? 1 : +currentSlide + 1;
  $carousel.attr('data-slide', nextSlide);
});

$('.prev').click(function() {
  currentSlide = $carousel.attr('data-slide');
  nextSlide = +currentSlide === 1 ? 4 : +currentSlide - 1;
  $carousel.attr('data-slide', nextSlide);
});

/** Code By Webdevtrick ( https://webdevtrick.com ) **/

var $carousel = $('.carousel'),

currentSlide, nextSlide;

$('.next').click(function() {

currentSlide = $carousel.attr('data-slide');

nextSlide = +currentSlide === 4 ? 1 : +currentSlide + 1;

$carousel.attr('data-slide', nextSlide);

});

$('.prev').click(function() {

currentSlide = $carousel.attr('data-slide');

nextSlide = +currentSlide === 1 ? 4 : +currentSlide - 1;

$carousel.attr('data-slide', nextSlide);

});

That’s It. Now you have successfully created CSS 3D Cube Carousel With jQuery. In other words, HTML Cube Image Gallery Slider. If you have doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

5 COMMENTS

Chandan kumar raja July 21, 2019 At 1:23 pm

Sir, can you tell me how it rotates automatically.. After every 5 second in a progressive manner…

Reply
Lovelesh singh July 21, 2019 At 2:37 pm

Useful tutorial

Reply
Shailesh Dhagavkar August 5, 2019 At 12:35 pm

Sir why it is limited to 4 slides only..?
can it be extended to more than 4 like may be 10

Reply
fatimah November 5, 2019 At 5:36 am

hello, can I let the cube continue rotating on the left side? without return back to the first one?

Reply
kyeswa May 30, 2020 At 2:13 pm

but if i try to paste the code in the word press html code section it does give right results

Reply