Use JCarousel JQuery plugin to create a carousel

Carousels are an 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 the web application makes the application UI attractive. If it’s an online shopping application, putting an image of an upcoming discount sale with different products in the form of a carousel really catches the user’s attention. In this article, we will see how to use the JCarousel JQuery plugin to create a simple carousel of images.

We can use the JCarousel JQuery plugin to create a carousel. JCarousel plugin requires JQuery version 1.7 or more.

Table of Contents

Include the JQuery and JCarousel js files

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

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

The 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

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

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

Following is the basic CSS code required 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.

<!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 the carousel to work in a loop fashion.

We have also used the 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 include the Control plugin, Pagination plugin, Autoscroll plugin, and ScrollIntoView plugin. For more details, visit the official website of the 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 jquery plugin

Conclusion

In this article, we learned how to create a carousel component using the JQuery javascript plugin.

Use JCarousel JQuery plugin to create a carousel
Scroll to top

Discover more from ASB Notebook

Subscribe now to keep reading and get access to the full archive.

Continue reading