2

I have a problem with owl-carousel 2. Following is my js code :

 $(".top_slider").owlCarousel({
    items:1,
    navigation: true,
    navigationText: ['<div class="top_nav prev"><i class="fa fa-angle-left">    </i></div>', '<div class="top_nav next"><i class="fa fa-angle-right"></i></div>'],
    loop: true,
    animateOut: 'fadeOut',
})

It works for my default window width. However , when I resize my page it automatically change owl-item width. (I found out that it comes from javascript).

For example it is default 1349px (my screen width).But when I change my width to 1024px owl-item width becomes 256px (1024 / 4) even if I only have 3 slider items. What is the problem and how can I fix this ? Thanks for any help.

Harun Acar
  • 33
  • 6

1 Answers1

0
window.addEventListener('resize', refreshOwl);

function refreshOwl() {
        let projectWidth = $(window).width();
        slidesPerPage = projectWidth/3;
        let options = $('.owl-carousel').data('owl.carousel').options;
        options.items = slidesPerPage;
        $('.owl-carousel').trigger('refresh.owl.carousel');
 }
Arm092
  • 580
  • 7
  • 12
  • Welcome to Stack Overflow. While your code may provide the answer to the question, please add context around it so others will have some idea what it does and why it is there. – Theo Jun 23 '19 at 09:02