Just a 3D carousel plugin. No dependency.
This cannot work properly in iPhone, eg Safari
/WeChat Browser
. The heart of the problem is the timing
.
Is there any tip or help?
As mentioned above, it is just a 3d carousel plugin. The author has been accustomed to writting plugin in vanilla-js, so it was writtened by vanilla-js. In other words, this plugin is independent, no jQuery, no any other library or framework.
Carousel3D
Carousel3D({
carousel: '.carousel',
items: '.carousel-item',
reflect: false,
wheel: true,
keydown: true,
percent: .6
});
{
carousel: '',
items: '',
reflect: false,
reflectValue: 'below -5px -webkit-gradient(linear, left top,left bottom, from(rgba(0,0,0,0.25)), to(rgba(255,255,255,0.05)))',
percent: .5,
ratio: .3,
depth: 2,
currentClass: 'on',
opacity: .1,
grayscale: 1,
sepia: 1,
blur: 5,
animate: 300,
fps: 60,
auto: 8000,
click: true,
keydown: false,
wheel: false,
resize: true,
swipe: false,
next: null,
prev: null,
callback: null
}
carousel
, string. Carousel main element.items
, string. Carousel items.reflect
, boolean. An experimental value. Set the carousel items a reflect effect and the value is determined by the value below.reflectValue
, string. Seereflect
.percent
, number. The percent of carousel item's width which is related to the main element.ratio
, number. The ratio of carousel main element's height.depth
, integer. System reserved. Determine the element's depth. If you don't know how to use it, just ignore it.currentClass
, string. The className of carousel item which is currenttly actived.opacity
, number. The minimal opacity of the carousel item.grayscale
, number. The grayscale value of the carousel item.sepia
, number. The sepia value of the carousel item.blur
, string. eg: 3px. The blur value of the carousel item.animate
, number. The time from each effect duration. The unit is millisecond.fps
, integer. How many times the animate effect excuted. Defaulted to60
.auto
, number, default value is8000
. The flag of autoplay. Set a false-value like0
orfalse
to disable autoplay.click
, boolean. Wether the item is clickable to switch.keydown
, boolean. Wether to respond to keyboard events:keyLeft
orkeyRight
.wheel
, boolean. Wether to respond to wheel events.resize
, boolean. Wether to respond to window resize events.swipe
, boolean. Wether to respond to swipe events. NOT implementednext
, string. CSS-selector of prev element to switch to the prev carousel item.prev
, string. CSS-selector of next element to switch to the next carousel item.callback
, function. The callback function when the carousel item's switch-effect ends.
Get the current active carousel item index.
Switch to the prev carousel item.
Switch to the next carousel item.
Switch to the specified index.
Reset carousel to init state.
Stop autoplay.
Start autoplay with an interval duration.
Carousel3D.util
CSS selector.
Traverse array or object.
Judge the element contains the class name.
Add class name to the element.
Remove class name of the element.
Extend object.
EventListener
- AMD
- swipe events
- Responsive
-webkit-filter
-webkit-box-reflect-
if it is been enabledclassList
addEventListener
transform
querySelectorAll
Test the feature in Can I Use, and of course, it is up to you.
- depthdev/carousel3d. Inspiration of
qslinz.js
, extend/each/className-polyfill
2016-08-17
- add options
swipe
- add options
drag
/drop
to support drag&drop event. experimental
2016-08-12
- remove options
float
- add API
reset
- rename options
pest
toratio
- add
callback
after initialization - add options
currentClass
2016-08-12
- project init.
- polyfill to
hasClass
/addClass
/removeClass
- expose utils