Why Circular Content Carousel jQuery plugin does n

问题:

I have been trying to add a jquery carousel to my website which is nearly completely based on bootstrap 3. the problem is that the carousel which I added is not working. All the slides in the carousel are appearing at the same time and are overflowing onto other items in the website. I have attached all the necessary js and css files.

I have used circular content carousel

回答1:

Circular content carousel uses .live() as an event attachment, which is deprecated since jQuery 1.7.

Bootstrap 3 requires jQuery in version 1.9 (or higher) which uses .on() for event delegation instead of .live().

The problem is with these lines of the plugin code:

// click to open the item(s)
$el.find('a.ca-more').live('click.contentcarousel', function( event ) {
    //...
});

// click to close the item(s)
$el.find('a.ca-close').live('click.contentcarousel', function( event ) {
    //...
});

To get it work with boostrap 3 (jQuery >= 1.9) use .on() instead:

// click to open the item(s)
$el.find('a.ca-more').on('click.contentcarousel', function( event ) {
    //...
});

// click to close the item(s)
$el.find('a.ca-close').on('click.contentcarousel', function( event ) {
    //...
});