Fully Responsive & Touch-enabled jQuery Carousel Plugin - Flickerplate

File Size: 0.98 MB
Views Total: 21892
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Fully Responsive & Touch-enabled jQuery Carousel Plugin - Flickerplate

Flickerplate is a jQuery plugin for creating a trendy fashion carousel/slider which allows you cycle through images with animated arrows and dots navigation.

More Feathers:

  • Infinite loop like a carousel.
  • Responsive design.
  • Themable via custom CSS styles.
  • Touch swipe support with jQuery finger plugin.
  • Auto slide on loaded.
  • Custom slide animations with CSS3 transitions. Transform is used on mobile devices by default.

How to use it:

1. Include required javascript libraries in the html document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/min/jquery-finger-v0.1.0.min.js" type="text/javascript"></script>

2. Include jQuery Flickerplate's javascript and CSS files after jQuery library.

<link href="css/flickerplate.css"  type="text/css" rel="stylesheet">
<script src="js/min/flickerplate.min.js" type="text/javascript"></script>

3. Create the html for an image carousel with text contents.

<div class="demo">
<ul>

<li data-background="img/1.jpg">
<div class="flick-title">Title 1</div>
<div class="flick-sub-text">Description 1</div>
</li>

<li data-background="img/2.jpg">
<div class="flick-title">Title 2</div>
<div class="flick-sub-text">Description 2</div>
</li>

<li data-background="img/3.jpg">
<div class="flick-title">Title 3</div>
<div class="flick-sub-text">Description 3</div>
</li>

...

</ul>
</div>

4. Initialize the carousel with available options. You can pass options to the carousel by using the data-options attributes on your legend, or by passing them in on initialization.

<script>
$(document).ready(function(){
$('.demo').flicker({
// navigate back and forth between the flicks
arrows: true,

// 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.
arrows_constraint: false,

// Sets the flick to run automatically. A manual flick resets the delay.
auto_flick: true,

// Set the delay (in seconds) between each auto flick.
auto_flick_delay: 10,

// Add a background colour to the text.
block_text: true, 

// Set the starting flick.
flick_position: 1

theme: 'light', // light or dark

// Choose the animation type you want. Options are transition-slide, transform-slide, jquery-slide, scroller-slide, transition-fade, jquery-fade. 
// Transform is used on mobile devices by default.
flick_animation: 'transition-slide', 

// Dot navigation is used to indicate and navigate between the flicks.
dot_navigation: true,

// Set the horizontal alignment of the dots to either left, center or right.
dot_alignment: 'center' // left, center or right.
});
});
</script>

Change log:

2015-07-06

  • Data Attribute Fix

2014-09-28

  • Data Attribute Fix

2014-09-27

2014-07-12

  • Updated Blueplate

2014-04-15

  • Added more themes.

2014-03-25

2014-03-23

  • Fixed Dark Theme Bug

2014-03-10

  • Fixed Modernizr Touch Issue
  • Small Text Change

This awesome jQuery plugin is developed by chrishumboldt. For more Advanced Usages, please check the demo page or visit the official website.