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.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
test
README.md
jquery.inarowCarousel.js

README.md

inarowCarousel 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.

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>

Author

Pedro Martín Valenciano (@pmv79)

License

MIT License

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