Как убрать ненужные стили?

160
22 февраля 2019, 12:00

Owl Carousel добавляет ненужные стили к тегам, точнее ширину, которая мне не нужна.

Как запретить применять эти стили к тегам?

Проверял в JS и CSS файле карусели, но ничего не нашел толкового.
Может можно как то запрещать добавление стилей к тегам?

html:

                    out+='<div class="col-lg-5 prod-slides">';
                        out+='<div id="sync1" class="owl-carousel owl-theme">';
                        out+='<div class="item">';
                            out+=`<img src="pages/orderPage/goods/${pack.img}">`;
                        out+='</div>';
                        out+='<div class="item">';
                        out+=`<img src="pages/orderPage/goods/${pack.img}">`;
                        out+='</div>';
                        out+='<div class="item">';
                            out+=`<img src="pages/orderPage/goods/${pack.img}">`;
                        out+='</div>';
                    out+='</div>';
                    out+='<div id="sync2" class="owl-carousel owl-theme">';
                        out+='<div class="item">';
                            out+=`<img src="pages/orderPage/goods/${pack.img}">`;
                        out+='</div>';
                        out+='<div class="item">';
                            out+=`<img src="pages/orderPage/goods/${pack.img}">`;
                        out+='</div>';
                        out+='<div class="item">';
                            out+=`<img src="pages/orderPage/goods/${pack.img}">`;
                        out+='</div>';
                    out+='</div>';

Css:

#sync1.owl-theme {
  position: relative;
}
#sync1.owl-theme .owl-next, .owl-prev {
    width: 30px;
    height
: auto;
    top:50%;
    position: absolute;
    outline: none;
}
.owl-dots{
    display: none;
}
.owl-nav span{
    display: block;
    top:50%;
    font-size: 35px;
}
#sync1.owl-theme .owl-prev{
   right: auto;
}
#sync1.owl-theme .owl-next{
    left: auto;    
}
.owl-item{
    padding-top: 20px;
}
#sync1 .item{
    width: 250px;
}
#sync2 .item{
    width: 125px;
}
#sync1 .active{
    display: flex;
}
#sync1 .active .item{
    margin: auto;
}

Скрипт,связывающий два слайдера:

 $(document).ready(function() {
  var sync1 = $("#sync1");
  var sync2 = $("#sync2");
  var slidesPerPage = 3; //globaly define number of elements per page
  var syncedSecondary = true;
  sync1.owlCarousel({
    items : 1,
    nav: true,
    loop: true,
    responsiveRefreshRate : 200,
  }).on('changed.owl.carousel', syncPosition);

    sync2.on('initialized.owl.carousel', function () {
      sync2.find(".owl-item").eq(0).addClass("current");
    })
    .owlCarousel({
    items : slidesPerPage,
    margin:20,
    nav: true,
    slideBy: slidesPerPage, //alternatively you can slide by 1, this way the active slide will stick to the first item in the second carousel
    responsiveRefreshRate : 100
  }).on('changed.owl.carousel', syncPosition2);
  function syncPosition(el) {
    //if you set loop to false, you have to restore this next line
    //var current = el.item.index;
    //if you disable loop you have to comment this block
    var count = el.item.count-1;
    var current = Math.round(el.item.index - (el.item.count/2) - .5);
    if(current < 0) {
      current = count;
    }
    if(current > count) {
      current = 0;
    }
    //end block
    sync2
      .find(".owl-item")
      .removeClass("current")
      .eq(current)
      .addClass("current");
    var onscreen = sync2.find('.owl-item.active').length - 1;
    var start = sync2.find('.owl-item.active').first().index();
    var end = sync2.find('.owl-item.active').last().index();
    if (current > end) {
      sync2.data('owl.carousel').to(current, 100, true);
    }
    if (current < start) {
      sync2.data('owl.carousel').to(current - onscreen, 100, true);
    }
  }
  function syncPosition2(el) {
    if(syncedSecondary) {
      var number = el.item.index;
      sync1.data('owl.carousel').to(number, 100, true);
    }
  }
  sync2.on("click", ".owl-item", function(e){
    e.preventDefault();
    var number = $(this).index();
    sync1.data('owl.carousel').to(number, 300, true);
  });
});
Answer 1

Нууууу, можно костылями)

.owl-stage{
    width: initial !important;
}

Тогда даже inline-стили будуть иметь приоритет пониже)

READ ALSO
React Native на андроид

React Native на андроид

Всем приветУже 3 дня пытаюсь запустить симулятор андроид для react native

163
Видео в Slick-слайдере

Видео в Slick-слайдере

В slick-slider вставил видео через тег <video>Сделал так, чтоб воспроизводилось автоматически, но на мобильных устройствах видео не воспроизводится

134
Скролл по якорям

Скролл по якорям

Не могу понять, как реализоватьЕсть такая задача: если 100 пикселей блока с определенным классом попадает в видимость экрана при скролле страницы,...

166