Https://github.com/chrishumboldt/Flickerplate
Website
<link href="${baseURL}/themes/default/css/flickerplate.css" rel="stylesheet" type="text/css">
<script src="${baseURL}/themes/default/js/hammer-v2.0.3.js"></script>
<script src="${baseURL}/themes/default/js/flickerplate.js"></script>
The introduction of the above 3 hammer-v is responsive to the use of touch-enabled
<div class="lb_container" style="height: 200px;">
<ul>
<c:forEach items="${requestScope.housephotoes}" var="housev">
<li data-background="${housev.APPPHOTOURL}">
</li>
</c:forEach>
</ul>
</div>
Above is set the background picture, the official website only provides the setting normal text, only under Li add two tags can
<li data-background="image-url.jpg"> <div class="flick-title">Example Heading</div> <div class="flick-sub-text">Sub Text</div> </li>
Latest Version Initialization
new flickerplate({
selector: ‘.lb_container‘,
animation: ‘transition-fade‘,
autoFlick: false,
dotAlignment: ‘right‘,
theme: ‘dark‘
});
API explanation not yet Chinese
Name |
Default |
Options |
Description |
animation |
transform-slide |
transform-slide, Transform-slide, Transition-fade, transition-slide |
choose The animation type you want. |
arrows |
true |
true, false |
Arrows is used to navigate back and forth between the flicks. |
Arrowsconstraint |
false |
true, false |
When you get to the end of the flicks pressing the next arrow would navigate you to the beginning again should you have a f Alse constraint. The same applies to the previous arrow. |
autoflick |
true |
true, false |
Sets the flick to run automatically. A manual flick resets the delay. |
Autoflickdelay |
10 |
|
set the Delay (in seconds) between each auto flick. |
Dotalignment |
center |
center, left, right |
set The horizontal alignment of the dot navigation. |
Dots |
True |
True, False |
Dot navigation is used to indicate and navigate between the flicks. |
Position |
1 |
|
Set the starting flick. |
Theme |
Light |
Light, Dark |
Currently the options, light and dark. This would set the font colour, block text colour, arrows and dots to either dark or light. |
But with the original interpretation of the reference can be
Properties/Methods |
type |
Default Value |
Description |
Arrows |
Boolean value |
True |
Show left and RIGHT arrow controls |
arrows_constraint |
Boolean |
false |
Around the end of the stop click |
auto_flick |
Boolean |
true |
auto play |
auto_flick_delay |
integer |
10 |
Auto play interval, in seconds |
block_text |
Boolean |
true |
text display background Shadow |
dot_navigation |
Boolean |
true |
show dot navigation |
dot_alignment |
string |
center |
dot navigation position |
flick_animation |
string |
transition-slide |
animation toggle mode, optional Transition-slide, Transform-slide, Jquery-slide, scroller-slide 4 kinds of |
flick_position |
integer |
1 |
|
inner_width |
Boolean |
false |
|
Theme |
String |
Light |
Set theme, optional light, dark 2 kinds
|
HTML5-based jquery Carousel plugin Flickerplate