基於 html5的 jquery 輪播外掛程式 flickerplate

標籤：wan   select   class   options   pac   contain   either   apple   外掛程式   

https://github.com/chrishumboldt/Flickerplate
官網

 

  
 <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>
 

引入上面3個   hammer-v是響應式用到的支援觸控

 

  
 <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>
 

上面是設定背景圖片的  ，  官網只提供了設定普通文字 ， 只是在li 下面加兩個標籤即可

<li data-background="image-url.jpg">            <div class="flick-title">Example Heading</div>            <div class="flick-sub-text">Sub Text</div>        </li>

最新版初始化

 

  
new flickerplate({
  
 selector: ‘.lb_container‘,
  
 animation: ‘transition-fade‘,
  
 autoFlick: false,
  
 dotAlignment: ‘right‘,
  
 theme: ‘dark‘
  
});
 

api 解釋還沒有中文

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 are 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 will navigate you to the beginning again should you have a false 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 two options, light and dark. This will set the font colour, block text colour, arrows and dots to either dark or light.

但是有原版的解釋  對照參考即可

屬性/方法	類型	預設值	說明
arrows	布爾值	true	顯示左右箭頭控制
arrows_constraint	布爾值	false	左右到頭了禁止點擊
auto_flick	布爾值	true	自動播放
auto_flick_delay	整數	10	自動播放間隔，以秒為單位
block_text	布爾值	true	文字顯示背景陰影
dot_navigation	布爾值	true	顯示圓點導航
dot_alignment	字串	center	圓點導航位置
flick_animation	字串	transition-slide	動畫切換方式，可選 transition-slide、transform-slide、jquery-slide、scroller-slide 4種
flick_position	整數	1
inner_width	布爾值	false
theme	字串	light	設定主題，可選 light、dark 2種

基於 html5的 jquery 輪播外掛程式 flickerplate