HTML5-based jquery Carousel plugin Flickerplate

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