Как решить проблему с owl-carousel?

Question

[Артём Цымбалюк]

Здравствуйте. Проблема в следующем, нужно настроить слайдер так, что бы он менял фоновые изображения.
Но возникает проблема, owl-carousel каждому айтему задает определенную ширину, и эта ширина не соответствует ширине экрана



Как это можно поправить?

<div class="owl-carousel">
  <img src="img/slider/1.jpg" alt="">
  <img src="img/slider/2.jpg" alt="">
  <img src="img/slider/3.jpg" alt="">
  <img src="img/slider/4.jpg" alt="">
  <img src="img/slider/5.jpg" alt="">
  <img src="img/slider/6.jpg" alt="">
</div>

$(".owl-carousel").owlCarousel({
		items: 1,
	});

Если включить у owl-caroseul, autoWidth: true, этот отступ исчезнет, но картинка очень сильно раздвинется в ширину..
Буду рад любому комментарию, спасибо

ах, всё стало на свои места, когда я добавил ещё немного контента, появилась полоса прокрутки и закрыла эту область)

Comments

[Ярослав Иванов]

background-image: url();

[Ankhena]

Там что-то было с порядком подключения стилей или стилей и скриптов. Не помню уже.

Answer 1

[Um4a]

Здравствуй, сам долго мучался с этой проблемой. Решений, к которым мы пришли с коллегой, два:
1) Увеличить контент дабы появилась полоска скролла, закрыв эту область.
2) Визуально убрать полоску скролла(свести на ноль) вот так:

::-webkit-scrollbar {width: 0; background: transparent;}

Answer 2

[Demidurg]

Этот отступ, вероятнее всего, результат отображения псевдоэлемента ::after
Если он не несет никакой смысловой нагрузки, то просто удалите, должно сработать.