in-a-row-Carousel jQuery plugin

inarowCarousel is a jQuery plugin.
It generates the left and right arrow buttons to sequentially change the current image and the round buttons below the images to go straight to an image.

Download the files from gitHub

See an example

Usage

Add to your HTML page the necesary scripts to jQuery core and plugin:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script src="jquery.inarowCarousel.js" type="text/javascript"></script>

 

Your HTML page should have a list of images like this:

<div id="inarowCarousel">
    <div class="covers">
        <a href="images/image1.jpg">
            <img src="images/image1.jpg" alt="image1" />
        </a>
        <a href="images/image2.jpg">
            <img src="images/image2.jpg" alt="image2" />
        </a>
        <a href="images/image3.jpg">
            <img src="images/image3.jpg" alt="image3" />
        </a>
        <a href="images/image4.jpg">
            <img src="images/image4.jpg" alt="image4" />
        </a>
    </div>
</div>

 

Or you could want to put just the images without any link:

<div class="inarowCarousel">
    <div class="covers">
        <img src="images/image1.jpg" alt="image1" />
        <img src="images/image2.jpg" alt="image2" />
        <img src="images/image3.jpg" alt="image3" />
        <img src="images/image4.jpg" alt="image4" />
    </div>
</div>

 

Finaly, add this script in the header section of your HTML:

<script type="text/javascript">
//<![CDATA[

  $(document).ready(function(){
    $('.inarowCarousel').inarowCarousel({
      spacing: 1024,
      height: 422,
      beforeMoveCallback: function(leavingItem, commingItem){
        return confirm('¿Do you want to change the image?');
      },
      afterMoveCallback: function(leavingItem, commingItem){
        alert('This is the afterMoveCallback');
        return true; // This can be omitted.
      },
    });
  });

//]]>
</script>

 

License


MIT License
Copyright (c) 2012, Pedro Martín Valenciano (pedro -[at]- lightbyte [dot] org)

Sat, Sep 15th 2012, 20:36 | Git, Javascript

1 Comment

Pedro Tue, May 7th 2013, 13:59
If you have any problem you can ask me by comment or github. I'm using inarowCarrousel in every project I need it :)

Add New Comment

Your name:
Your e-mail:
Your web page:
Comment:
I would like to receive new comment notification.
Security code: