Demo for 3D Cubic Slider Code

Preview

Source Code

                            <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->


<style>
body {
  background: #000;
  font-family: "Helvetica";
}
.slides {
  -webkit-perspective: 800;
  -moz-perspective: 800px;
  -ms-perspective: 800;
  perspective: 800;
  -webkit-perspective-origin: 50% 100px;
  -moz-perspective-origin: 50% 100px;
  -ms-perspective-origin: 50% 100px;
  perspective-origin: 50% 100px;
  margin: 100px auto 20px auto;
  width: 450px;
  height: 400px;
}
.slides .slides__spinner {
  position: relative;
  margin: 0 auto;
  height: 281px;
  width: 450px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 50% 100px 0;
  -moz-transform-origin: 50% 100px 0;
  -ms-transform-origin: 50% 100px 0;
  transform-origin: 50% 100px 0;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
.slides .slide {
  position: absolute;
  height: 281px;
  width: 450px;
  padding: 0px;
}
.slides .slide img {
  height: 281px;
  width: 450px;
}
.slides__spinner .one {
  -webkit-transform: translateZ(225px);
  -moz-transform: translateZ(225px);
  -ms-transform: translateZ(225px);
  transform: translateZ(225px);
}
.slides__spinner .two {
  -webkit-transform: rotateY(90deg) translateZ(225px);
  -moz-transform: rotateY(90deg) translateZ(225px);
  -ms-transform: rotateY(90deg) translateZ(225px);
  transform: rotateY(90deg) translateZ(225px);
}
.slides__spinner .three {
  -webkit-transform: rotateY(180deg) translateZ(225px);
  -moz-transform: rotateY(180deg) translateZ(225px);
  -ms-transform: rotateY(180deg) translateZ(225px);
  transform: rotateY(180deg) translateZ(225px);
}
.slides__spinner .four {
  -webkit-transform: rotateY(-90deg) translateZ(225px);
  -moz-transform: rotateY(-90deg) translateZ(225px);
  -ms-transform: rotateY(-90deg) translateZ(225px);
  transform: rotateY(-90deg) translateZ(225px);
}
.slide-selector {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  position: relative;
  top: -62px;
}
.slide-selector li {
  margin: 0;
  padding: 0 2px 0 0;
  display: inline-block;
  cursor: pointer;
  color: #fff;
  text-transform: uppercase;
}
.slide-selector li:last-child {
  padding-right: 0;
}
.slide-selector li img {
  width: 152px;
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}
.slide-selector li.selected img {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}
</style>

</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<div class="slides">
  <div class="slides__spinner" style="transform: rotateY(0deg);">
    <div class="slide one">
      <img src="https://picsum.photos/id/232/500/500">
    </div>
    <div class="slide two">
      <img src="https://picsum.photos/id/233/500/500">
    </div>
    <div class="slide three">
      <img src="https://picsum.photos/id/234/500/500">
    </div>
    <div class="slide four">
      <img src="https://picsum.photos/id/235/500/500">
    </div>
  </div>
</div>
<ul class="slide-selector">
  <li class="selected"><img src="https://picsum.photos//id/232/500/500"></li>
  <li class=""><img src="https://picsum.photos//id/233/500/500"></li>
  <li><img src="https://picsum.photos/id/234/500/500"></li>
  <li><img src="https://picsum.photos/id/235/500/500"></li>
</ul><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
<script>
$(document).ready(function() {
  $(".slide-selector").on('click', 'li', function() {
    $(".slides__spinner").css("transform","rotateY("+($(this).index() * -90)+"deg)");
    $(".slide-selector li").removeClass("selected");
    $(this).addClass("selected");
  });
});
</script>

</body>
<script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'},{'ap':'cpbh-mt'},{'server':'p3plmcpnl484880'},{'dcenter':'p3'},{'cp_id':'765442'},{'cp_cl':'8'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/traffic-assets/js/tccl.min.js'></script></html>

Other Codes

Users Comments Slider with Bootstrap

In this code, a number of comments from website users who have used our products are displayed, and we have done this with the help of slides.

Bootstrap Products Slider

This code contains a slider for the products sold on the website. Each slider includes a photo and a title.

Responsive Image Slider with Thumbnails . . .

Each slide in this post has a small thumbnail at the bottom of the page that when the slide is selected, the thumbnail will also be colored. Each slide . . .

Vertical Image Gallery Code with Preview . . .

In this code, the slides smell vertically and by placing a cursor on each of the small photos, the photo is displayed in large size.