The Ultimate Managed Hosting Platform
Home Tutorial Step By Step To Create Content Slider using jFlow, A Minimalist jQuery...

Step By Step To Create Content Slider using jFlow, A Minimalist jQuery Plugin

There are a lot of free scripts to create a content slider. One of the example is SmoothGallery by JonDesign. But, if you are using jQuery and don’t want to install another JavaScript library, then you may need to consider jQuery slider plugin.

Today, i am going to provide a tutorial on using jFlow, a minimalist jQuery plugin to create a content slider. Readers are required to have basic XHTML/CSS and JavaScript skills. I will provide a download link after this tutorial. This is the first tutorial post on WebDesignBooth, and i will write more tutorials in future.

Best Cloud Hosting for Wordpress
Best Cloud Hosting for Wordpress

content-slider

So, let’s start to create our content-slider now. Download both jQuery and jFlow before you proceed.

Best Cloud Hosting for Wordpress
Best Cloud Hosting for Wordpress
    1. Create a style.css file, and insert the following code into the file:
      #jFlowSlide{ background:#DBF3FD; font-family: Georgia; }
      #myController { font-family: Georgia; padding:2px 0;  width:610px; background:#3AB7FF; }
      #myController span.jFlowSelected { background:#43A0D5;margin-right:0px; }
      
      .slide-wrapper { padding: 5px; }
      .slide-thumbnail { width:300px; float:left; }
      .slide-thumbnail img {max-width:300px; }
      .slide-details { width:290px; float:right; margin-left:10px;}
      .slide-details h2 { font-size:1.5em; font-style: italic; font-weight:normal; line-height: 1; margin:0; }
      .slide-details .description { margin-top:10px; }
      
      .jFlowControl, .jFlowPrev, .jFlowNext { color:#FFF; cursor:pointer; padding-left:5px; padding-right:5px; padding-top:2px; padding-bottom:2px; }
      .jFlowControl:hover, .jFlowPrev:hover, .jFlowNext:hover { background: #43A0D5; }
  1. Open your main document and include the style.css, jQuery, and jFlow in the <head> tag.
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    <script language="javascript" type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script language="javascript" type="text/javascript" src="jquery.flow.1.2.js"></script>
  2. Then add this simple JavaScript code to define the settings for jFlow
    <script type="text/javascript">
    $(document).ready(function(){
        $("#myController").jFlow({
            slides: "#slides",  // the div where all your sliding divs are nested in
            controller: ".jFlowControl", // must be class, use . sign
            slideWrapper : "#jFlowSlide", // must be id, use # sign
            selectedWrapper: "jFlowSelected",  // just pure text, no sign
            width: "610px",  // this is the width for the content-slider
            height: "235px",  // this is the height for the content-slider
            duration: 400,  // time in miliseconds to transition one slide
            prev: ".jFlowPrev", // must be class, use . sign
            next: ".jFlowNext" // must be class, use . sign
        });
    });
    </script>

    Think #slides as a container, which contain all slides, while .jFlowControl is the controller which let us go to the individual slide. As you can see from the style.css, we have 300px .slide-thumbnail to display our image, 290px .slide-details to display our title and description. Besides these, we have 10px margin-left for the .slide-description and 5px padding for the .slide-wrapper. So totally we need 610px width. For the “height” setting, you need to estimate the maximum height for your content. Here, i will use 235px as an example.

  3. Now is the turn to create the individual slide. The slide is contained in the #slides div. Here, i will conly show one slide. You may refer the source code for more info.
    <div class="slide-wrapper">
        <div class="slide-thumbnail">
            <!-- image here -->
        </div>
        <div class="slide-details">
            <h2><!-- title here --></h2>
            <div class="description">
                <!-- description here. -->
            </div>
        </div>
        <div class="clear"></div>
    </div>

    We will wrap everything in a .slide-wrapper class, and float our thumbnail to the left while our content to the right. Don’t forget to clear the floats also. Replace image, title, and description with your own content.

  4. After that, we may add controls to the slides, which are resides in a #myController div.
    <span class="jFlowPrev">Prev</span>
    <span class="jFlowControl">1</span>
    <span class="jFlowNext">Next</span>

    The .jFlowPrev and .jFlowNext are necessary controls to go to previous and next slides, while .jFlowControl is a “button” to jump to any particular slide. The number of .jFlowControl span is depends on the number of slides you have.

  5. That’s all!! We had done everything. You can view the demo or download the source code to use in your own project.

Must Read

The 5 Best Email Marketing Tools for Ecommerce This 2019

Operating an eCommerce store has unique challenges that not all email platforms address equally. That's why it is vital to choose an email marketing...

5 Website Design Tips That Will Make Your Business Boom

When designing a website, take careful precision to dedicate as much time to every facet as possible. Consider the user, consider the pathways they...

Would Product Visualisation Help Your Company?

If you’re running a company, there’s no doubt you’ve thought about how you can best present your products and services to the customer.That’s the...

10 Actionable Tips to Improve the Speed of your WordPress Website

Page speed is an important issue for website users. Pages that load fast can help to decrease bounce rate, improve user experience and improve...

How Much Does It Cost to Build an App in 2019

Software application building is one of the fastest growing fields for over one decade now. The major mobile app stores like Google Play and...
Load WordPress Sites in as fast as 37ms!Step By Step To Create Content Slider using jFlow, A Minimalist jQuery Plugin 1