^

Cube slider logo Cube Slider - The CSS3 image slider

  • Facebook
  • Twitter
  • Google+
  • Pinterest

How to setup

Install the slider

  1. Load jQuery.js and cubeslider-min.js in the head section for your html document:

    <script src="jslibs/jquery.js" type="text/javascript"></script> 	
<script src="jslibs/cubeslider-min.js" type="text/javascript"></script>

  2. Load the CSS theme file that styles the plugin (2 themes avaible):

    <link rel="stylesheet" href="css/light/cubeslider.css" type="text/css" media="all" /> 
OR
<link rel="stylesheet" href="css/classic/cubeslider.css" type="text/css" media="all" />

  3. Create a DIV tag where to set the image list. Also optionally for wrapp them into links (a):

     <div id="demo" >           
          <img src="image/image1.jpg" />
          <img src="image/image2.jpg" />
          <img src="image/image3.jpg" />
          <img src="image/image4.jpg" />
</div>

  4. Finally just call the plugin on the div ID or class:

    	$('#demo').cubeslider();

Features

  • Compaltible with all browsers in fallback mode
  • Real 3D with CSS3
  • Random Effects
  • Responsive
  • Best in Chrome, Safari and Firefox
  • Title support
  • jQuery Easing for fallback slider
  • Vertical and Horizontal rotation
  • Auto play mode