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 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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.