Как задать гибкое значение ширины item'a в owl carousel 2?

Question

[EvgenyBalalaev]

Здравствуйте.
Подскажите, как в Owl Carousel 2 задать каждому Item'у свою ширину в % относительно его родительского контейнера, а именно owl-stage?

Мне нужно задать ширину Item'ам в процентном соотношении, например, 30% 10% 30% 30% соответственно.
При этом весь функционал карусели должен работать как надо. То есть НЕ бесконечно, от центра, адаптивно.

Когда попытался задать ширину в процентах, то они применились НЕ к классу "owl-item", а к моему классу, то есть по-сути item'ы остаются прежней ширины.
owl-item класс генерируется плагином автоматом, поэтому просто так к нему не пропишешь свойства.
Пробовал добираться с помощью nth-child до owl-item, ну и своим item'ам ставил inherit.
Не вышло то, что хотел.

Но мне нужно чтобы вся карусель была адаптивной.
Пробовал использовать штатное свойство: autoWidth.
Но в таком случае обнуляется всё и нужно прописывать ширину руками для всех классов. Для родителей тоже.
Пробовал прописывать явную ширину родителю - всё получается сделать.
Но для адаптива юзал связку "min-width" + "width: 100vw".

Так же пробовал решать задачу flexbox и bootstrap.
Но вся суть в том, что карусель создаёт дополнительные классы айтемов и слайдера, поэтому всё это отпало =(

Помогите решить задачу. Чую, что тут без JS не обойтись, а в нём я не силён.
Либо я туплю и не понимаю как можно ещё реализовать задачу=)

Спасибо!)

HTML here

<div class="owl-carousel carousel-box">
   <div class="item-1">1235</div>
   <div class="item-2">1235</div>
   <div class="item-3">1235</div>
   <div class="item-4">1235</div>
</div>

CSS here

.item-1 {
   background-color: purple;
}
.item-2 {
   background-color: pink;
}
.item-3 {
   background-color: green;
}
.item-4 {
   background-color: blue;
}

JS here

$(document).ready(function(){
   $('.carousel-box').owlCarousel({
      center: true,
      // autoWidth: true,
   });
});

Comments

[Денис]

Merge
А вот такое решение вас не устроит?

[EvgenyBalalaev]

Денис:
Приветствую.
Как я понимаю, там всё-равно ширина задаётся классу, который в процессе формирует сама карусель и назвать этот класс никак нельзя уникально, для каждого айтема. Короче не вариант.
Даже если добраться через чайлды до своего айтема и задать ему ширину в процентах, относительно его родителя, то не поможет =(
Т.к. сам родитель, скажем так невидимый слайд, которые содержит в себе айтемы, которые меняют классы во вьюпорте, изменяет свою ширину динамично.
То есть на моём экран он 20К пикселей, делаю поменьше браузер, он уменьшается...Лезть в файлы карусели не хочу, тогда нет смысла в плагине...
Взял другую карусель, где ширина этого слайдера-родителя постоянная, вроде как.

Спасибо за ответ.