CODEWITHSUNDEEP
javascriptjquerysliderowl-carousel
Cloudboy22
Cloudboy22

Reputation: 1514

Dynamically adding slide images inside slider

i am trying to dynamically add images in the slider called owl slider. The problem is that i want to clear the divs inside the 

.owl-wrapper

div and then add new items on a click. The original code is 

 <div id="owl-demo" class="owl-carousel owl-theme">
                <div class="item">
                    <img src="../img/car1.jpg" alt="The Last of us">
                </div>
                <div class="item">
                    <img src="../img/car2.jpg" alt="The Last of us">
                </div>
                <div class="item">
                    <img src="../img/car3.jpg" alt="The Last of us">
                </div>
                <div class="item">
                    <img src="../img/car4.jpg" alt="The Last of us">
                </div>
            </div>

Now i did this 

      $('.singleNewsItem').click(function () {

            $('#owl-demo').append('<div class="item"><img src="../img/trac1.jpg"></div>');

            });
    });

Somehow its adding the image outside the main slider. Please help . thanks.

Upvotes: 2

Views: 3785

Answers (1)

Artur Filipiak
Artur Filipiak

Reputation: 9157

Try this:

// make sure it's initialized:
// $("#owl-demo").owlCarousel();

$('.singleNewsItem').click(function () {
    // clean the container:
    $('#owl-demo').text('');
    var img = '<div class="item"><img src="../img/trac1.jpg"></div>';
    $("#owl-demo").data('owlCarousel').addItem(img);
});

There is a demo with owl manipulation examples.

Demo with transistions.

Upvotes: 1

Related Questions