Owlcarousel2: How can I move .owl-pagination outside the primary owl wrapper?

[wyclef-thechronic]

It would be great if there was a simple way to move .owl-pagination to another div outside the primary owl wrapper. Wondering if there is a straightforward way to accomplish this?

[yunusga]

Hi @wyclef-thechronic, it works with standard options: navContainer and dotsContainer

<!-- html custom containers -->
<div id="customNav" class="owl-nav"></div>
<div id="customDots" class="owl-dots"></div>

//javascript
$('#owl-carousel').owlCarousel({
    // move navContainer outside the primary owl wrapper
    navContainer: '#customNav',
    // move dotsContainer outside the primary owl wrapper
    dotsContainer: '#customDots',

   // other OwlCarousel2 options
})

Full screen result in JsFiddle
Posted a question on Stack Overflow

[wyclef-thechronic]

In version 2 only? I am working with version 1.9.4. Is upgrading to version 2 painless?

[yunusga]

Yes, upgrading painless. The only difference is in the core code

[wyclef-thechronic]

Hmmm... this was the JS I was using. When I update the core js and css I do not see anything anymore. Is all of this still usable in v2?

var owl = $('#my-carousel');

owl.owlCarousel({
    addClassActive : true,
    singleItem : true,
    transitionStyle : 'fade',
    responsiveRefreshRate : 25
});

// Custom Navigation Events
$('.next').click(function(){
    owl.trigger('owl.next');
})
$('.prev').click(function(){
    owl.trigger('owl.prev');
})

//Select Transtion Type
$('#transitionType').change(function(){
    var newValue = $(this).val();

    //TransitionTypes is owlCarousel inner method.
    owl.data('owlCarousel').transitionTypes(newValue);

    //After change type go to next slide
    owl.trigger('owl.next');
});

[joeydi]

The only difference is in the core code

This is incorrect. The option names and event names have all changed, e.g. singleItem : true should now be items: 1 and owl.trigger('owl.next') should be owl.trigger('next.owl.carousel');

[theWhaleThatLivedaVeryShortLife]

Gents hello, @gaziev Your fiddle for the thumbnail is awesome (http://jsfiddle.net/Gaziev/EGrGN/light/) but I have an issue i have not been able to resolve. Is there any way to have multiple owl carousels and to apply dynamically their slider images to pagination? I already tried looping over etc etc but have yet been unable to solve the issue. Any help would be appreciated. I also forgot to note that all those sliders are inside the expandable tiles. So they are hidden by default.

[endrep0]

Thanks!

While it's in the jsfiddle, it's not mentioned in here that you need to embed the divs like this. Took me a bit to figure out, so I thought I'd point it out here too.

<div class="owl-theme">
    <div class="owl-controls">
        <div id="customNav" class="owl-nav"></div>
        <div id="customDots" class="owl-dots"></div>
    </div>
</div>

[markosole]

Hi,

does anyone know how to make pagination to luck like this
< 12/45 >
Arrow left and arrow right, in the middle is number of slides and number 12. of 45 slides.
If someone have any idea how to make this, would be great. Thanks

[yunusga]

You need more conditions

[Schlammsuhler]

This should print you the progress instead of dots:

var owl = $('.owl-carousel');
owl.on('changed.owl.carousel initialized.owl.carousel', function (e) {
    var index = e.item.index % e.item.count + 1;
    owl.find('.owl-progress').html('<span>' + index + ' / ' + e.item.count);
});
owl.owlCarousel({
    dotsClass: 'owl-progress'
});

[jomokeza]

@yunusga
autoplayHoverPause don't works for the custom nav buttons in your exemple
any ideas?