jCarousel - dynamically add items

Question

I want to add some new items to my jCarousel. My jCarouse looks like:

<div id="alertMessagePanelId" class="jcarousel alertMessagePanelStyle">
    <ul id="mycarousel">
        <li><p>Alert Message: 1</p></li>
        <li><p>Alert Message: 2</p></li>
        <li><p>Alert Message: 3</p></li>
        <li><p>Alert Message: 4</p></li>
        <li><p>Alert Message: 5</p></li>
        <li><p>Alert Message: 6</p></li>
    </ul>
</div>

I tried to make a function to add some new element to DOM. The elements are added, but the jCarousel is not seeing it.

function addAlertMessage() {
var ul = document.getElementById("mycarousel");
var il = document.createElement("li");
var p = document.createElement("p");
p.appendChild(document.createTextNode("New Message"));
il.appendChild(p);
ul.appendChild(il);  }

This is a correct way to add new elements to the jCarousel?

[This post may help](http://stackoverflow.com/questions/1375171/jcarousel-can-you-remove-all-items-and-rebind-to-a-new-collection) — GillesC, Apr 01 '16 at 08:21

score 0 · Answer 1 · answered Apr 01 '16 at 08:23

0

Yep, it is pretty simple. After you added new items, you just need to call

$('carousel-selector').jcarousel('reload', {});

Look this for more information: jCarousel reload

answered Apr 01 '16 at 08:23

MysterX

2,318
1
12
11

It's not working. The elements are still not visible in jcarousel. – Kutas Tomy Apr 01 '16 at 09:45

jCarousel - dynamically add items

1 Answers1