What is jMyCarousel?

jMyCarousel is a free, highly customizable, non obstrusive carousel written in javascript, based on jquery, and created to suit any need. It enables to display a list or gallery of images in a dynamic way. It can be adapted very easily to any layout, and the way it animates the picture is adaptable. It provides the following features:

  • size configuration in pixel, percent, and number of pictures
  • interchangeable buttons
  • circular animation
  • optional scrolling element by element
  • specify a custom event to trigger scrolling
  • cross browser compatibility : Firefox 1.5+, IE 6.0+, Safari 2.0+, Opera 9.0+

And all this takes only 4Kb !

download github

How does it work?

It works only with a few lines of code :

The files to insert in your HTML

Don't forget to also include jquery!

<link rel="stylesheet" type="text/css" href="jMyCarousel.css" />  
<script type="text/javascript" src="jMyCarousel.js"></script>

The HTML markup for the carousel

You would have noticed that the size of the image must be precised. This is to avoid display bugs.

<div class="jMyCarousel">
    <ul>
        <li><img src="img/1.jpg" width="200" height="150"/></li>
        <li><img src="img/2.jpg" width="200" height="150"/></li>
        <li><img src="img/3.jpg" width="200" height="150"/></li>
        <li><img src="img/4.jpg" width="200" height="150"/></li>
        <li><img src="img/5.jpg" width="200" height="150"/></li>
        <li><img src="img/6.jpg" width="200" height="150"/></li>
    </ul>
</div>
            

The Javascript code

In the example below, we set a carousel with a width of 100%.

$(function() {
    $(".jMyCarousel").jMyCarousel({
        visible: '100%'
    });
});

JMyCarousel has a lot of configuration options :

Optionusage
btnPrevthe previous button. Can be set outside ot the carousel by giving its jquery reference, $('#layerId') for example.
btnNextnext button. Can be set as above
mouseWheelmouseWheel activation or not. true or false.
autowhether the carousel start scrolling automatically (manual mode deactivated, no arrows). true or false.
speedspeed of the animation. value in ms.
easingcustom animation effect, 'linear' as default. Param is relative to the jquery framework.
verticalwhether the carousel is displayed horizontally or vertically. true or false.
circularwhether the animation must scroll in a cicular way, without stopping. true or false.
visiblesize of the carousel.
startwhat position in pixels the carousel will start at. value in pixels.
stepthe step size of each animation. value in pixels.
eltByEltshall the carousel move element by element, or in a linear way ? true or false.
evtStartevent customization : start event. 'mouseover', 'click', etc..
evtStopevent customization : stop event. 'mouseout', 'mouseup', etc...

Wait, why another carousel?

Yes, a lot of carousels running with JQuery are already available.

However, we have decided to write jMyCarousel to suit our own needs as we were developing a website that needed a carousel which was able to scroll photos in a linear way (not one by one) and having 100% width.

After implementing those features, we decided that we should make a customizable carousel suiting everyone's need, as we had already estabished a good base. This is how jMyCarousel was born!

Credits

jMYCarousel is a free software based on JQuery and on JCarouselLite, another jquery carousel plugin by Ganeshji Marwaha.

Licence

jMyCarousel is under the GPL V3 licence onwards. You can freely modify and redistribute it. A copy of the licence is included in the archive.