Forum | Appery.io

Has anyone successfully implement the carousel component and manipulated the component with javascript ?

I have tried to get this to work for over a month and have had no luck.

I have been pointed to the same documentation many times and I'll keep my comments to myself

Here is all I am trying to do:

1) Add images to the carousel via javascript

2) Delete images from the carousel via javascript

A simple example will go a long ways. PLEASE HELP !!

Hello!

Please post JS code you tried..

Appery('mobilecarousel_7').add('image','', value);

Appery('mobilecarousel_7').refresh();

Where value is a dataURL that I receive from the REST database

Hi Bahar,

You can't create new Carousel items yet. You can create GenericService and there generate the required items, and then map them to the Carousel.

Here is a workaround for adding new frames in runtime. The following code adds one frame with an image:
codevar new_frame = $("<div><&#47;div");
new_frame&#46;attr({
"id": "tester", &#47;&#47; required!
"data-type": "image", &#47;&#47; required!
"data-title": "tester",
"data-image-url": "http:&#47;&#47;dummyimage&#46;com&#47;600x400&#47;91b8c9&#47;15f1e6"
});

Appery( "mobilecarousel_5" )&#46;carouselRoot&#46;find( "&#46;ui-carousel-items" )&#46;append( new_frame );
Appery( "mobilecarousel_5" )&#46;carouselRoot&#46;carousel( "refresh" );/code
Unfortunately, the data (frame settings) should be added via attributes, not with code$&#46;data()/code

The same is for HTML frame. Add the needed content in "new_frame".

Here is the deletion:codeAppery( "mobilecarousel_5" )&#46;carouselRoot&#46;carousel( "remove", index );
&#47;&#47; or
Appery( "mobilecarousel_5" )&#46;carouselRoot&#46;carousel( "remove", 0, $frame_dom_element );/code

Ok. I will try this.

Awesome!

That worked out quite nicely !

I have a followup question.

How can I find a frame with a specific Title ?

I want to find the frame with a specific Title and delete.

Hello! Try this code:
preAppery( "mobilecarouselName" )&#46;carouselRoot&#46;carousel( "remove", 0, $("[dsid=mobilecarouselName]")&#46;find('div[data-title="Title text"]')&#46;eq(0));/pre

That works well!

How could I iterate through the Carousel and retrieve the images from each frame.

Thanks