Content Slider With Cube Effect

by
Content Slider With Cube Effect
Code Snippet:A Cubey Slider (webkit)
Author: Eric Brewer
Published: January 18, 2024
Last Updated: January 22, 2024
Downloads: 664
License: MIT
Edit Code online: View on CodePen
Read More
 Demo
Download (8 KB)

This code creates a visually appealing content slider with cube transitions. The CSS defines the slider’s layout and styling, while the JavaScript enables interactive navigation. Clicking on the navigation buttons smoothly rotates the slider cubes. Helpful for showcasing content dynamically and engagingly on your website.

You can use this code to build an engaging image or content slider for your website’s homepage. It’s perfect for showcasing featured products or important information in a visually appealing way. One major benefit is that it adds an interactive element, grabbing visitors’ attention and encouraging them to explore your content further.

How to Create Content Slider With Cube Effect

1. First of all, load the Font Awesome CSS by adding the following CDN link into the head tag of your HTML document.

<link rel='stylesheet' href='https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'>

2. Create necessary elements like the wrapper, slider-outer, and navigation.

  <div class="clearfix" id="wrapper">
    <div class="slider-outer">
      <div class="slider-inner">
        <div class="slide front active" data-slide="1">
          <div class="slide-title">Slide 1<i class="fa fa-html5"></i></div>
        </div>
        <div class="slide top" data-slide="2">
          <div class="slide-title">Slide 2<i class="fa fa-css3"></i></div>
        </div>
        <div class="slide back" data-slide="3">
          <div class="slide-title">Slide 3<i class="fa fa-android"></i></div>
        </div>
        <div class="slide bottom" data-slide="4">
          <div class="slide-title">Slide 4<i class="fa fa-mobile-phone"></i></div>
        </div>
      </div>
    </div>
    <nav class="clearfix" id="nav">
      <ul class="clearfix">
        <li><a class="btn focus" href="href" data-slide="1">1</a></li>
        <li><a class="btn" href="href" data-slide="2">2</a></li>
        <li><a class="btn" href="href" data-slide="3">3</a></li>
        <li><a class="btn" href="href" data-slide="4">4</a></li>
      </ul>
    </nav>
  </div>

3. Copy the following CSS code into your stylesheet. This code sets the layout and styling for the slider, ensuring a sleek appearance. Make sure to retain the structure to preserve the intended design.

@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700);

.clearfix {
  zoom: 1;
}
.clearfix:before, .clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box !important;
}

body {
  background: #1d1d1f;
  font-family: "lato", helvetica, arial, sans-serif;
  color: white;
}

#wrapper {
  display: block;
  width: 90%;
  margin: 50px auto;
}

