jQuery plugin – cycle: Slideshow of your own in a sec

The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and much more.

 

Requires: Javascript, jquery

Using:

<div class="classObject">
<img src="img1.jpg" alt="" />
<img src="img2.jpg" alt="" />
<img src="img3.jpg" alt="" />
</div>

<script type="text/javascript" src="jquery.js">
</script>
<script type="text/javascript" src="jquery.cycle.js">
</script>
<script type="text/javascript">
  $(document).ready(function(){
       $('#classObject').cycle({
               fx:'shuffle',
               shuffle:{
                         top:-230,
                         left:230
                       },
               easing:'easeInOutBack',
               delay:-2000
       });
  });
</script>
Explanation:
          Line 12: it means check if document is ready to apply javascript over it.
          Line 13: $(‘#classObject’) selects the object having class name classObject. # is called selector. We apply a method cycle over this class.
          Line 14: fx(function/effect) is required parameter which can be defined in many ways here it is shuffle.
          Line 15: shuffle is optional, if its not defined there is default value top:15px and left: width of container. Here both are defined in line 16 and 17.
         Line 19: easing can only be used with easing plugin of jquery.
         Line 20: delay is also required parameter, which takes time for effect for single transition in milliseconds.

 

Note:

  • Take care of the brackets people usually get it wrong. 
  • “id” can also be used instead of class (instead of #(hash) .(dot) is used as selector). 
  • jquery.js is required.
  • jquery easing plugin will make it great.
  • Give 3-4 div same class name, by this way there will equal number of div having slideshow of there own. Like if you need multiple slides at a time slideshow.
  • There are many other cool fx. You can also create custom.
  • There are also some other parameter apart from fx, delay etc. Take a look into the coding of jquery.cycle for other parameters.

There some great demos on the site of jQuery cycle. You can also find easing plugin on this site.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.