Carousels are attractive way of putting images or other elements in the form of a slide show in our application. Showing the carousel images on the home page of web application makes the application UI attractive. If it’s an online shopping application, putting an image of upcoming discount sale with different products in the form of carousel really catches the user’s attention. In this article we will see how to use JCarousel JQuery plugin to create a simple carousel of images.

JCarousel is a JQuery plugin which can be used to create carousel. JCarousel plugin requires JQuery version 1.7 or more. Following are the steps to create simple carousel using JCarousel JQuery plugin.

  • Include the JQuery and JCarousel js files.
  • Add the required HTML markup to the page where carousel needs to be added.
  • Add the JCarousel setup code and basic required CSS.

Include the JQuery and JCarousel js files

Since JCarousel plugin requires JQuery plugin, we need to import JQuery js file and JCarousel js file to out HTML page. Following is the code snippet which should be included in our HTML page.

< script type="text/javascript" src="/path/to/jquery.js"></script>
< script type="text/javascript" src="/path/to/jquery.jcarousel.js"></script>

Add the required HTML markup to the page where carousel needs to be added

Next step is to add the required HTML element, which is nothing but our carousel content. This HTML markup should contain a root element, inside the root element, there will be a list element(it can be any element like <ul>,< div>, etc) and list items (can be < li>, < p>, etc) as shown below.

< div class="jcarousel">
    < ul>
        < li>...</li>
        < li>...</li>
    </ul>
</div>

Add the JCarousel setup code and basic CSS

Final step is to add the settings to the created carousel. Following is the code of simple carousel with basic settings. We need to call .jcarousel()  plugin method on the root element as shown below.

$(function() {
    $('.jcarousel').jcarousel({
        // Configuration goes here
    });
});

Following is the basic CSS code needed for the JCarousel to work.

/*
This is the visible area of you carousel.
Set a width here to define how much items are visible.
The width can be either fixed in px or flexible in %.
Position must be relative!
*/
.jcarousel {
    position: relative;
    overflow: hidden;
    width: 600px;
    height : 450px;
}

/*
This is the container of the carousel items.
You must ensure that the position is relative or absolute and
that the width is big enough to contain all items.
*/
.jcarousel ul {
    width: 10000em;
    position: relative;

    /* Optional, required in this case since it's a <ul> element */
    list-style: none;
    margin: 0;
    padding: 0;
}

/*
These are the item elements. jCarousel works best, if the items
have a fixed width and height (but it's not required).
*/
.jcarousel li {
    /* Required only for block elements like <li>'s */
    float: left;
}

A simple JCarousel example is shown in the following code.

html

< !DOCTYPE html>
< html>
< head>
< script src="jquery.min.js"></script>
< script src="jquery.jcarousel.min.js" ></script>
< style type="text/css">
.jcarousel {
    position: relative;
    overflow: hidden;
    width: 600px;
    height : 450px;
}
.jcarousel ul {
    width: 10000em;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}
.jcarousel li {
    float: left;
}
</style>

< script type="text/javascript">
    $(function() {
        $('.jcarousel').jcarousel({
            wrap: 'circular'
        });
        
        $('.jcarousel').jcarouselAutoscroll({
            target: '+=1',
            autostart: true,
        });
    });
</script>
</head>
< body>
    < h3>JCarousel Example</h3>
    
    < div class="wrapper">
        < div class="jcarousel">
          < ul>
                < li><img src="image1.jpg" height="400px" width="600px"/></li>
                < li><img src="image2.jpg" height="400px" width="600px"/></li>
          </ul>
        </div>
    </div>
</body>
</html>

Here while initializing JCarousel, we are passing setting parameter  wrap to ‘circular’, which enables carousel to work in loop fashion.

We have also used auto scroll plugin of JCarousel to enable automatic scrolling of the carousel image.

We can also add JCarousel plugins like the one we added above. These plugins includes Control plugin, Pagination plugin, Autoscroll plugin and ScrollIntoView plugin. For more details, visit official website of JCarousel JQuery plugin.

Following is another simple JCarousel along with Control plugin, Pagination plugin, Autoscroll plugin.

html

< !doctype html>
< html>
    < head>
         < link rel="stylesheet" type="text/css" href="jc.css">
        < script src="jquery.min.js"></script>
        < script src="jquery.jcarousel.min.js" ></script>
        < script type="text/javascript" src="carousel.js"></script>
    </head>
    < body>
        < div class="wrapper">
            < h1>Basic JCarousel Example</h1>

            < div class="jcarousel-wrapper">
                < div class="jcarousel">
                    < ul>
                        < li><img src="Adhaar1.jpg" height="400px" width="600px"/></li>
                        < li><img src="Adhaar2.jpg" height="400px" width="600px"/></li>
                    </ul>
                </div>

                < a href="#" class="jcarousel-control-prev">&lsaquo;</a>
                < a href="#" class="jcarousel-control-next">&rsaquo;</a>
                
                < p class="jcarousel-pagination"></p>
            </div>
        </div>
    </body>
</html>

css(jc.css)

.jcarousel-wrapper {
    margin: 20px auto;
    position: relative;
    border: 5px solid #fff;
    width: 600px;
    height: 400px;
}

.jcarousel {
    position: relative;
    overflow: hidden;
}

.jcarousel ul {
    width: 10000em;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

.jcarousel li {
    float: left;
}

.jcarousel-control-prev {
    left: -50px;
}

.jcarousel-control-next {
    right: -50px;
}

.jcarousel-control-prev,
.jcarousel-control-next {
    position: absolute;
    font-size: 25px;
    top: 200px;
    width: 30px;
    height: 30px;
    text-align: center;
    background: #4E443C;
    color: #fff;
    text-decoration: none;
    text-shadow: 0 0 1px #000;
    font: 25px;
}

.jcarousel-control-prev.inactive,
.jcarousel-control-next.inactive {
    opacity: .5;
    cursor: default;
}

.jcarousel-pagination {
    position: absolute;
    bottom: 0;
    left: 15px;
}

.jcarousel-pagination a {
    text-decoration: none;
    background: #fff;
    color: #4E443C;
    padding: 3px;
    text-align: center;
    margin-right: 2px;
    opacity: .75;
}

.jcarousel-pagination a.active {
    background: #4E443C;
    color: #fff;
    opacity: 1;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75);
}

body{
    background: yellow;
}
.wrapper {
    max-width: 620px;
    margin: auto;
}

javascript (carousel.js)

(function($) {
    $(function() {
        $('.jcarousel').jcarousel();

        $('.jcarousel-control-prev')
            .on('jcarouselcontrol:active', function() {
                $(this).removeClass('inactive');
            })
            .on('jcarouselcontrol:inactive', function() {
                $(this).addClass('inactive');
            })
            .jcarouselControl({
                target: '-=1'
            });

        $('.jcarousel-control-next')
            .on('jcarouselcontrol:active', function() {
                $(this).removeClass('inactive');
            })
            .on('jcarouselcontrol:inactive', function() {
                $(this).addClass('inactive');
            })
            .jcarouselControl({
                target: '+=1'
            });

        $('.jcarousel-pagination')
            .on('jcarouselpagination:active', 'a', function() {
                $(this).addClass('active');
            })
            .on('jcarouselpagination:inactive', 'a', function() {
                $(this).removeClass('active');
            })
            .jcarouselPagination();
        
        $('.jcarousel').jcarouselAutoscroll({
            autostart: true,
            target: '+=1'
        });
    });
})(jQuery);

Finally the output screenshot is shown below.

jcarousel_example

Also Read: