Задать вопрос
@hoindex

При вставке слайдера карусели разрывает верстку, в чем ошибка?

Всем привет!

Уже 3 дня мучаюсь и не могу решить проблему...
Сайт на WP. адаптивная верстка в 3 колонки, страница тут - https://tinyurl.com/ybqv6awj

Установлен плагин Carousel Slider, который работает на основе owl carousel.
Вывожу на странице в средней колонке и получаю разрыв верстки — prntscr.com/hn0hjb
Это происходит пока не задать контейнеру с каруселью фиксированный width.
При этом любой другой контейнер c width:100% в этой колонке ничего не разрывает.

Проблема в том, что задать фиксированный width нельзя, т.к. сайт адаптивный и средняя колонка должна менять свои размеры.

В настройках плагина из того что относится к размерам карусели есть только Auto width — prntscr.com/hn0ono
Казалось бы — то что нужно, но что enable что disable — никакой разницы.

На данный момент замечено 2 момента.

1. Если присмотреться, то при первичном рендеринге границы контейнера отрисовываются корректно, но через доли секунды он увеличивается по ширине и всё рвет.
У вложенного контейнера замечено изменение атрибутов по событию пошаговой авто-прокрутки у карусели
<div class="owl-stage" style="transform: translate3d(-1760px, 0px, 0px); transition: 0.5s; width: 3520px;">

Но, понять в этом ли проблема не смог, меняя в ручную числа добиться нормального отображения не смог.
Пробовал ковырять JS карусели, ничего не добился...

2. Похоже что проблема уходит, если удалить содержимое правой колонки
<div class="objectInformer">
</div>
<article class="objectGalleryVert autoHeight">
*
</article>


Пробовал удалять вложенные в article блоки, менять их ширины и др. свойства - не помогло.
Пока не удалишь 2 основных блока, верстку рвет...

Уже не знаю куда смотреть дальше...

Заранее спасибо все ответившим.
  • Вопрос задан
  • 209 просмотров
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 1
@koanvl
У вас проблемы из-за табличного представления блочных элементов. Вот оно все и бьет.
Добавьте .content .articleArea .row>article свойства max-width: 1280px, box-sizing: border-box
И уберите у .content .articleArea.table .rightBlocks свойство padding
Все становится на место. Дальше, я думаю, разберетесь сами.
P.S. Это вы поддерживаете ресурс или ваша разработка?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы