HTML5-based jquery Carousel plugin Flickerplate

Source: Internet
Author: User

Https://github.com/chrishumboldt/Flickerplate
Website

  
 
  1. <link href="${baseURL}/themes/default/css/flickerplate.css" rel="stylesheet" type="text/css">
  2. <script src="${baseURL}/themes/default/js/hammer-v2.0.3.js"></script>
  3. <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

  
 
  1. <div class="lb_container" style="height: 200px;">
  2. <ul>
  3. <c:forEach items="${requestScope.housephotoes}" var="housev">
  4. <li data-background="${housev.APPPHOTOURL}">
  5. </li>
  6. </c:forEach>
  7. </ul>
  8. </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
  
 
  1. new flickerplate({
  2. selector: ‘.lb_container‘,
  3. animation: ‘transition-fade‘,
  4. autoFlick: false,
  5. dotAlignment: ‘right‘,
  6. theme: ‘dark‘
  7. });


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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.