jQuery | Flickerplate Plugin
Last Updated :
31 Jul, 2024
jQuery provides Flickerplate plugin that helps our programmers to create sliders for websites that can cycle through a list of background images along with dot navigation feature and animated arrows. The plugin consists of many more libraries that are responsible for touch detections and events such as custom Modernizr and jQuery Finger library. With the help of this plugin, programmer you can create and design effective sliders in modern applications that can easily flick through web content.
Note: Please download the jQuery Flickerplate plugin to your working folder and include the required files in the head section of your code as shown below .
Include the required files for flickerplate plugin:
<link href=”flickerplate.css” rel=”stylesheet” type=”text/css”/> <script src=”flickerplate.min.js”></script>
<script src=”jquery-v1.10.2.min.js”></script>
<script src=”modernizr-custom-v2.7.1.min.js”></script>
<script src=”jquery-finger-v0.1.0.min.js”></script>
Examples 1: The Flickerplate plugin is executed by javascript and it can be utilised by containing class of the HTML code designed for user interface. The following example code demonstrates the simple call of flicker() function of the plugin.
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<title>jQuery Flickerplate Plugin </title>
<style>
html {
font-family: Arial, Helvetica, sans-serif;
background-color: #ffffff;
font-weight: 200;
}
body {
margin: 0px;
top: 0px;
padding: 0px;
bottom: 0px;
}
</style>
<!--Required javascript-->
<script src="jquery-v1.10.2.min.js"
type="text/javascript">
</script>
<script src="modernizr-custom-v2.7.1.min.js"
type="text/javascript">
</script>
<script src="jquery-finger-v0.1.0.min.js"
type="text/javascript">
</script>
<!--Include flickerpate files-->
<link href="flickerplate.css"
type="text/css" rel="stylesheet">
<script src="flickerplate.min.js"
type="text/javascript">
</script>
<script>
$(document).ready(function () {
$('.flicker-example').flicker();
});
</script>
</head>
<body>
<div class="flicker-example" data-block-text="false">
<ul>
<li data-background="images/bgImage3.jpg">
<div class="flick-title" style="color:black">
Write from home
</div>
<div class="flick-sub-text" style="color:black">
When the whole nation is on the verge of
lockdown due to COVID-19 pandemic and all
Geeks across the country have to stay
indoors,how would it be if you can use
this free time to sharpen your skills?
</div>
</li>
<li data-background="images/bgImage1.jpg">
<div class="flick-title" style="color:black">
Get your dream job
</div>
<div class="flick-sub-text" style="color:black">
As the placement season is back so are we
to help you ace the interview. We have
selected some most commonly asked and
must do practice problems for you.
</div>
</li>
<li data-background="images/bgImage2.jpg">
<div class="flick-title" style="color:#000000">
Must do coding questions
</div>
<div class="flick-sub-text" style="color:#000000">
We have selected some most commonly asked
and must do practice problems for you. You
can also take part in our mock placement
contests which will help you learn different
topics and practice at the same time,
simulating the feeling of a real placement
test environment.
</div>
</li>
</ul>
</div>
</body>
</html>
Note: In the above HTML code, data-block-text is set to "false" to remove the box block around the title and sub-text provided by the programmer.
Output:
Example 2: The Flickerplate plugin is easily configurable that can be done in different ways such as setting up options in the jQuery code or by setting data attributes on the actual element of the page. In the following example, please notice the options set in the script part and the comments written. The user can understand by relating it to the output image given below.
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<title>jQuery Flickerplate Plugin </title>
<style>
html {
font-family: Arial, Helvetica, sans-serif;
background-color: #ffffff;
font-weight: 200;
}
body {
margin: 0px;
top: 0px;
padding: 0px;
bottom: 0px;
}
</style>
<!--Required javascript-->
<script src="jquery-v1.10.2.min.js"
type="text/javascript">
</script>
<script src="modernizr-custom-v2.7.1.min.js"
type="text/javascript">
</script>
<script src="jquery-finger-v0.1.0.min.js"
type="text/javascript">
</script>
<!--Include flickerpate files-->
<link href="flickerplate.css" type="text/css"
rel="stylesheet" />
<script src="flickerplate.min.js"
type="text/javascript">
</script>
<!--To make flicker touch enabled-->
<script src="hammer-v2.0.3.min.js"
type="text/javascript">
</script>
<script>
$(document).ready(function () {
$('.flicker-example').flicker({
// Traverse back and forth
// between flicks
arrows: true,
// Set background colour to text
block_text: true,
// Set auto slide on load
auto_flick: true,
// Set time delay between 2 flicks
auto_flick_delay: 2,
// Pressing the next arrow will
// get you to beginning
arrowsConstraint: false,
// Sets the starting flick
// to 2nd navigation dot
flick_position: 2,
// Enable the dot navigation
dot_navigation: true,
// Dot navigation is set in the left side
dot_alignment: 'left',
// Darkens the navigation dot
theme: 'dark',
// Set the type of animation
flick_animation: 'transition-slide'
});
});
</script>
</head>
<body>
<div class="flicker-example" data-block-text="false">
<ul>
<li data-background="images/bgImage3.jpg">
<div class="flick-title" style="color:black">
Write from home
</div>
<div class="flick-sub-text" style="color:black">
When the whole nation is on the verge of
lockdown due to COVID-19 pandemic and all
Geeks across the country have to stay indoors,
how would it be if you can use this free
time to sharpen your skills?
</div>
</li>
<li data-background="images/bgImage1.jpg">
<div class="flick-title" style="color:black">
Get your dream job
</div>
<div class="flick-sub-text" style="color:black">
As the placement season is back so are we
to help you ace the interview. We have
selected some most commonly asked
and must do practice problems for you.
</div>
</li>
<li data-background="images/bgImage2.jpg">
<div class="flick-title" style="color:#000000">
Must do coding questions
</div>
<div class="flick-sub-text" style="color:#000000">
We have selected some most commonly asked
and must do practice problems for you. You
can also take part in our mock placement
contests which will help you learn different
topics and practice at the same time,
simulating the feeling of a real placement
test environment.
</div>
</li>
</ul>
</div>
</body>
</html>
Output:
Similar Reads
jQuery Page Piling Plugin jQuery pagePiling.js plug-in is a rich feature available for programmers for piling more than one layout section, one over the other, and accessing each page by URL or mouse scrolling or side bullets navigation. This feature provides all type of smooth vertical, horizontal, and side navigations to t
5 min read
jQuery | Flickerplate Plugin jQuery provides Flickerplate plugin that helps our programmers to create sliders for websites that can cycle through a list of background images along with dot navigation feature and animated arrows. The plugin consists of many more libraries that are responsible for touch detections and events such
5 min read
jQuery Multiscroll Plugin jQuery provides multiscroll.js plugin which helps programmers to create split web pages along with divided multiple vertical scrolling panels.Note: Please download the jQuery multiscroll plugin to your working folder and include the required files in the head section of your code as shown below. Dow
3 min read
jQuery RowGrid Plugin jQuery provides a very simple, user-friendly and responsive rowGrid plugin that helps programmers to display images in a straight row. It is very lightweighted and supports infinite scrolling feature. Real examples of rowGrid are Google+ images or Google image search that appears in a straight row g
4 min read
jQuery Alertify Plugin jQuery framework provides alertify.js plugin that provides pre-designed customizable notification system along with interactive browser dialogs. This extensible and themeable plugin is very useful for developers providing an optimized version of alert messages with stacking up to feature. This small
5 min read
jQuery Image ProgressBars Plugin In this article, we will learn how to implement image ProgressBar feature using the jQuery Image ProgressBar plugin. Note: Please download the jQuery Image ProgressBar plugin in the working folder and include the required files in the head section of your HTML code. <link href=â€progressbar.css†r
2 min read
jQuery DrawSVG Plugin SVG or Scalar Vector Graphics is Extended Markup Language-based graphics supporting 2 dimensional animations of images enhancing interactiveness. The specifications of SVG are open standards by World Wide Web Consortium defined in XML text files. These files can be changed or created with any drawin
4 min read
jQuery Tagsort Plugin jQuery provides Tagsort plugin that is used for displaying tags or filter elements based on different tags in a DOM. The plugin takes data-attributes of HTML page structure and dynamically creates user-friendly tags used for filtering elements. The filtration of elements are done in many ways that a
9 min read
jQuery Logos Distort Plugin The jQuery provides LogosDistort plugin which helps in creating or animating a parallax environment for 3D scenes in the user browser. It uses full-page matrix3D perspective logos distortions for transforming base on mouse movement. You have to download the required files in the working folder so th
4 min read
jQuery Filer Plugin jQuery provides a quick jQuery Filer uploader plugin for easy implementation of uploading the files. It provides features like instant uploading of files, file append, file removal, multiple selections, drag and drop support along with other file validations.Download the required files to include it
2 min read