javascript — OWL Carousel 2 неправильной ширины, показывает все элементы

OWL Carousel 2 неправильной ширины, показывает все элементы

У меня есть следующий код инициализации OWL Carousel 2:

  $(document).ready(function(){ moment.locale('nl-NL'); $("#owl-slider").owlCarousel({ items: 1, responsive: false, nav : false, loop: false, dots: true, dotsEach: 1, autoplaySpeed : 300, dotsSpeed : 400, autoPlay: true, navRewind: true, animateOut: 'fadeOut' }); }); 

Это приводит к следующему html карусели:

  {amp}lt;div class="item-list" id="newsblock"{amp}gt; {amp}lt;div id="owl-slider" class="owl-carousel owl-theme owl-loaded"{amp}gt; {amp}lt;div class="owl-stage-outer"{amp}gt; {amp}lt;div class="owl-stage" style="transform: translate3d(-934px, 0px, 0px); transition: 0s; width: 1401px;"{amp}gt; {amp}lt;div class="owl-item" style="width: 467px; margin-right: 0px;"{amp}gt; {amp}lt;div class="item"{amp}gt; {amp}lt;img width="100%" src="/SITES/FOCUS-DEV/NIEUWS/PUBLISHINGIMAGES/INKTPOT.PNG?RenditionID=5" data-themekey="#"{amp}gt; {amp}lt;div class="header"{amp}gt; {amp}lt;h2 class="title"{amp}gt; {amp}lt;a title="Nieuwsbericht" href="https://testprorail.sharepoint.com/sites/Focus-DEV/nieuws/Paginas/Nieuwsbericht.aspx" rel="bookmark"{amp}gt;Nieuwsbericht{amp}lt;/a{amp}gt; {amp}lt;/h2{amp}gt; {amp}lt;div class="time"{amp}gt;17 November{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt;{amp}lt;div class="owl-item" style="width: 467px; margin-right: 0px;"{amp}gt; {amp}lt;div class="item"{amp}gt; {amp}lt;img width="100%" src="/SITES/FOCUS-DEV/NIEUWS/PUBLISHINGIMAGES/8628PEPERNOTEN-550X485.JPG?RenditionID=5" data-themekey="#"{amp}gt; {amp}lt;div class="header"{amp}gt; {amp}lt;h2 class="title"{amp}gt; {amp}lt;a title="Nog meer nieuws" href="https://testprorail.sharepoint.com/sites/Focus-DEV/nieuws/Paginas/Nog-meer-nieuws.aspx" rel="bookmark"{amp}gt;Nog meer nieuws{amp}lt;/a{amp}gt; {amp}lt;/h2{amp}gt; {amp}lt;div class="time"{amp}gt;17 November{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="owl-item active" style="width: 467px; margin-right: 0px;"{amp}gt; {amp}lt;div class="item"{amp}gt; {amp}lt;img width="100%" src="/SITES/FOCUS-DEV/NIEUWS/PUBLISHINGIMAGES/INKTPOT.PNG?RenditionID=5" data-themekey="#"{amp}gt; {amp}lt;div class="header"{amp}gt; {amp}lt;h2 class="title"{amp}gt; {amp}lt;a title="Test" href="https://testprorail.sharepoint.com/sites/Focus-DEV/nieuws/Paginas/test.aspx" rel="bookmark"{amp}gt;Test{amp}lt;/a{amp}gt; {amp}lt;/h2{amp}gt; {amp}lt;div class="time"{amp}gt;17 November{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt;{amp}lt;div class="owl-controls"{amp}gt; {amp}lt;div class="owl-nav"{amp}gt; {amp}lt;div class="owl-prev" style="display: none;"{amp}gt;prev{amp}lt;/div{amp}gt; {amp}lt;div class="owl-next" style="display: none;"{amp}gt;next{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="owl-dots" style=""{amp}gt; {amp}lt;div class="owl-dot"{amp}gt;{amp}lt;span{amp}gt;{amp}lt;/span{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="owl-dot"{amp}gt;{amp}lt;span{amp}gt;{amp}lt;/span{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="owl-dot active"{amp}gt;{amp}lt;span{amp}gt;{amp}lt;/span{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; 

Проблема заключается в том, что ширина div-элемента owl-stage установлена ​​равной ширине всех трех элементов вместо 1. Все элементы отображаются вместо 1.

Пожалуйста, дайте несколько советов о том, что может быть решением!

С уважением.

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector