Question

-2

Can not add dynamically items to Owl Carousel in Javascript

rated 0 times [ 1] [ 3] / answers: 1 / hits: 16736 / 7 Years ago, wed, april 19, 2017, 12:00:00

I'm trying to dynamically add items to an Owl carousel. Here is how I'm doing it:

HTML

<div id=avatar-carousel class=owl-carousel lesson-carousel>

                                            <div class=item item-logo>

                                              <div class=product-item>

                                                <div class=carousel-thumb style=height: 77px!important;width: 70px; >

                                                      <img src=http://placehold.it/140x100 alt=>

                                                </div>

                                              </div>

                                            </div>

                                              <!-- Start Item -->

                                        </div>



                                        <button id=click>

                                        click

                                        </button>

JS

$(#avatar-carousel).owlCarousel({



      items: 5

  });



  $(#click).click(function(){

    $('#avatar-carousel').trigger('add.owl.carousel', ['<div class=item><p>' + 'hh' + '</p></div>'])

                    .trigger('refresh.owl.carousel');

  });

Nothing happens with this code. I can't see the error. Here is the fiddle: JSFiddle.

EDIT:

Seems like the code is correct, as it's working in the fiddle.
I forgot to mention that the carousel works just fine, it is loaded correctly in the beginning. The issue is when trying to add items. Nothing happens, no errors but items are not added.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

bradleymoisesy

Add To Favorites

Follow

Total Points: 121

Total Questions: 105

Total Answers: 95

Location: Nepal

Member since Mon, Jan 4, 2021

3 Years ago

bradleymoisesy questions

1 which data type to use to expect date value in jest

Wed, Dec 22, 21, 00:00, 2 Years ago

1 React/Next.js doesn't seem to work with Apexcharts

Tue, Jun 1, 21, 00:00, 3 Years ago

1 React chart : prevent chart's canvas scaling with height and width

Mon, Feb 1, 21, 00:00, 3 Years ago

1 How to create Create an Excel File with javascript?

Thu, Jun 11, 20, 00:00, 4 Years ago

1 How to create a search filter using Vue js from API Data?

Thu, Jan 16, 20, 00:00, 4 Years ago

View All

answered 7 Years ago noa · Accepted Answer

There can be two regular errors:

The button does not exist in time you create onclick event.
- make sure the button exists in time you assign the event.

The carousel is inside the <form> and clicking the button submits the entire form (pay attention at browser page loading). Error shown here.
- solution would be to prevent default action for the event:

$(document).ready(function() {

    $(#avatar-carousel).owlCarousel({

        nav: true,

        items: 5

    });



});



$(#click).click(function(e) {

    e.preventDefault(); //-- prevent form submit

    $('#avatar-carousel').trigger('add.owl.carousel', ['<div class=item><img src=http://placehold.it/140x100 alt=></div>'])

        .trigger('refresh.owl.carousel');

});

<link href=https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css rel=stylesheet/>

<link href=https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css rel=stylesheet/>

<script src=https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js></script>

<script src=https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js></script>

<form action= method=post>

    <div id=avatar-carousel class=owl-carousel>

        <div class=item item-logo>

            <img src=http://placehold.it/140x100 alt=>

        </div>

    </div>

    <button id=click>

        click

    </button>

</form>