I've been having difficulty adding the Owl Carousel to our app, and was hoping that the latest 2.0.0-beta.2.4 version would be easier, but I am not able to just get the basic feature of adding an item and updating the carousel to work.
Is there something I am doing wrong here?
Here is the code I am using:
$('#insert').on('click', function () {
owl.trigger('add.owl.carousel', '<div class=\"item\"><p>D</p></div>').trigger('update.owl.carousel');
});
Along with a demo:
http://jsfiddle.net/52r9B/11/
The documentation (http://www.owlcarousel.owlgraphic.com/docs/started-welcome.html) doesn't seem to include anything - unless I'm missing something obvious.
Any help would be appreciated.
Put the bellow lines instead of CSS and Javascript tags. Now wrap all slider <div> or <img> in one container <div class="owl-carousel"> . class owl-carousel is required to apply proper css styles. Also if you want to use default navigation controls, you must also include the owl-theme class in the same <div> tag.
When you initialize the carousel store the carousel object in a variable for future use. var $owl = $("#owl-demo"). owlCarousel({ navigation: true, // Show next and prev buttons slideSpeed: 300, paginationSpeed: 400, items: 1, itemsDesktop: false, itemsDesktopSmall: false, itemsTablet: false, itemsMobile: false, });
You can initialize the carousel and store it in a variable and using that variable you can refresh the owl carousel. like the below example. var $owlCarousel = $('. owl-carousel').
Setting Up Owl Carousel 2 is easy; first place the jQuery, right after that, call the owl carousel JavaScript link. To provide the aesthetics also add the carousel CSS links. We are using the CDN links however you can download the owl carousel and call the scripts and CSS locally.
Since the last months OwlCarousel 2.0 is under heavy re-factoring. So the version you have used (2.0.0-beta.2.4) is already outdated.
Here is a working Codepen of your demo. Your first mistake was that you have used the event API to add a new item without putting the arguments into an array:
// Right
$('.owl-carousel').trigger('add.owl.carousel', [first, second])
// Wrong
$('.owl-carousel').trigger('add.owl.carousel', first, second)
Alternatively you could use the plugin method like this:
$('.owl-carousel').owlCarousel('method', first, second, third, ...)
The main difference is that the event API only provides a subset of all public methods.
The second mistake was that you have tried to call update
over the event API which is not possible (see above). Use refresh
instead.
To checkout the latest development you need to build it at your own until the next pre-release is coming. But please be patient this is still beta!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With