.slider-outer {
  display: block;
  width: 100%;
  height: 250px;
  position: relative;
  -webkit-perspective: 1600px;
  -moz-perspective: 1600px;
  -o-perspective: 1600px;
  -ms-perspective: 1600px;
}
.slider-outer .slider-inner {
  display: block;
  width: 100%;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  -webkit-transform-origin: 50% 100%;
  -moz-transform-origin: 50% 100%;
  -o-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
}
.slider-outer .slider-inner.rotate.two {
  -webkit-transform: rotateX(-90deg) translateZ(250px);
  -moz-transform: rotateX(-90deg) translateZ(250px);
  -o-transform: rotateX(-90deg) translateZ(250px);
  -ms-transform: rotateX(-90deg) translateZ(250px);
}
.slider-outer .slider-inner.rotate.three {
  -webkit-transform: rotateX(-180deg) translateY(-250px) translateZ(250px);
  -moz-transform: rotateX(-180deg) translateY(-250px) translateZ(250px);
  -o-transform: rotateX(-180deg) translateY(-250px) translateZ(250px);
  -ms-transform: rotateX(-180deg) translateY(-250px) translateZ(250px);
}
.slider-outer .slider-inner.rotate.four {
  -webkit-transform: rotateX(-270deg) translateY(-250px);
  -moz-transform: rotateX(-270deg) translateY(-250px);
  -o-transform: rotateX(-270deg) translateY(-250px);
  -ms-transform: rotateX(-270deg) translateY(-250px);
}
.slider-outer .slide {
  display: block;
  width: 100%;
  height: 250px;
  position: absolute;
  background: white;
  background-color: #ededed;
  background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(#ededed));
  background-image: -webkit-linear-gradient(top, white, #ededed);
  background-image: -moz-linear-gradient(top, white, #ededed);
  background-image: -o-linear-gradient(top, white, #ededed);
  background-image: linear-gradient(to bottom, white, #ededed);
  padding: 27px;
  color: #4ECDC4;
  overflow: hidden;
  -webkit-transform-origin: 0% 0%;
  -moz-transform-origin: 0% 0%;
  -o-transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
}
.slider-outer .slide .slide-title {
  display: block;
  position: relative;
  font-size: 70px;
  font-weight: 100;
  z-index: 12;
}
.slider-outer .slide i {
  display: block;
  position: absolute;
  top: 10px;
  right: -10px;
  font-size: 300px;
  color: #C7F464;
  z-index: 11;
  text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1);
}
.slider-outer .slide.top {
  background: #556270;
  background-color: #46505c;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#556270), to(#46505c));
  background-image: -webkit-linear-gradient(top, #556270, #46505c);
  background-image: -moz-linear-gradient(top, #556270, #46505c);
  background-image: -o-linear-gradient(top, #556270, #46505c);
  background-image: linear-gradient(to bottom, #556270, #46505c);
  -webkit-transform: rotateX(90deg) translateY(-250px);
  -moz-transform: rotateX(90deg) translateY(-250px);
  -o-transform: rotateX(90deg) translateY(-250px);
  -ms-transform: rotateX(90deg) translateY(-250px);
}
.slider-outer .slide.back {
  background: #FF6B6B;
  color: white;
  background-color: #ff4747;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#FF6B6B), to(#ff4747));
  background-image: -webkit-linear-gradient(top, #FF6B6B, #ff4747);
  background-image: -moz-linear-gradient(top, #FF6B6B, #ff4747);
  background-image: -o-linear-gradient(top, #FF6B6B, #ff4747);
  background-image: linear-gradient(to bottom, #FF6B6B, #ff4747);
  -webkit-transform: rotateX(180deg) translateY(-250px) translateZ(250px);
  -moz-transform: rotateX(180deg) translateY(-250px) translateZ(250px);
  -o-transform: rotateX(180deg) translateY(-250px) translateZ(250px);
  -ms-transform: rotateX(180deg) translateY(-250px) translateZ(250px);
}
.slider-outer .slide.bottom {
  background: #4ECDC4;
  background-color: #36c1b7;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#4ECDC4), to(#36c1b7));
  background-image: -webkit-linear-gradient(top, #4ECDC4, #36c1b7);
  background-image: -moz-linear-gradient(top, #4ECDC4, #36c1b7);
  background-image: -o-linear-gradient(top, #4ECDC4, #36c1b7);
  background-image: linear-gradient(to bottom, #4ECDC4, #36c1b7);
  color: white;
  -webkit-transform: rotateX(-90deg) translateZ(250px);
  -moz-transform: rotateX(-90deg) translateZ(250px);
  -o-transform: rotateX(-90deg) translateZ(250px);
  -ms-transform: rotateX(-90deg) translateZ(250px);
}

#nav {
  display: block;
  position: relative;
  width: 100%;
  margin-top: 27px;
  z-index: 10;
}
#nav ul {
  display: block;
  padding: 0;
  margin: 0 0 0;
  list-style: none;
  width: 190px;
  margin: 0 auto;
  text-align: left;
}
#nav ul li {
  display: block;
  float: left;
  margin-right: 10px;
  font-size: 18px;
}
#nav ul li:nth-of-type(4) {
  margin-right: 0;
}
#nav ul li a.btn {
  display: block;
  width: 40px;
  height: 40px;
  color: white;
  border: 3px solid white;
  border-radius: 30px;
  font-weight: 300;
  line-height: 35px;
  text-align: center;
  text-decoration: none;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
}
#nav ul li a.btn:focus, #nav ul li a.btn:hover {
  color: #FF6B6B;
  border-color: #FF6B6B;
}
#nav ul li a.btn:active {
  color: #C44D58;
  border-color: #C44D58;
}
#nav ul li a.btn.focus {
  color: #C7F464;
  border-color: #C7F464;
}

4. Now, load the jQuery JavaScript library by adding the following script before closing the body tag:

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

5. Finally, integrate the JavaScript code into your project. This code handles the slider’s functionality, enabling smooth rotations based on user interactions.

(function() {
  var rotateSlider;

  $(function() {
    $('#nav').on('click', 'a', function(e) {
      var active, theSlide;
      e = e != null ? e : {
        e: window.event
      };
      e.preventDefault();
      e.stopPropagation();
      if ($('#nav').hasClass('active')) {
        return false;
      }
      $('.focus').removeClass('focus');
      $(this).addClass('focus');
      $('#nav').addClass('active');
      theSlide = $(this).attr('data-slide');
      active = $('.active').attr('data-slide');
      $('.slide').removeClass('active');
      return rotateSlider(theSlide, active);
    });
    
    //DEMO  
    setTimeout(function() {
      return $('#nav a[data-slide="2"]').trigger('click');
    }, 500);
    setTimeout(function() {
      return $('#nav a[data-slide="3"]').trigger('click');
    }, 1200);
    return setTimeout(function() {
      return $('#nav a[data-slide="4"]').trigger('click');
    }, 1900);
  });

  rotateSlider = function(slide, active) {
    /*
    TODO -
    detect current slide position and calculate no. slides to 
    target.  Ease through those slides to avoid CSS3 
    transition wonkiness.
    */
    var delta, slides, theSlide;
    slides = {
      1: 'one',
      2: 'two',
      3: 'three',
      4: 'four'
    };
    theSlide = slides[slide];
    delta = Math.abs(slide - active);
    if (delta === 3 && active === '1') {
      $('.slide[data-slide="' + slide + '"]').addClass('active');
      $('.slider-inner').attr('class', 'slider-inner rotate two');
      setTimeout(function() {
        return $('.slider-inner').attr('class', 'slider-inner rotate three');
      }, 400);
      setTimeout(function() {
        return $('.slider-inner').attr('class', 'slider-inner rotate four');
      }, 800);
    } else if (delta === 3 && active === '4') {
      $('.slide[data-slide="' + slide + '"]').addClass('active');
      $('.slider-inner').attr('class', 'slider-inner rotate three');
      setTimeout(function() {
        return $('.slider-inner').attr('class', 'slider-inner rotate two');
      }, 350);
      setTimeout(function() {
        return $('.slider-inner').attr('class', 'slider-inner rotate one');
      }, 700);
    } else {
      $('.slide[data-slide="' + slide + '"]').addClass('active');
      $('.slider-inner').attr('class', 'slider-inner rotate ' + theSlide);
    }
    return $('#nav').removeClass('active');
  };

}).call(this);

//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiPGFub255bW91cz4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7QUFBQSxNQUFBOztFQUFBLENBQUEsQ0FBRSxRQUFBLENBQUEsQ0FBQTtJQUNBLENBQUEsQ0FBRSxNQUFGLENBQVMsQ0FBQyxFQUFWLENBQWEsT0FBYixFQUFzQixHQUF0QixFQUEyQixRQUFBLENBQUMsQ0FBRCxDQUFBO0FBQzdCLFVBQUEsTUFBQSxFQUFBO01BQUksQ0FBQSxlQUFJLElBQUk7UUFBQSxDQUFBLEVBQUksTUFBTSxDQUFDO01BQVg7TUFDUixDQUFDLENBQUMsY0FBRixDQUFBO01BQ0EsQ0FBQyxDQUFDLGVBQUYsQ0FBQTtNQUNBLElBQUksQ0FBQSxDQUFFLE1BQUYsQ0FBUyxDQUFDLFFBQVYsQ0FBbUIsUUFBbkIsQ0FBSjtBQUNFLGVBQU8sTUFEVDs7TUFFQSxDQUFBLENBQUUsUUFBRixDQUFXLENBQUMsV0FBWixDQUF3QixPQUF4QjtNQUNBLENBQUEsQ0FBRSxJQUFGLENBQU8sQ0FBQyxRQUFSLENBQWlCLE9BQWpCO01BQ0EsQ0FBQSxDQUFFLE1BQUYsQ0FBUyxDQUFDLFFBQVYsQ0FBbUIsUUFBbkI7TUFDQSxRQUFBLEdBQVcsQ0FBQSxDQUFFLElBQUYsQ0FBTyxDQUFDLElBQVIsQ0FBYSxZQUFiO01BQ1gsTUFBQSxHQUFTLENBQUEsQ0FBRSxTQUFGLENBQVksQ0FBQyxJQUFiLENBQWtCLFlBQWxCO01BQ1QsQ0FBQSxDQUFFLFFBQUYsQ0FBVyxDQUFDLFdBQVosQ0FBd0IsUUFBeEI7YUFDQSxZQUFBLENBQWEsUUFBYixFQUF1QixNQUF2QjtJQVp5QixDQUEzQixFQUFGOzs7SUFlRSxVQUFBLENBQVcsUUFBQSxDQUFBLENBQUE7YUFDVCxDQUFBLENBQUUsd0JBQUYsQ0FBMkIsQ0FBQyxPQUE1QixDQUFvQyxPQUFwQztJQURTLENBQVgsRUFFRSxHQUZGO0lBSUEsVUFBQSxDQUFXLFFBQUEsQ0FBQSxDQUFBO2FBQ1QsQ0FBQSxDQUFFLHdCQUFGLENBQTJCLENBQUMsT0FBNUIsQ0FBb0MsT0FBcEM7SUFEUyxDQUFYLEVBRUUsSUFGRjtXQUlBLFVBQUEsQ0FBVyxRQUFBLENBQUEsQ0FBQTthQUNULENBQUEsQ0FBRSx3QkFBRixDQUEyQixDQUFDLE9BQTVCLENBQW9DLE9BQXBDO0lBRFMsQ0FBWCxFQUVFLElBRkY7RUF4QkEsQ0FBRjs7RUE0QkEsWUFBQSxHQUFlLFFBQUEsQ0FBQyxLQUFELEVBQVEsTUFBUixDQUFBLEVBQUE7Ozs7Ozs7QUFDZixRQUFBLEtBQUEsRUFBQSxNQUFBLEVBQUE7SUFBRSxNQUFBLEdBQ0U7TUFBQSxDQUFBLEVBQUcsS0FBSDtNQUNBLENBQUEsRUFBRyxLQURIO01BRUEsQ0FBQSxFQUFHLE9BRkg7TUFHQSxDQUFBLEVBQUc7SUFISDtJQVdGLFFBQUEsR0FBVyxNQUFNLENBQUMsS0FBRDtJQUNqQixLQUFBLEdBQVEsSUFBSSxDQUFDLEdBQUwsQ0FBUyxLQUFBLEdBQVEsTUFBakI7SUFFUixJQUFHLEtBQUEsS0FBUyxDQUFULElBQWUsTUFBQSxLQUFVLEdBQTVCO01BRUUsQ0FBQSxDQUFFLHFCQUFBLEdBQXNCLEtBQXRCLEdBQTRCLElBQTlCLENBQW1DLENBQUMsUUFBcEMsQ0FBNkMsUUFBN0M7TUFDQSxDQUFBLENBQUUsZUFBRixDQUFrQixDQUFDLElBQW5CLENBQXdCLE9BQXhCLEVBQWlDLHlCQUFqQztNQUNBLFVBQUEsQ0FBVyxRQUFBLENBQUEsQ0FBQTtlQUNULENBQUEsQ0FBRSxlQUFGLENBQWtCLENBQUMsSUFBbkIsQ0FBd0IsT0FBeEIsRUFBaUMsMkJBQWpDO01BRFMsQ0FBWCxFQUVFLEdBRkY7TUFHQSxVQUFBLENBQVcsUUFBQSxDQUFBLENBQUE7ZUFDVCxDQUFBLENBQUUsZUFBRixDQUFrQixDQUFDLElBQW5CLENBQXdCLE9BQXhCLEVBQWlDLDBCQUFqQztNQURTLENBQVgsRUFFRSxHQUZGLEVBUEY7S0FBQSxNQVdLLElBQUcsS0FBQSxLQUFTLENBQVQsSUFBZSxNQUFBLEtBQVUsR0FBNUI7TUFFSCxDQUFBLENBQUUscUJBQUEsR0FBc0IsS0FBdEIsR0FBNEIsSUFBOUIsQ0FBbUMsQ0FBQyxRQUFwQyxDQUE2QyxRQUE3QztNQUNBLENBQUEsQ0FBRSxlQUFGLENBQWtCLENBQUMsSUFBbkIsQ0FBd0IsT0FBeEIsRUFBaUMsMkJBQWpDO01BQ0EsVUFBQSxDQUFXLFFBQUEsQ0FBQSxDQUFBO2VBQ1QsQ0FBQSxDQUFFLGVBQUYsQ0FBa0IsQ0FBQyxJQUFuQixDQUF3QixPQUF4QixFQUFpQyx5QkFBakM7TUFEUyxDQUFYLEVBRUUsR0FGRjtNQUdBLFVBQUEsQ0FBVyxRQUFBLENBQUEsQ0FBQTtlQUNULENBQUEsQ0FBRSxlQUFGLENBQWtCLENBQUMsSUFBbkIsQ0FBd0IsT0FBeEIsRUFBaUMseUJBQWpDO01BRFMsQ0FBWCxFQUVFLEdBRkYsRUFQRztLQUFBLE1BQUE7TUFhSCxDQUFBLENBQUUscUJBQUEsR0FBc0IsS0FBdEIsR0FBNEIsSUFBOUIsQ0FBbUMsQ0FBQyxRQUFwQyxDQUE2QyxRQUE3QztNQUNBLENBQUEsQ0FBRSxlQUFGLENBQWtCLENBQUMsSUFBbkIsQ0FBd0IsT0FBeEIsRUFBaUMsc0JBQUEsR0FBdUIsUUFBeEQsRUFkRzs7V0FpQkwsQ0FBQSxDQUFFLE1BQUYsQ0FBUyxDQUFDLFdBQVYsQ0FBc0IsUUFBdEI7RUE1Q2E7QUE1QmYiLCJzb3VyY2VzQ29udGVudCI6WyIkIC0+XG4gICQoJyNuYXYnKS5vbiAnY2xpY2snLCAnYScsIChlKSAtPlxuICAgIGUgPSBlID8gZSA6IHdpbmRvdy5ldmVudFxuICAgIGUucHJldmVudERlZmF1bHQoKVxuICAgIGUuc3RvcFByb3BhZ2F0aW9uKClcbiAgICBpZiggJCgnI25hdicpLmhhc0NsYXNzKCdhY3RpdmUnKSlcbiAgICAgIHJldHVybiBmYWxzZVxuICAgICQoJy5mb2N1cycpLnJlbW92ZUNsYXNzKCdmb2N1cycpXG4gICAgJCh0aGlzKS5hZGRDbGFzcygnZm9jdXMnKVxuICAgICQoJyNuYXYnKS5hZGRDbGFzcygnYWN0aXZlJyk7XG4gICAgdGhlU2xpZGUgPSAkKHRoaXMpLmF0dHIgJ2RhdGEtc2xpZGUnXG4gICAgYWN0aXZlID0gJCgnLmFjdGl2ZScpLmF0dHIoJ2RhdGEtc2xpZGUnKVxuICAgICQoJy5zbGlkZScpLnJlbW92ZUNsYXNzKCdhY3RpdmUnKVxuICAgIHJvdGF0ZVNsaWRlcih0aGVTbGlkZSwgYWN0aXZlKVxuICAgIFxuICAjREVNTyAgXG4gIHNldFRpbWVvdXQgKCktPlxuICAgICQoJyNuYXYgYVtkYXRhLXNsaWRlPVwiMlwiXScpLnRyaWdnZXIoJ2NsaWNrJylcbiAgLCA1MDBcbiAgXG4gIHNldFRpbWVvdXQgKCktPlxuICAgICQoJyNuYXYgYVtkYXRhLXNsaWRlPVwiM1wiXScpLnRyaWdnZXIoJ2NsaWNrJylcbiAgLCAxMjAwXG4gIFxuICBzZXRUaW1lb3V0ICgpLT5cbiAgICAkKCcjbmF2IGFbZGF0YS1zbGlkZT1cIjRcIl0nKS50cmlnZ2VyKCdjbGljaycpXG4gICwgMTkwMFxuICAgIFxucm90YXRlU2xpZGVyID0gKHNsaWRlLCBhY3RpdmUpIC0+XG4gIHNsaWRlcyA9IFxuICAgIDE6ICdvbmUnXG4gICAgMjogJ3R3bydcbiAgICAzOiAndGhyZWUnXG4gICAgNDogJ2ZvdXInXG4gIFxuICAjIyNcbiAgVE9ETyAtXG4gIGRldGVjdCBjdXJyZW50IHNsaWRlIHBvc2l0aW9uIGFuZCBjYWxjdWxhdGUgbm8uIHNsaWRlcyB0byBcbiAgdGFyZ2V0LiAgRWFzZSB0aHJvdWdoIHRob3NlIHNsaWRlcyB0byBhdm9pZCBDU1MzIFxuICB0cmFuc2l0aW9uIHdvbmtpbmVzcy5cbiAgIyMjICBcbiAgdGhlU2xpZGUgPSBzbGlkZXNbc2xpZGVdXG4gIGRlbHRhID0gTWF0aC5hYnMgc2xpZGUgLSBhY3RpdmVcbiAgXG4gIGlmIGRlbHRhIGlzIDMgYW5kIGFjdGl2ZSBpcyAnMSdcbiAgICBcbiAgICAkKCcuc2xpZGVbZGF0YS1zbGlkZT1cIicrc2xpZGUrJ1wiXScpLmFkZENsYXNzKCdhY3RpdmUnKVxuICAgICQoJy5zbGlkZXItaW5uZXInKS5hdHRyICdjbGFzcycsICdzbGlkZXItaW5uZXIgcm90YXRlIHR3bydcbiAgICBzZXRUaW1lb3V0ICgpLT5cbiAgICAgICQoJy5zbGlkZXItaW5uZXInKS5hdHRyICdjbGFzcycsICdzbGlkZXItaW5uZXIgcm90YXRlIHRocmVlJ1xuICAgICwgNDAwXG4gICAgc2V0VGltZW91dCAoKS0+XG4gICAgICAkKCcuc2xpZGVyLWlubmVyJykuYXR0ciAnY2xhc3MnLCAnc2xpZGVyLWlubmVyIHJvdGF0ZSBmb3VyJ1xuICAgICwgODAwXG4gICAgXG4gIGVsc2UgaWYgZGVsdGEgaXMgMyBhbmQgYWN0aXZlIGlzICc0J1xuICAgIFxuICAgICQoJy5zbGlkZVtkYXRhLXNsaWRlPVwiJytzbGlkZSsnXCJdJykuYWRkQ2xhc3MoJ2FjdGl2ZScpXG4gICAgJCgnLnNsaWRlci1pbm5lcicpLmF0dHIgJ2NsYXNzJywgJ3NsaWRlci1pbm5lciByb3RhdGUgdGhyZWUnXG4gICAgc2V0VGltZW91dCAoKS0+XG4gICAgICAkKCcuc2xpZGVyLWlubmVyJykuYXR0ciAnY2xhc3MnLCAnc2xpZGVyLWlubmVyIHJvdGF0ZSB0d28nXG4gICAgLCAzNTBcbiAgICBzZXRUaW1lb3V0ICgpLT5cbiAgICAgICQoJy5zbGlkZXItaW5uZXInKS5hdHRyICdjbGFzcycsICdzbGlkZXItaW5uZXIgcm90YXRlIG9uZSdcbiAgICAsIDcwMFxuICAgIFxuICAgIFxuICBlbHNlXG4gICAgJCgnLnNsaWRlW2RhdGEtc2xpZGU9XCInK3NsaWRlKydcIl0nKS5hZGRDbGFzcygnYWN0aXZlJylcbiAgICAkKCcuc2xpZGVyLWlubmVyJykuYXR0ciAnY2xhc3MnLCAnc2xpZGVyLWlubmVyIHJvdGF0ZSAnK3RoZVNsaWRlXG4gIFxuICBcbiAgJCgnI25hdicpLnJlbW92ZUNsYXNzKCdhY3RpdmUnKVxuICAiXX0=
//# sourceURL=coffeescript

That’s all! hopefully, you have successfully created a Content Slider With Cube Effect. If you have any questions or suggestions, feel free to comment below.

Similar Code Snippets:

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...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

F5
X