Сова карусель правая сторона космического вопроса - PullRequest
0 голосов
/ 25 сентября 2019

Я добавил ползунок совы на карусели на веб-странице https://jeffbrownyachts.com/site/test5 (раздел новостей).Пожалуйста, нажмите на новости из навигации.В настоящее время эта новость отображается в виде 2 строк по 3 столбца в слайдере совы.Проблема в том, что сова-карусель показывает неожиданное пространство в правом углу слайда.https://prnt.sc/patw11. Может кто-нибудь сказать мне проблему?

// owl carousel code
$('.owl-carousel').owlCarousel({
      dots: false,
      stagePadding: 0,
      loop:true,
      margin:0,
      nav:true,
      center: true,
      responsive:{
          0:{
            items:1,
            nav:true
          },
          600:{
            items:2,
            nav:false
          },
          1000:{
            items:3,
            nav:true,
          }
      }
  });

1 Ответ

0 голосов
/ 26 сентября 2019

В элементе .owl-stage есть проблема ширины.Эта проблема решается путем пересчета ширины элемента .owl-stage с помощью события onInitialized для карусели сов.Я решил проблему, используя эту проблему Github

$(document).ready(function(){   
      var fixOwl = function(){
        var $stage = $('.owl-stage'),
            stageW = $stage.width(),
            $el = $('.owl-item'),
            elW = 0;
        $el.each(function() {
            elW += $(this).width()+ +($(this).css("margin-right").slice(0, -2))
        });
        if ( elW > stageW ) {
            $stage.width( elW );
        };
      }
         $('.owl-carousel').owlCarousel({
              dots: false,
              stagePadding: 0,
              margin:0,
              onInitialized: fixOwl,
              onRefreshed: fixOwl,
              responsive:{
              0:{
                items:1,
                nav:true
              },
              600:{
                items:2,
                nav:false
              },
              1000:{
                items:3
              }
          }
      });
    });
...