Using XML in 3D Carousel

For each item you want to add to the carousel, you need to create a new <item> node. Inside the <item> node you will add all the item's data. You can see in the code example below that I added the <path> tag to specify the path to the item's image, but there are other details that you can add for each item, like tooltip and link.

The <link> tag allows you to specify a link to navigate to when the user clicks on the item. As the name suggests, the <tooltip> tag is used to specify a tooltip for the item, and this tooltip can be simple text or HTML content. If you want to use HTML content, you must write it inside the CDATA tag.

<items>

    <item>
        <path>http://bqworks.com/products/3d-carousel/3d-carousel-example-images/image1.jpg</path>
        <tooltip>Image description</to0ltip>
    </item>
    
    <item>
        <path>http://bqworks.com/products/3d-carousel/3d-carousel-example-images/image2.jpg</path>
    </item>
    
    <item>
        <path>http://bqworks.com/products/3d-carousel/3d-carousel-example-images/image3.jpg</path>
    </item>
    
    <item>
        <path>http://bqworks.com/products/3d-carousel/3d-carousel-example-images/image4.jpg</path>
        <tooltip><![CDATA[<u>Image title</u><br/><br/>Tooltips support <i>HTML</i> text.]]></tooltip>
    </item>
    
    <item>
        <path>http://bqworks.com/products/3d-carousel/3d-carousel-example-images/image5.jpg</path>
    </item>

</items>

After creating the XML file, all you need to do is pass the path of the XML file to the carousel instance:

<script type="text/javascript">
    jQuery(document).ready(function($){
        $('.carousel').carousel({
xmlSource:'carousel.xml' width: 700, height: 600 }); </script>
Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk