JQuery plug-in slicebox implements the special effect of switching between 3D animated images for carousel, jqueryslicebox

JQuery plug-in slicebox implements the special effect of switching between 3D animated images for carousel, jqueryslicebox

Beautiful jQuery 3D animation image carousel switching special effect plug-in jquery. slicebox. js, based on jQuery, the plug-in uses CSS 3D animation effects, supports Event Callback calling, and supports parameter custom configuration, such as: speed: 600 switching speed, autoplay: true, whether to play automatically, in terms of browser compatibility, the browser needs to support CSS 3 to transform the deformation attributes. If not, 3D effects will not be visible. We recommend that you learn the code.

Usage:

1. Load plug-ins and jQuery

<link type="text/css" rel="stylesheet" href="css/slicebox.css" /> <script type="text/javascript" src="js/modernizr.js"></script> <script type="text/javascript" src="js/jquery8.js"></script> <script type="text/javascript" src="js/jquery.slicebox.js"></script> 

2. HTML content. The HTML header must use the HTML5 header. <! DOCTYPE html>

<Ul id = "sb-slider" class = "sb-slider"> <li>  </li> <li>  </li>  </li>  </li>  </li> </ul> <div> <span onclick =" $ slicebox. previous (); "> previous page </span> <span onclick =" $ slicebox. next (); "> next page </span> <span onclick =" $ slicebox. jump (4); "> jump page </span> </div>

3. function call

<Script type = "text/javascript"> var $ slicebox; $ (function () {$ slicebox =$ ('# sb-slider '). slicebox ({interval: 6000, orientation: "r", // indicates the switching direction of the slide. You can (v) the vertical direction, (h) the horizontal direction, or (r)) random direction perspective: 800, // perspective point distance, you can view the effect by changing its value cuboidsCount: 5, // number of horizontal or vertical cut slides, the cuboidsRandom: true will be switched in 3D format, // whether to randomly set the value of the cuboidsCount parameter maxCuboidsCount: 5, // set a value to specify the maximum value of cuboidsCount colorHiddenSides: "#333", // the color of the hidden slide sequentialFactor: 150, // slide switching time (milliseconds) speed: 600, // The speed of each 3D cube autoplay: true, // whether to automatically start switching onBeforeChange: function (position) {return false ;}, onAfterChange: function (position) {return false ;}});}); </script>

Parameter description:
Orientation: "r", // indicates the switching direction of the slide, which can be (v) vertical direction, (h) horizontal direction or (r) random direction.
Perspective: 800, // perspective point distance, you can view the effect by changing its value
CuboidsCount: 5, // number of blocks to be cut horizontally or vertically on the slide. Each part is switched in 3D format.
CuboidsRandom: true, // whether the value of the cuboidsCount parameter is random
MaxCuboidsCount: 5, // set a value to specify the maximum cuboidsCount Value
ColorHiddenSides: "#333", // the color of the hidden slide
SequentialFactor: 150, // slide switching time (milliseconds)
Speed: 600, // The speed of each 3D cube
Autoplay: true, // whether to automatically start switching

Demo script download

The above is all the content of this article. I hope you will like it.