Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

OwlCarousel2 - Add Item + Update Carousel

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.

like image 519
mheppler9d Avatar asked Jul 24 '14 16:07

mheppler9d


People also ask

How do I add items to owl Carousel?

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.

How do you make owl carousel dynamically?

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, });

How do you reload an owl carousel?

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').

How do I customize my 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.


1 Answers

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!

like image 123
witrin Avatar answered Sep 20 '22 17:09

witrin