Tuesday, May 19, 2020

jQuery Flickerplate Plugin



Hello guys! Welcome to a new section of my tutorial on jQuery. In this tutorial, i will be discussing about another type of jQuery Plug-in. We are going to be looking at the jQuery flickerplate plugin.

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

Example

Below is a simple Flickerplate example -

<!DOCTYPE  html  lang = "en">
<html   xmlns =  "https://www.w3.org/1999/xhtml">
     <head>
          <meta  charset = "utf-8">
          <meta  name = "viewport"  content = "width =  device-width, 
               initial-scale = 1.0,  maximum-scale = 1.0,  user-scalable = no" >

          <script  src = "/jquery/src/flickerplate/js/min/jquery-v1.10.2.min.js"
               type = "text/javascript">
          </script>

          <script  src = "/jquery/src/flickerplate/js/min/modernizr-custom-v2.7.1.min.js"
               type = "text/javascript">
          </script>

          <script  src = "/jquery/src/flickerplate/js/min/hammer-v2.0.3.min.js"
               type = "text/javascript">
          </script>

          <link  type = "text/css"  rel = "stylesheet"
               href = "/jquery/src/flickerplate/css/flickerplate.css">

          <script  src = "'/jquery/src/flickerplate/js/min/flickerplate.min.js"
               type = "text/javascript">
          </script>

          <link  type = "text/css"  rel = "stylesheet"
               href = "/jquery/src/flickerplate/css/demo.css">

          <script  type = "text/javascript">
               $( function( )  {
                    $( '.flicker-example' ).flickerplate( {
                         auto_flick               : true,
                         auto_flick_delay    : 6,
                         flick_animation      : ' transform-slide '
                    } );
               } );
          </script>
     </head>

     <body>
          <div  class = "flicker-example">
               <ul>
                    <li  data-background = "https://genblock.com/wp-content/uploads/2020            
                         /05/download-circles-abstract-wallpaper-
                         abstract-photo-abstract-wallpaper.jpg">

                         <img  src = "https://www.webdesigntutorialz.com/about/images/kennedy.jpg"
                              style = "margin-left: 400px; ">

                         <div  class =  "flick-title">Nkpara C.</div>

                         <div  class = "flick-sub-text">
                              Nkpara is an IT professional from Rivers, Nigeria. He has more than
                              four years experience in the IT industries. He is currently running and
                              managing Web design tutorialz.
                         </div>

                    </li>
                    <li  data-background = "https://genblock.com/wp-content/uploads/2020            
                         /05/download-circles-abstract-wallpaper-
                         abstract-photo-abstract-wallpaper.jpg">

                         <img  src = "https://www.webdesigntutorialz.com/about/images/webmaster.jpg"          
                              style = "margin-left: 400px; ">

                         <div  class =  "flick-title">Webmaster</div>

                         <div  class = "flick-sub-text">
                              Webmaster is an IT professional from Lagos, Nigeria. He has more than
                              3 years experience in the IT industries. He is currently a content writer 
                              and a web developer at Web design tutorialz.
                         </div>

                    </li>
               </ul>
          </div>
     </body>
</html>


Alright guys! This is where we are wrapping it up with this tutorial. In my next tutorial post, i will be discussing about the Multiscroll plugin. Feel free to ask your questions where necessary and i will attend to them as soon as possible.

If you found this tutorial helpful and interesting, kindly use the share button to share this tutorial. Follow us on our various social media platforms available to stay updated with our latest posts. Also subscribe to our newsletter to get all our tutorials delivered directly to your emails.

Thanks for reading and bye for now.
Share:

0 comments:

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.