Fully Responsive & Touch-enabled jQuery Carousel Plugin - Flickerplate

View: 3969    Dowload: 2   Comment: 0   Post by: naruto   Category: Javascript   Fields: Other

Download  fully-responsive.zip (2.90 MB)

You need to Sign In to download the file fully-responsive.zip
If you do not have an account then Sign up for free here

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({
block_text: true, // Will class the title and sub text classes of each list item to show a background colour for easy reading. Can be applied to the containing class for a global effect or to each list item separately.
inner_width: false,
theme: 'light', // light or dark
flick_animation: 'transition-slide', // transition-slide, transform-slide, jquery-slide or scroller-slide
auto_flick: true, // Sets the carousel to run automatically.
auto_flick_delay: 10, // Set the delay (in seconds) between each auto slide.
dot_navigation: true, // Dot navigation is used to indicate and navigate between the slides.
dot_alignment: 'center', // left, center or right.
arrows: true // Arrows are used to navigate back and forth between the slides.
});
});
</script>

For more Advanced Usages, please check the demo page or visit the official website.

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.

Posted on 24-03-2014 

Comment:

To comment you must be logged in members.

Files with category

  • AngularJS and REST API

    AngularJS and REST API

    View: 147    Download: 0   Comment: 0

    Category: Javascript     Fields: Other

    This is a tutorial for those interested in a quick introduction to AngularJS and REST API. We will build the familiar Periodic Table of the Elements found in every chemistry textbook, and allow the user to select a Chemical Element by clicking on...

  • Collective Intelligence, Recommending Items Based on Similar Users' Taste

    Collective Intelligence, Recommending Items Based on Similar Users' Taste

    View: 131    Download: 0   Comment: 0

    Category: Javascript     Fields: Other

    Using Collaborative Filtering to find people who share tastes, and for making automatic recommendations based on things that other people like.

  • Think Like a Bird for Better Parallel Programming

    Think Like a Bird for Better Parallel Programming

    View: 118    Download: 0   Comment: 0

    Category: Javascript     Fields: Other

    Coding an application to run in parallel is hard, right? I mean, it must be hard or we’d see parallel programs everywhere. All we'd see are slick parallel apps that use every available core effortlessly. Instead multi-threaded apps are the exception...

  • Getting Started with the Bing Search APIs

    Getting Started with the Bing Search APIs

    View: 123    Download: 0   Comment: 0

    Category: Javascript     Fields: Other

    Bing Search API is a set of REST interfaces that find web pages, news, images, videos, entities, related searches, spelling corrections, and more in response to queries from any programming language that can generate a web request. Applications that...

  • Brief Introduction of SocketPro High Performance and Scalable Persistent Message Queue

    Brief Introduction of SocketPro High Performance and Scalable Persistent Message Queue

    View: 393    Download: 0   Comment: 0

    Category: Javascript     Fields: Other

    Continuous in-line request/result batching, real-time stream sending/processing, asynchronous data transferring and parallel computation for best performance and scalability

  • Iteration Over Java Collections with High Performance

    Iteration Over Java Collections with High Performance

    View: 109    Download: 0   Comment: 0

    Category: Javascript     Fields: Other

    Java developers usually deal with Collections such as ArrayList, HashSet, Java 8 come with lambda and streaming API helps us to easily work with Collections. In most cases, we work with few thousands of items and performance isn't a concern. But in...

  • SR2JLIB - A Symbolic Regression Library for Java

    SR2JLIB - A Symbolic Regression Library for Java

    View: 122    Download: 0   Comment: 0

    Category: Javascript     Fields: Other

    Grammar-Guided Genetic Programming library featuring: multi-threading, just-in-time compilation of individuals, dynamic class loading, and JNI interfacing with C/C++ code

  • Yet Another Fluent JDBC Wrapper in 200 Lines of Code

    Yet Another Fluent JDBC Wrapper in 200 Lines of Code

    View: 136    Download: 0   Comment: 0

    Category: Javascript     Fields: Other

    Those who are not convinced to use Hibernate to manage persistence are forced to use plain old JDBC API. Though powerful, it requires lot of typing to get it right. For example, retrieving user data from database often requires such code snippet:

 
File suggestion for you
File top downloads
Codetitle - library source code to share, download the file to the community
Copyright © 2018. All rights reserved. codetitle Develope by Vinagon .Ltd