Carousel Image Slider using XML Data with jQuery jCarousel Plugin

We are in the age of visual culture and having said that images play a very important role in displaying your work, product etc to your audience. 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. I'll extract image details, such as, name etc. from an XML file.

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 properties from an XML file dynamically using jQuery Ajax. Once the details of 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 ask the Plugin to create the image slider.

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. However, you may 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 →