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);
});
});
Нууууу, можно костылями)
.owl-stage{
width: initial !important;
}
Тогда даже inline-стили будуть иметь приоритет пониже)
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Всем приветУже 3 дня пытаюсь запустить симулятор андроид для react native
В slick-slider вставил видео через тег <video>Сделал так, чтоб воспроизводилось автоматически, но на мобильных устройствах видео не воспроизводится
Не могу понять, как реализоватьЕсть такая задача: если 100 пикселей блока с определенным классом попадает в видимость экрана при скролле страницы,...