Making a carousel image slider using XML and jQuery jCarousel Plugin

Last updated: 29th November 2024

Images can significantly enhance a website in many ways. You need images for your online store, publish photographs on your blog and more. Image sliders, are best known for displaying multiple images in a single container. Here, in this post I’ll show you how to create a simple Carousel image slider using jQuery jCarousel Plugin. The images (for the Carousal) with details such as name etc., will be extracted from an XML file.

what is Carousel image slider

A carousel image slider is an interactive web element that displays a series of images or content in a rotating manner.

jQuery jCarousel Plugin

The jCarousel Plugin provides features to create a Carousel like image slider using HTML contents.

In the example here, I’ll extract a list of images with its properties from an XML file dynamically using jQuery Ajax. Once the images are extracted, I’ll add the images to HTML <li> tag. Finally, add the <li> with the <img> to a pre-declared <ul> tag using jQuery appendTo method.

See this demo

Browser Support:
Chrome 39.0 - Yes | FireFox 34.0 - Yes | Internet Explorer 10 - Yes | Safari 5.1.4 - Yes

Once we have all the images, and created the markup for the web page, we will use the Plugin to create the image slider.

But first, we will create an XML document and add the source of each image and some miscellaneous properties to it.

The XML

<?xml version="1.0"?>
<!--   Last edited by https://www.encodedna.com   -->
<list>
  <ref>
    <image>google.png</image>
    <alt>GOOGLE</alt>
  </ref>
  <ref>
    <image>plugin.png</image>
    <alt>All Plugins</alt>
  </ref>
  <ref>
    <image>wcf.png</image>
    <alt>WCF</alt>
  </ref>
  <ref>
    <image>jquery.png</image>
    <alt>Beginners Guide</alt>
  </ref>
  <ref>
    <image>javascript.png</image>
    <alt>JAVASCRIPT</alt>
  </ref>
  <ref>
    <image>xml.png</image>
    <alt>XML for Beginners</alt>
  </ref>
  <ref>
    <image>html5.png</image>
    <alt>HTML5 Tips</alt>
  </ref>
</list>

The child nodes <image> have URL for each image in the root folder. Add a folder name, if the images are inside another folder. For example

<image>FolderName/google.png</image>

The Code

<!doctype html>
<html>
<head>
    <title>jQuery jCarousel Plugin Example</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jcarousel/0.2.9/jquery.jcarousel.min.js"></script>
    <link rel="Stylesheet" href="https://cdn.jsdelivr.net/jcarousel/0.2.9/skins/tango/skin.css" />
</head>

<body>
    <p>jQuery jCarousel Plugin Example! Click the arrows to scroll images.</p>
    <ul id="show_images" class="jcarousel-skin-tango"> </ul>
</body>

<script>
    $(document).ready(function () {
        $.ajax({
            type: 'GET',
            url: 'https://www.encodedna.com/library/images-source.xml',
            dataType: 'xml',
            success: function (xml) {
                $(xml).find('ref').each(function () {

                    var li = $('<li/>');

                    img = $(this).find('image').text();
                    alt = $(this).find('alt').text();

                    $('<img />')
                        .attr('src', "" + img + "")         // ADD IMAGE PROPERTIES.
                        .attr('alt', alt)
                        .width('70px').height('70px')

                        .appendTo(li)   // ADD EACH IMAGE TO LI.

                    // ADD LI (WITH THE IMAGE) TO THE UL.
                    li.appendTo('#show_images');
                });

                $('#show_images').jcarousel();
            }
        });
    });
</script>
</html>

Try it

Browser Support:
Chrome 39.0 - Yes | FireFox 34.0 - Yes | Internet Explorer 10 - Yes | Safari 5.1.4 - Yes

See this demo

← PreviousNext →