Swipe banner with navigation buttons and progress bar: use the jQuery Cycle2 plugin

When working on a web project, a task was received from the customer to make a special banner on the main page of the site.

Banner must meet the following requirements:

1. A banner consists of several images, they are automatically turned over after a certain time interval. In our example banners 5.
2. Each picture banner is an active link to a particular page of the site (for example, with special offers).
3. Under the banner there are buttons for switching banners. The button corresponding to the current banner is highlighted in a different color (block 1 in the figure).
4. A progress bar is located under the banner and above the buttons: a colored line, smoothly moving from left to right as each banner is shown. By analogy with the progress bar in the video player when playing video. This is block 2 in the figure.

This is what the designer drew and needed to be implemented:
')


Found a suitable library: this is a jQuery Cycle2 plugin.

Link to the site of the plugin with detailed documentation and examples: http://jquery.malsup.com/cycle2/ .

Link to the download page of the plugin: http://jquery.malsup.com/cycle2/download/ .

Banner implementation

You can get acquainted with all the subtleties and settings when using the Cycle2 plugin on the documentation page: http://jquery.malsup.com/cycle2/api/ , or by studying the examples: http://jquery.malsup.com/cycle2/demo/ . We will analyze only the solution of our problem.

In the head section of the page add links to jQuery and Cycle2. On our site they are in the / js / directory:

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

The HTML for the five banners on the page looks like this:

 <div id="content-ob" class="cycle-slideshow" data-cycle-fx="scrollHorz" data-cycle-timeout="10000" data-cycle-speed="1000" data-cycle-slides="a" data-cycle-pager=".custom-pager" data-cycle-pager-template=" <a href=# class='custom-pager-button'> </a>" > <a href="/page1.html"><img src="/img/pic1.jpg" /></a> <a href="/page2.html"><img src="/img/pic2.jpg" /></a> <a href="/page3.html"><img src="/img/pic3.jpg" /></a> <a href="/page4.html"><img src="/img/pic4.jpg" /></a> <a href="/page5.html"><img src="/img/pic5.jpg" /></a> <div id="progress"></div> <div class="custom-pager"></div> </div> 

Let's sort the html-code.

The banner block is enclosed in a div tag with id = "content-ob". We use this id in the css-file to set some individual parameters of the location of the block that are not related to our article.

• Attribute

   class= "cycle-slideshow" 

  is responsible for converting our block into scrolling banner. This attribute is important; if present, the Cycle2 library converts a block.

•  data-cycle-fx= "scrollHorz" 

  - specify the method of turning the banners horizontally.

•  data-cycle-timeout= "10000" 

  - time of displaying each banner in milliseconds, i.e. we have 10 seconds to display the banner.

•  data-cycle-speed= "1000" 

  - time to animate banner turning, 1 second.

•  data-cycle-slides= "a" 

  - this attribute indicates which nested tag contains the scrolling blocks. Since we leaf through the blocks

   <a href= "/pageX.html"><img src= "/img/picX.jpg" /></a> 

  then the tag is a.

•  data-cycle-pager= ".custom-pager" 

  - selector for the block of navigation buttons. We use a non-standard block, because The standard unit does not suit us by design.

•  data-cycle-pager-template= " <a href=# class='custom-pager-button'> </a>" 

  - navigation button template.

As you might guess, the lines of the form:

 <a href="/page1.html"><img src="/img/pic1.jpg" /></a> <a href="/page2.html"><img src="/img/pic2.jpg" /></a> ... 

are switchable banners with links to site pages.

Code

 <div id= "progress" ></div> 

- a block for drawing a progress bar.

Code

 <div class= "custom-pager" ></div> 

- block for drawing navigation buttons.

Consider the CSS styles for our banner.

 .custom-pager{ /*  */ margin-left:435px; margin-top:5px; overflow:hidden; } a.custom-pager-button{ /*   */ display:block; float:left; margin-right:5px; width:29px; height:13px; overflow:hidden; background-image:url(/img/newdis/ob-in.png); background-position:left top; background-repeat:no-repeat; cursor: pointer; } .custom-pager a.cycle-pager-active{ /*    */ background-image:url(/img/newdis/ob.png) !important; cursor: pointer; } .custom-pager > * { cursor: pointer;} /*      -   */ #progress { /*  */ margin-top:3px; height: 3px; width: 0px; background: #860b70; z-index: 500; } 

With these parameters, everything will work with us, except for the progress bar.

To implement the progress bar, the code from the Cycle2 example was improved: http://jquery.malsup.com/cycle2/demo/progress.php .

Implementing the progress bar animation

In the example, the progress bar moves from 0 to 100% when each banner is shown. We also need to make the progress bar look like video playback in a video player - it would move smoothly from 0 to 100% as all five banners are shown.

Here is the result:

 var progress = $('#progress'), slideshow = $( '.cycle-slideshow' ); /*   -       */ slideshow.on( 'cycle-initialized cycle-before', function( e, opts ) { if(opts.slideNum==undefined) number=1; /*       undefined,   */ else number=opts.slideNum; number--; w=Math.round(100*number/opts.slideCount); /*     %   */ progress.stop(true).css( 'width', w+'%' ); /*     */ }); /*    -             */ slideshow.on( 'cycle-initialized cycle-after', function( e, opts ) { if(opts.slideNum==undefined) number=1;/*       undefined,   */ else number=opts.slideNum; w=Math.round(100*number/opts.slideCount); /*    %   */ if(w>100) w=100; //    /*         %   */ progress.animate({ width: w+'%' }, opts.timeout, 'linear' ); }); 

As can be seen from the comments to the code, two event handlers are used: the start of the banner switching animation and the end of the banner switching animation. An opts object is passed to the handlers, which contains the properties of the block of banners.

In the handler of the start of switching the banner, we stop the animation at the position of the previous banner, i.e. banner that was before the switch.

Then, in the handler of the end of the banner switching, we resume the animation from its current position to its position relative to the current banner, i.e. banner that appeared after the switch.

The index of the current banner we can find out using the opts property of the opts.slideNum object.

The total number of banners we recognize in the property opts.slideCount.

Finally, we can specify the time interval for the animation to be equal to the show time by recognizing the show time in the opts.timeout property. We set this value in html-code using the data-cycle-timeout = "10000" attribute.

Problem solved!