2

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

Artur Filipiak
  • 9,027
  • 4
  • 30
  • 56
Vinay Kumar
  • 21
  • 1
  • Please post console errors (if they are), relevant jQuery and HTML. An [**JSFiddle**](http://jsfiddle.net/) example would help also – Artur Filipiak Mar 08 '15 at 08:00
  • it has 3 js and 3css files. hard to make it into a fiddle. html is like this : http://jsfiddle.net/sveb8t7t/ – Vinay Kumar Mar 08 '15 at 08:06

1 Answers1

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 ) {
    //...
});
Artur Filipiak
  • 9,027
  • 4
  • 30
  • 56