CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapowl-carousel
ultraloveninja
ultraloveninja

Reputation: 2139

Add item to Owl Carousel in the first postion

So far have it working where I can dynamically add a slide into an owl carousel. But I'm not sure how to get it to be placed at the beginning? I've combed through the docs a bit, and it's not really clear to me how to get to be the first slide, rather than the last.

Here's what I have so far:

JS

  var img = '<div class="item"><img src="../images/added-img.jpg"></div>';
    $("#carousel").data('owlCarousel').addItem(img);

I would think that this would be pretty easy, but I'm not sure what the method is to get it to be in the first position.

Upvotes: 1

Views: 2401

Answers (3)

mohammad ravand
mohammad ravand

Reputation: 29

$(document).ready(function () { var owl = $(".owl-carousel").owlCarousel({ loop: true, margin: 10, responsiveClass: true, autoplay: true, responsive: { 0: { items: 1, nav: true }, 600: { items: 3, nav: false }, 1000: { items: 5, nav: true, loop: false } }, attachable: function () {

            },
            triggerable: function (data) {
                this.data = data + 'jfeoajfeo'
                console.log('replace')
                console.log(data)
            }

        });

        var img = '<div class="item"><img src="../images/added-img.jpg"></div>';
        owl.trigger('add.owl.carousel', img)


    });

Upvotes: 0

Kate
Kate

Reputation: 1247

@ultraloveninja There may be some weird things after added. I use below:

var img = '<div class="item"><img src="../images/added-img.jpg"></div>';
$("#carousel").data('owlCarousel').trigger('add.owl.carousel', [$(img), 0])
        .trigger('refresh.owl.carousel')
        .trigger('to.owl.carousel', [0, 500]);

Upvotes: 2

ultraloveninja
ultraloveninja

Reputation: 2139

Ok, I just figured it out.

Needs to be this:

JS

  var img = '<div class="item"><img src="../images/added-img.jpg"></div>';
  $("#carousel").data('owlCarousel').addItem(img,[0]);

I dug through it a bit more and realized that addItem will add a slide on a given position. So by passing a value to it, would insert the slide at a specific position in the carousel. One other issue I had was I was using [1] when testing, which was inserting the slide in the second position. By setting it to [0] makes inserts the slide at the very beginning.

Upvotes: 1

Related Questions