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

• Small Update To Animations

2014-07-12

• Updated Blueplate

2014-04-15

• Added more themes.

2014-03-25

• List Selector, Arrow Navigation

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.