UNPKG

vue-carousel-3d

Version:

Beautiful, flexible and touch supported 3D Carousel for Vue.js

github.com/wlada/vue-carousel-3d

wlada/vue-carousel-3d

79 lines (40 loc) • 2.29 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
--- title: Examples --- ## Simple Without any options configured and seven slides added to 3D Carousel <script async src="//jsfiddle.net/Wlada/kqen0yba/embed/result,js,html,css/"></script> ## Callbacks Added @after-slide-change, @before-slide-change and @last-slide callbacks <script async src="//jsfiddle.net/Wlada/dtwg9kr9/embed/result,js,html/"></script> ## Controls Enabled Arrow controls visible, clicking on slide is disabled and seven slides with captions added to 3D Carousel <script async src="//jsfiddle.net/Wlada/684ptro6/embed/result,js,html,css/"></script> ## Controls Customised Arrow controls customised. Text, width and height of a button is updated. <script async src="//jsfiddle.net/Wlada/r6auc7bh/embed/result,js,html/"></script> ## Autoplay Autoplay enabled, number of displayed configured and seven slides added to 3D Carousel <script async src="//jsfiddle.net/Wlada/p2927k3p/embed/result,js,html,css/"></script> ## Dynamic Slides Add / Remove slides from 3D Carousel <script async src="//jsfiddle.net/Wlada/stsao0e1/embed/result,js,html/"></script> ## Go To Slide Index Go to slide Index. First index is 0 <script async src="//jsfiddle.net/Wlada/y0nrfL75/embed/result,js,html/"></script> ## Sizes Slide width and height configured and five slides added to 3D Carousel <script async src="//jsfiddle.net/Wlada/9cn9vapn/embed/result,js,html,css/"></script> ## Perspective Perspective and space between slide configured. seven slides added to 3D Carousel, three of them are displayed. <script async src="//jsfiddle.net/Wlada/mrsrqwox/embed/result,js,html,css/"></script> ## Scaling Inverse scaling and space between slide configured. five slides added to 3D Carousel <script async src="//jsfiddle.net/Wlada/qdys1p2v/1/embed/result,js,html,css/"></script> ## Flip Slider Perspective, space between slides and number of displayed configured. Seven slides added to 3D Carousel <script async src="//jsfiddle.net/Wlada/fp646v7f/embed/result,js,html,css/"></script> ## 3d Disabled 3d mode is disable, space between slide is set to slide width, clickable is disabled and controls are visible. <script async src="//jsfiddle.net/Wlada/34d6uqpw/embed/result,js,html/"></script> <style type="text/css">iframe { height: 400px; }</style>