Installing CubeSlider

Using npm

npm i cubeslider

Or download zip

<link rel="stylesheet" href="css/cubeslider.min.css">
<script src="js/cubeslider.min.js" defer></script>

Creating slider

HTML:

<div class="cube-slider my-slider"></div>

JS:

/*
*If you used npm, you have to import the js and CSS file like this
*assuming you have proper bundler setup
*skip these imports if you used link and script tag
*/
import initCubeSlider from "cubeslider"
import "../node_modules/cubeslider/css/cubeslider.css"


//creating slider
initCubeSlider({
    el: '.my-slider',
    slides: ["img/1.jpg", "img/2.jpg"] //add up to 6 images
    //extra options goes here
})

Available options

name description default
row Number of rows slider should have 2
col Number of cube each row should have 3
controls Weather the slider should have next/previous control or not false
size Size of cubes 100
unit Unit of cube size. px
interval How fast it should go to next slide 2500
delay delay between transition of each cube 50
transition how fast cube should rotate 500

Pro tip

To get the best result make sure your images have height & width ratio same as row & col.