{"id":10303,"date":"2024-01-18T18:18:00","date_gmt":"2024-01-18T18:18:00","guid":{"rendered":"https:\/\/codehim.com\/?p=10303"},"modified":"2024-01-22T16:19:11","modified_gmt":"2024-01-22T11:19:11","slug":"content-slider-with-cube-effect","status":"publish","type":"post","link":"https:\/\/codehim.com\/carousel\/content-slider-with-cube-effect\/","title":{"rendered":"Content Slider With Cube Effect"},"content":{"rendered":"

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.<\/p>\n

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.<\/p>\n

How to Create Content Slider With Cube Effect<\/h2>\n

1. First of all, load the Font Awesome CSS by adding the following CDN link into the head tag of your HTML document.<\/p>\n

<link rel='stylesheet' href='https:\/\/netdna.bootstrapcdn.com\/font-awesome\/4.0.3\/css\/font-awesome.css'><\/pre>\n
2.\u00a0Create necessary elements like the wrapper, slider-outer, and navigation.<\/p>\n
  <div class=\"clearfix\" id=\"wrapper\">\r\n    <div class=\"slider-outer\">\r\n      <div class=\"slider-inner\">\r\n        <div class=\"slide front active\" data-slide=\"1\">\r\n          <div class=\"slide-title\">Slide 1<i class=\"fa fa-html5\"><\/i><\/div>\r\n        <\/div>\r\n        <div class=\"slide top\" data-slide=\"2\">\r\n          <div class=\"slide-title\">Slide 2<i class=\"fa fa-css3\"><\/i><\/div>\r\n        <\/div>\r\n        <div class=\"slide back\" data-slide=\"3\">\r\n          <div class=\"slide-title\">Slide 3<i class=\"fa fa-android\"><\/i><\/div>\r\n        <\/div>\r\n        <div class=\"slide bottom\" data-slide=\"4\">\r\n          <div class=\"slide-title\">Slide 4<i class=\"fa fa-mobile-phone\"><\/i><\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n    <nav class=\"clearfix\" id=\"nav\">\r\n      <ul class=\"clearfix\">\r\n        <li><a class=\"btn focus\" href=\"href\" data-slide=\"1\">1<\/a><\/li>\r\n        <li><a class=\"btn\" href=\"href\" data-slide=\"2\">2<\/a><\/li>\r\n        <li><a class=\"btn\" href=\"href\" data-slide=\"3\">3<\/a><\/li>\r\n        <li><a class=\"btn\" href=\"href\" data-slide=\"4\">4<\/a><\/li>\r\n      <\/ul>\r\n    <\/nav>\r\n  <\/div><\/pre>\n
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.<\/p>\n
@import url(https:\/\/fonts.googleapis.com\/css?family=Lato:100,300,400,700);\r\n\r\n.clearfix {\r\n  zoom: 1;\r\n}\r\n.clearfix:before, .clearfix:after {\r\n  content: \"\";\r\n  display: table;\r\n}\r\n.clearfix:after {\r\n  clear: both;\r\n}\r\n\r\n* {\r\n  -webkit-box-sizing: border-box;\r\n  -moz-box-sizing: border-box;\r\n  -ms-box-sizing: border-box;\r\n  box-sizing: border-box !important;\r\n}\r\n\r\nbody {\r\n  background: #1d1d1f;\r\n  font-family: \"lato\", helvetica, arial, sans-serif;\r\n  color: white;\r\n}\r\n\r\n#wrapper {\r\n  display: block;\r\n  width: 90%;\r\n  margin: 50px auto;\r\n}\r\n\r\n.slider-outer {\r\n  display: block;\r\n  width: 100%;\r\n  height: 250px;\r\n  position: relative;\r\n  -webkit-perspective: 1600px;\r\n  -moz-perspective: 1600px;\r\n  -o-perspective: 1600px;\r\n  -ms-perspective: 1600px;\r\n}\r\n.slider-outer .slider-inner {\r\n  display: block;\r\n  width: 100%;\r\n  -webkit-transform-style: preserve-3d;\r\n  -moz-transform-style: preserve-3d;\r\n  -o-transform-style: preserve-3d;\r\n  -ms-transform-style: preserve-3d;\r\n  -webkit-transition: all 0.3s linear;\r\n  -moz-transition: all 0.3s linear;\r\n  -o-transition: all 0.3s linear;\r\n  -ms-transition: all 0.3s linear;\r\n  -webkit-transform-origin: 50% 100%;\r\n  -moz-transform-origin: 50% 100%;\r\n  -o-transform-origin: 50% 100%;\r\n  -ms-transform-origin: 50% 100%;\r\n}\r\n.slider-outer .slider-inner.rotate.two {\r\n  -webkit-transform: rotateX(-90deg) translateZ(250px);\r\n  -moz-transform: rotateX(-90deg) translateZ(250px);\r\n  -o-transform: rotateX(-90deg) translateZ(250px);\r\n  -ms-transform: rotateX(-90deg) translateZ(250px);\r\n}\r\n.slider-outer .slider-inner.rotate.three {\r\n  -webkit-transform: rotateX(-180deg) translateY(-250px) translateZ(250px);\r\n  -moz-transform: rotateX(-180deg) translateY(-250px) translateZ(250px);\r\n  -o-transform: rotateX(-180deg) translateY(-250px) translateZ(250px);\r\n  -ms-transform: rotateX(-180deg) translateY(-250px) translateZ(250px);\r\n}\r\n.slider-outer .slider-inner.rotate.four {\r\n  -webkit-transform: rotateX(-270deg) translateY(-250px);\r\n  -moz-transform: rotateX(-270deg) translateY(-250px);\r\n  -o-transform: rotateX(-270deg) translateY(-250px);\r\n  -ms-transform: rotateX(-270deg) translateY(-250px);\r\n}\r\n.slider-outer .slide {\r\n  display: block;\r\n  width: 100%;\r\n  height: 250px;\r\n  position: absolute;\r\n  background: white;\r\n  background-color: #ededed;\r\n  background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(#ededed));\r\n  background-image: -webkit-linear-gradient(top, white, #ededed);\r\n  background-image: -moz-linear-gradient(top, white, #ededed);\r\n  background-image: -o-linear-gradient(top, white, #ededed);\r\n  background-image: linear-gradient(to bottom, white, #ededed);\r\n  padding: 27px;\r\n  color: #4ECDC4;\r\n  overflow: hidden;\r\n  -webkit-transform-origin: 0% 0%;\r\n  -moz-transform-origin: 0% 0%;\r\n  -o-transform-origin: 0% 0%;\r\n  -ms-transform-origin: 0% 0%;\r\n}\r\n.slider-outer .slide .slide-title {\r\n  display: block;\r\n  position: relative;\r\n  font-size: 70px;\r\n  font-weight: 100;\r\n  z-index: 12;\r\n}\r\n.slider-outer .slide i {\r\n  display: block;\r\n  position: absolute;\r\n  top: 10px;\r\n  right: -10px;\r\n  font-size: 300px;\r\n  color: #C7F464;\r\n  z-index: 11;\r\n  text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1);\r\n}\r\n.slider-outer .slide.top {\r\n  background: #556270;\r\n  background-color: #46505c;\r\n  background-image: -webkit-gradient(linear, left top, left bottom, from(#556270), to(#46505c));\r\n  background-image: -webkit-linear-gradient(top, #556270, #46505c);\r\n  background-image: -moz-linear-gradient(top, #556270, #46505c);\r\n  background-image: -o-linear-gradient(top, #556270, #46505c);\r\n  background-image: linear-gradient(to bottom, #556270, #46505c);\r\n  -webkit-transform: rotateX(90deg) translateY(-250px);\r\n  -moz-transform: rotateX(90deg) translateY(-250px);\r\n  -o-transform: rotateX(90deg) translateY(-250px);\r\n  -ms-transform: rotateX(90deg) translateY(-250px);\r\n}\r\n.slider-outer .slide.back {\r\n  background: #FF6B6B;\r\n  color: white;\r\n  background-color: #ff4747;\r\n  background-image: -webkit-gradient(linear, left top, left bottom, from(#FF6B6B), to(#ff4747));\r\n  background-image: -webkit-linear-gradient(top, #FF6B6B, #ff4747);\r\n  background-image: -moz-linear-gradient(top, #FF6B6B, #ff4747);\r\n  background-image: -o-linear-gradient(top, #FF6B6B, #ff4747);\r\n  background-image: linear-gradient(to bottom, #FF6B6B, #ff4747);\r\n  -webkit-transform: rotateX(180deg) translateY(-250px) translateZ(250px);\r\n  -moz-transform: rotateX(180deg) translateY(-250px) translateZ(250px);\r\n  -o-transform: rotateX(180deg) translateY(-250px) translateZ(250px);\r\n  -ms-transform: rotateX(180deg) translateY(-250px) translateZ(250px);\r\n}\r\n.slider-outer .slide.bottom {\r\n  background: #4ECDC4;\r\n  background-color: #36c1b7;\r\n  background-image: -webkit-gradient(linear, left top, left bottom, from(#4ECDC4), to(#36c1b7));\r\n  background-image: -webkit-linear-gradient(top, #4ECDC4, #36c1b7);\r\n  background-image: -moz-linear-gradient(top, #4ECDC4, #36c1b7);\r\n  background-image: -o-linear-gradient(top, #4ECDC4, #36c1b7);\r\n  background-image: linear-gradient(to bottom, #4ECDC4, #36c1b7);\r\n  color: white;\r\n  -webkit-transform: rotateX(-90deg) translateZ(250px);\r\n  -moz-transform: rotateX(-90deg) translateZ(250px);\r\n  -o-transform: rotateX(-90deg) translateZ(250px);\r\n  -ms-transform: rotateX(-90deg) translateZ(250px);\r\n}\r\n\r\n#nav {\r\n  display: block;\r\n  position: relative;\r\n  width: 100%;\r\n  margin-top: 27px;\r\n  z-index: 10;\r\n}\r\n#nav ul {\r\n  display: block;\r\n  padding: 0;\r\n  margin: 0 0 0;\r\n  list-style: none;\r\n  width: 190px;\r\n  margin: 0 auto;\r\n  text-align: left;\r\n}\r\n#nav ul li {\r\n  display: block;\r\n  float: left;\r\n  margin-right: 10px;\r\n  font-size: 18px;\r\n}\r\n#nav ul li:nth-of-type(4) {\r\n  margin-right: 0;\r\n}\r\n#nav ul li a.btn {\r\n  display: block;\r\n  width: 40px;\r\n  height: 40px;\r\n  color: white;\r\n  border: 3px solid white;\r\n  border-radius: 30px;\r\n  font-weight: 300;\r\n  line-height: 35px;\r\n  text-align: center;\r\n  text-decoration: none;\r\n  -webkit-transition: all 0.2s linear;\r\n  -moz-transition: all 0.2s linear;\r\n  -o-transition: all 0.2s linear;\r\n  -ms-transition: all 0.2s linear;\r\n}\r\n#nav ul li a.btn:focus, #nav ul li a.btn:hover {\r\n  color: #FF6B6B;\r\n  border-color: #FF6B6B;\r\n}\r\n#nav ul li a.btn:active {\r\n  color: #C44D58;\r\n  border-color: #C44D58;\r\n}\r\n#nav ul li a.btn.focus {\r\n  color: #C7F464;\r\n  border-color: #C7F464;\r\n}<\/pre>\n
4. Now, load the jQuery JavaScript library<\/a> by adding the following script before closing the body tag:<\/p>\n
<script src='\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/2.1.3\/jquery.min.js'><\/script><\/pre>\n
5. Finally, integrate the JavaScript code into your project. This code handles the slider’s functionality, enabling smooth rotations based on user interactions.<\/p>\n
(function() {\r\n  var rotateSlider;\r\n\r\n  $(function() {\r\n    $('#nav').on('click', 'a', function(e) {\r\n      var active, theSlide;\r\n      e = e != null ? e : {\r\n        e: window.event\r\n      };\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n      if ($('#nav').hasClass('active')) {\r\n        return false;\r\n      }\r\n      $('.focus').removeClass('focus');\r\n      $(this).addClass('focus');\r\n      $('#nav').addClass('active');\r\n      theSlide = $(this).attr('data-slide');\r\n      active = $('.active').attr('data-slide');\r\n      $('.slide').removeClass('active');\r\n      return rotateSlider(theSlide, active);\r\n    });\r\n    \r\n    \/\/DEMO  \r\n    setTimeout(function() {\r\n      return $('#nav a[data-slide=\"2\"]').trigger('click');\r\n    }, 500);\r\n    setTimeout(function() {\r\n      return $('#nav a[data-slide=\"3\"]').trigger('click');\r\n    }, 1200);\r\n    return setTimeout(function() {\r\n      return $('#nav a[data-slide=\"4\"]').trigger('click');\r\n    }, 1900);\r\n  });\r\n\r\n  rotateSlider = function(slide, active) {\r\n    \/*\r\n    TODO -\r\n    detect current slide position and calculate no. slides to \r\n    target.  Ease through those slides to avoid CSS3 \r\n    transition wonkiness.\r\n    *\/\r\n    var delta, slides, theSlide;\r\n    slides = {\r\n      1: 'one',\r\n      2: 'two',\r\n      3: 'three',\r\n      4: 'four'\r\n    };\r\n    theSlide = slides[slide];\r\n    delta = Math.abs(slide - active);\r\n    if (delta === 3 && active === '1') {\r\n      $('.slide[data-slide=\"' + slide + '\"]').addClass('active');\r\n      $('.slider-inner').attr('class', 'slider-inner rotate two');\r\n      setTimeout(function() {\r\n        return $('.slider-inner').attr('class', 'slider-inner rotate three');\r\n      }, 400);\r\n      setTimeout(function() {\r\n        return $('.slider-inner').attr('class', 'slider-inner rotate four');\r\n      }, 800);\r\n    } else if (delta === 3 && active === '4') {\r\n      $('.slide[data-slide=\"' + slide + '\"]').addClass('active');\r\n      $('.slider-inner').attr('class', 'slider-inner rotate three');\r\n      setTimeout(function() {\r\n        return $('.slider-inner').attr('class', 'slider-inner rotate two');\r\n      }, 350);\r\n      setTimeout(function() {\r\n        return $('.slider-inner').attr('class', 'slider-inner rotate one');\r\n      }, 700);\r\n    } else {\r\n      $('.slide[data-slide=\"' + slide + '\"]').addClass('active');\r\n      $('.slider-inner').attr('class', 'slider-inner rotate ' + theSlide);\r\n    }\r\n    return $('#nav').removeClass('active');\r\n  };\r\n\r\n}).call(this);\r\n\r\n\/\/# sourceMappingURL=data:application\/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiPGFub255bW91cz4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7QUFBQSxNQUFBOztFQUFBLENBQUEsQ0FBRSxRQUFBLENBQUEsQ0FBQTtJQUNBLENBQUEsQ0FBRSxNQUFGLENBQVMsQ0FBQyxFQUFWLENBQWEsT0FBYixFQUFzQixHQUF0QixFQUEyQixRQUFBLENBQUMsQ0FBRCxDQUFBO0FBQzdCLFVBQUEsTUFBQSxFQUFBO01BQUksQ0FBQSxlQUFJLElBQUk7UUFBQSxDQUFBLEVBQUksTUFBTSxDQUFDO01BQVg7TUFDUixDQUFDLENBQUMsY0FBRixDQUFBO01BQ0EsQ0FBQyxDQUFDLGVBQUYsQ0FBQTtNQUNBLElBQUksQ0FBQSxDQUFFLE1BQUYsQ0FBUyxDQUFDLFFBQVYsQ0FBbUIsUUFBbkIsQ0FBSjtBQUNFLGVBQU8sTUFEVDs7TUFFQSxDQUFBLENBQUUsUUFBRixDQUFXLENBQUMsV0FBWixDQUF3QixPQUF4QjtNQUNBLENBQUEsQ0FBRSxJQUFGLENBQU8sQ0FBQyxRQUFSLENBQWlCLE9BQWpCO01BQ0EsQ0FBQSxDQUFFLE1BQUYsQ0FBUyxDQUFDLFFBQVYsQ0FBbUIsUUFBbkI7TUFDQSxRQUFBLEdBQVcsQ0FBQSxDQUFFLElBQUYsQ0FBTyxDQUFDLElBQVIsQ0FBYSxZQUFiO01BQ1gsTUFBQSxHQUFTLENBQUEsQ0FBRSxTQUFGLENBQVksQ0FBQyxJQUFiLENBQWtCLFlBQWxCO01BQ1QsQ0FBQSxDQUFFLFFBQUYsQ0FBVyxDQUFDLFdBQVosQ0FBd0IsUUFBeEI7YUFDQSxZQUFBLENBQWEsUUFBYixFQUF1QixNQUF2QjtJQVp5QixDQUEzQixFQUFGOzs7SUFlRSxVQUFBLENBQVcsUUFBQSxDQUFBLENBQUE7YUFDVCxDQUFBLENBQUUsd0JBQUYsQ0FBMkIsQ0FBQyxPQUE1QixDQUFvQyxPQUFwQztJQURTLENBQVgsRUFFRSxHQUZGO0lBSUEsVUFBQSxDQUFXLFFBQUEsQ0FBQSxDQUFBO2FBQ1QsQ0FBQSxDQUFFLHdCQUFGLENBQTJCLENBQUMsT0FBNUIsQ0FBb0MsT0FBcEM7SUFEUyxDQUFYLEVBRUUsSUFGRjtXQUlBLFVBQUEsQ0FBVyxRQUFBLENBQUEsQ0FBQTthQUNULENBQUEsQ0FBRSx3QkFBRixDQUEyQixDQUFDLE9BQTVCLENBQW9DLE9BQXBDO0lBRFMsQ0FBWCxFQUVFLElBRkY7RUF4QkEsQ0FBRjs7RUE0QkEsWUFBQSxHQUFlLFFBQUEsQ0FBQyxLQUFELEVBQVEsTUFBUixDQUFBLEVBQUE7Ozs7Ozs7QUFDZixRQUFBLEtBQUEsRUFBQSxNQUFBLEVBQUE7SUFBRSxNQUFBLEdBQ0U7TUFBQSxDQUFBLEVBQUcsS0FBSDtNQUNBLENBQUEsRUFBRyxLQURIO01BRUEsQ0FBQSxFQUFHLE9BRkg7TUFHQSxDQUFBLEVBQUc7SUFISDtJQVdGLFFBQUEsR0FBVyxNQUFNLENBQUMsS0FBRDtJQUNqQixLQUFBLEdBQVEsSUFBSSxDQUFDLEdBQUwsQ0FBUyxLQUFBLEdBQVEsTUFBakI7SUFFUixJQUFHLEtBQUEsS0FBUyxDQUFULElBQWUsTUFBQSxLQUFVLEdBQTVCO01BRUUsQ0FBQSxDQUFFLHFCQUFBLEdBQXNCLEtBQXRCLEdBQTRCLElBQTlCLENBQW1DLENBQUMsUUFBcEMsQ0FBNkMsUUFBN0M7TUFDQSxDQUFBLENBQUUsZUFBRixDQUFrQixDQUFDLElBQW5CLENBQXdCLE9BQXhCLEVBQWlDLHlCQUFqQztNQUNBLFVBQUEsQ0FBVyxRQUFBLENBQUEsQ0FBQTtlQUNULENBQUEsQ0FBRSxlQUFGLENBQWtCLENBQUMsSUFBbkIsQ0FBd0IsT0FBeEIsRUFBaUMsMkJBQWpDO01BRFMsQ0FBWCxFQUVFLEdBRkY7TUFHQSxVQUFBLENBQVcsUUFBQSxDQUFBLENBQUE7ZUFDVCxDQUFBLENBQUUsZUFBRixDQUFrQixDQUFDLElBQW5CLENBQXdCLE9BQXhCLEVBQWlDLDBCQUFqQztNQURTLENBQVgsRUFFRSxHQUZGLEVBUEY7S0FBQSxNQVdLLElBQUcsS0FBQSxLQUFTLENBQVQsSUFBZSxNQUFBLEtBQVUsR0FBNUI7TUFFSCxDQUFBLENBQUUscUJBQUEsR0FBc0IsS0FBdEIsR0FBNEIsSUFBOUIsQ0FBbUMsQ0FBQyxRQUFwQyxDQUE2QyxRQUE3QztNQUNBLENBQUEsQ0FBRSxlQUFGLENBQWtCLENBQUMsSUFBbkIsQ0FBd0IsT0FBeEIsRUFBaUMsMkJBQWpDO01BQ0EsVUFBQSxDQUFXLFFBQUEsQ0FBQSxDQUFBO2VBQ1QsQ0FBQSxDQUFFLGVBQUYsQ0FBa0IsQ0FBQyxJQUFuQixDQUF3QixPQUF4QixFQUFpQyx5QkFBakM7TUFEUyxDQUFYLEVBRUUsR0FGRjtNQUdBLFVBQUEsQ0FBVyxRQUFBLENBQUEsQ0FBQTtlQUNULENBQUEsQ0FBRSxlQUFGLENBQWtCLENBQUMsSUFBbkIsQ0FBd0IsT0FBeEIsRUFBaUMseUJBQWpDO01BRFMsQ0FBWCxFQUVFLEdBRkYsRUFQRztLQUFBLE1BQUE7TUFhSCxDQUFBLENBQUUscUJBQUEsR0FBc0IsS0FBdEIsR0FBNEIsSUFBOUIsQ0FBbUMsQ0FBQyxRQUFwQyxDQUE2QyxRQUE3QztNQUNBLENBQUEsQ0FBRSxlQUFGLENBQWtCLENBQUMsSUFBbkIsQ0FBd0IsT0FBeEIsRUFBaUMsc0JBQUEsR0FBdUIsUUFBeEQsRUFkRzs7V0FpQkwsQ0FBQSxDQUFFLE1BQUYsQ0FBUyxDQUFDLFdBQVYsQ0FBc0IsUUFBdEI7RUE1Q2E7QUE1QmYiLCJzb3VyY2VzQ29udGVudCI6WyIkIC0+XG4gICQoJyNuYXYnKS5vbiAnY2xpY2snLCAnYScsIChlKSAtPlxuICAgIGUgPSBlID8gZSA6IHdpbmRvdy5ldmVudFxuICAgIGUucHJldmVudERlZmF1bHQoKVxuICAgIGUuc3RvcFByb3BhZ2F0aW9uKClcbiAgICBpZiggJCgnI25hdicpLmhhc0NsYXNzKCdhY3RpdmUnKSlcbiAgICAgIHJldHVybiBmYWxzZVxuICAgICQoJy5mb2N1cycpLnJlbW92ZUNsYXNzKCdmb2N1cycpXG4gICAgJCh0aGlzKS5hZGRDbGFzcygnZm9jdXMnKVxuICAgICQoJyNuYXYnKS5hZGRDbGFzcygnYWN0aXZlJyk7XG4gICAgdGhlU2xpZGUgPSAkKHRoaXMpLmF0dHIgJ2RhdGEtc2xpZGUnXG4gICAgYWN0aXZlID0gJCgnLmFjdGl2ZScpLmF0dHIoJ2RhdGEtc2xpZGUnKVxuICAgICQoJy5zbGlkZScpLnJlbW92ZUNsYXNzKCdhY3RpdmUnKVxuICAgIHJvdGF0ZVNsaWRlcih0aGVTbGlkZSwgYWN0aXZlKVxuICAgIFxuICAjREVNTyAgXG4gIHNldFRpbWVvdXQgKCktPlxuICAgICQoJyNuYXYgYVtkYXRhLXNsaWRlPVwiMlwiXScpLnRyaWdnZXIoJ2NsaWNrJylcbiAgLCA1MDBcbiAgXG4gIHNldFRpbWVvdXQgKCktPlxuICAgICQoJyNuYXYgYVtkYXRhLXNsaWRlPVwiM1wiXScpLnRyaWdnZXIoJ2NsaWNrJylcbiAgLCAxMjAwXG4gIFxuICBzZXRUaW1lb3V0ICgpLT5cbiAgICAkKCcjbmF2IGFbZGF0YS1zbGlkZT1cIjRcIl0nKS50cmlnZ2VyKCdjbGljaycpXG4gICwgMTkwMFxuICAgIFxucm90YXRlU2xpZGVyID0gKHNsaWRlLCBhY3RpdmUpIC0+XG4gIHNsaWRlcyA9IFxuICAgIDE6ICdvbmUnXG4gICAgMjogJ3R3bydcbiAgICAzOiAndGhyZWUnXG4gICAgNDogJ2ZvdXInXG4gIFxuICAjIyNcbiAgVE9ETyAtXG4gIGRldGVjdCBjdXJyZW50IHNsaWRlIHBvc2l0aW9uIGFuZCBjYWxjdWxhdGUgbm8uIHNsaWRlcyB0byBcbiAgdGFyZ2V0LiAgRWFzZSB0aHJvdWdoIHRob3NlIHNsaWRlcyB0byBhdm9pZCBDU1MzIFxuICB0cmFuc2l0aW9uIHdvbmtpbmVzcy5cbiAgIyMjICBcbiAgdGhlU2xpZGUgPSBzbGlkZXNbc2xpZGVdXG4gIGRlbHRhID0gTWF0aC5hYnMgc2xpZGUgLSBhY3RpdmVcbiAgXG4gIGlmIGRlbHRhIGlzIDMgYW5kIGFjdGl2ZSBpcyAnMSdcbiAgICBcbiAgICAkKCcuc2xpZGVbZGF0YS1zbGlkZT1cIicrc2xpZGUrJ1wiXScpLmFkZENsYXNzKCdhY3RpdmUnKVxuICAgICQoJy5zbGlkZXItaW5uZXInKS5hdHRyICdjbGFzcycsICdzbGlkZXItaW5uZXIgcm90YXRlIHR3bydcbiAgICBzZXRUaW1lb3V0ICgpLT5cbiAgICAgICQoJy5zbGlkZXItaW5uZXInKS5hdHRyICdjbGFzcycsICdzbGlkZXItaW5uZXIgcm90YXRlIHRocmVlJ1xuICAgICwgNDAwXG4gICAgc2V0VGltZW91dCAoKS0+XG4gICAgICAkKCcuc2xpZGVyLWlubmVyJykuYXR0ciAnY2xhc3MnLCAnc2xpZGVyLWlubmVyIHJvdGF0ZSBmb3VyJ1xuICAgICwgODAwXG4gICAgXG4gIGVsc2UgaWYgZGVsdGEgaXMgMyBhbmQgYWN0aXZlIGlzICc0J1xuICAgIFxuICAgICQoJy5zbGlkZVtkYXRhLXNsaWRlPVwiJytzbGlkZSsnXCJdJykuYWRkQ2xhc3MoJ2FjdGl2ZScpXG4gICAgJCgnLnNsaWRlci1pbm5lcicpLmF0dHIgJ2NsYXNzJywgJ3NsaWRlci1pbm5lciByb3RhdGUgdGhyZWUnXG4gICAgc2V0VGltZW91dCAoKS0+XG4gICAgICAkKCcuc2xpZGVyLWlubmVyJykuYXR0ciAnY2xhc3MnLCAnc2xpZGVyLWlubmVyIHJvdGF0ZSB0d28nXG4gICAgLCAzNTBcbiAgICBzZXRUaW1lb3V0ICgpLT5cbiAgICAgICQoJy5zbGlkZXItaW5uZXInKS5hdHRyICdjbGFzcycsICdzbGlkZXItaW5uZXIgcm90YXRlIG9uZSdcbiAgICAsIDcwMFxuICAgIFxuICAgIFxuICBlbHNlXG4gICAgJCgnLnNsaWRlW2RhdGEtc2xpZGU9XCInK3NsaWRlKydcIl0nKS5hZGRDbGFzcygnYWN0aXZlJylcbiAgICAkKCcuc2xpZGVyLWlubmVyJykuYXR0ciAnY2xhc3MnLCAnc2xpZGVyLWlubmVyIHJvdGF0ZSAnK3RoZVNsaWRlXG4gIFxuICBcbiAgJCgnI25hdicpLnJlbW92ZUNsYXNzKCdhY3RpdmUnKVxuICAiXX0=\r\n\/\/# sourceURL=coffeescript<\/pre>\n
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.<\/p>\n","protected":false},"excerpt":{"rendered":"
This code creates a visually appealing content slider with cube transitions. The CSS defines the slider’s layout and styling, while…<\/p>\n","protected":false},"author":1,"featured_media":10314,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[59],"tags":[],"class_list":["post-10303","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-carousel"],"acf":[],"yoast_head":"\nContent Slider With Cube Effect — CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a Content Slider With Cube Effect. You can view demo and download the source code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/carousel\/content-slider-with-cube-effect\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Content Slider With Cube Effect — CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a Content Slider With Cube Effect. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/carousel\/content-slider-with-cube-effect\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-18T18:18:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T11:19:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/Content-Slider-With-Cube-Effect.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"980\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/carousel\/content-slider-with-cube-effect\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/carousel\/content-slider-with-cube-effect\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Content Slider With Cube Effect\",\"datePublished\":\"2024-01-18T18:18:00+00:00\",\"dateModified\":\"2024-01-22T11:19:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/carousel\/content-slider-with-cube-effect\/\"},\"wordCount\":241,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/carousel\/content-slider-with-cube-effect\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/Content-Slider-With-Cube-Effect.png\",\"articleSection\":[\"Carousel\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/carousel\/content-slider-with-cube-effect\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/carousel\/content-slider-with-cube-effect\/\",\"url\":\"https:\/\/codehim.com\/carousel\/content-slider-with-cube-effect\/\",\"name\":\"Content Slider With Cube Effect — CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/carousel\/content-slider-with-cube-effect\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/carousel\/content-slider-with-cube-effect\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/Content-Slider-With-Cube-Effect.png\",\"datePublished\":\"2024-01-18T18:18:00+00:00\",\"dateModified\":\"2024-01-22T11:19:11+00:00\",\"description\":\"Here is a free code snippet to create a Content Slider With Cube Effect. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/carousel\/content-slider-with-cube-effect\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/carousel\/content-slider-with-cube-effect\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/carousel\/content-slider-with-cube-effect\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/Content-Slider-With-Cube-Effect.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/Content-Slider-With-Cube-Effect.png\",\"width\":1280,\"height\":980,\"caption\":\"Content Slider With Cube Effect\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/carousel\/content-slider-with-cube-effect\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Carousel\",\"item\":\"https:\/\/codehim.com\/category\/carousel\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Content Slider With Cube Effect\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"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.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Content Slider With Cube Effect — CodeHim","description":"Here is a free code snippet to create a Content Slider With Cube Effect. You can view demo and download the source code.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codehim.com\/carousel\/content-slider-with-cube-effect\/","og_locale":"en_US","og_type":"article","og_title":"Content Slider With Cube Effect — CodeHim","og_description":"Here is a free code snippet to create a Content Slider With Cube Effect. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/carousel\/content-slider-with-cube-effect\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-18T18:18:00+00:00","article_modified_time":"2024-01-22T11:19:11+00:00","og_image":[{"width":1280,"height":980,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/Content-Slider-With-Cube-Effect.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/carousel\/content-slider-with-cube-effect\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/carousel\/content-slider-with-cube-effect\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Content Slider With Cube Effect","datePublished":"2024-01-18T18:18:00+00:00","dateModified":"2024-01-22T11:19:11+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/carousel\/content-slider-with-cube-effect\/"},"wordCount":241,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/carousel\/content-slider-with-cube-effect\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/Content-Slider-With-Cube-Effect.png","articleSection":["Carousel"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/carousel\/content-slider-with-cube-effect\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/carousel\/content-slider-with-cube-effect\/","url":"https:\/\/codehim.com\/carousel\/content-slider-with-cube-effect\/","name":"Content Slider With Cube Effect — CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/carousel\/content-slider-with-cube-effect\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/carousel\/content-slider-with-cube-effect\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/Content-Slider-With-Cube-Effect.png","datePublished":"2024-01-18T18:18:00+00:00","dateModified":"2024-01-22T11:19:11+00:00","description":"Here is a free code snippet to create a Content Slider With Cube Effect. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/carousel\/content-slider-with-cube-effect\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/carousel\/content-slider-with-cube-effect\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/carousel\/content-slider-with-cube-effect\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/Content-Slider-With-Cube-Effect.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/Content-Slider-With-Cube-Effect.png","width":1280,"height":980,"caption":"Content Slider With Cube Effect"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/carousel\/content-slider-with-cube-effect\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Carousel","item":"https:\/\/codehim.com\/category\/carousel\/"},{"@type":"ListItem","position":3,"name":"Content Slider With Cube Effect"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"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.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":1052,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/10303","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=10303"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/10303\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/10314"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=10303"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=10303"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=10303"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}