Help adjust the width of owlCarousel, try to make the width smaller, how can this be achieved? The screenshot is below.

HTML

<div class="main-wrap"> <div class="owl-carousel owl-theme first-slider" id="main-slider"> <div class="item ramen-slider"> <p>Рамен</p> </div> <div class="item ramen-slider"> <p>Сухари</p> </div> <div class="item ramen-slider"> <p>Кляр</p> </div> <div class="item ramen-slider"> <p>Кляр</p> </div> <div class="item ramen-slider"> <p>Кляр</p> </div> </div> </div>

Js

 $('#main-slider').owlCarousel({ loop: true, nav: true, items: 3, dots: false, navText: ['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>'], autoplay: false, autoplayTimeout: 6000, autoplaySpeed: 3000, onInitialized: function(){ $('.main-wrap').css({'visibility': 'visible','height': 'auto'}); }, });

Slider

  • $ ('. main-wrap'). css ({'visibility': 'visible', 'height': 'auto'}); if you add here: 'width': '70%'? - Horchynskyi
  • @Horchynskyi then in that case, only 2 blocks are displayed, I need to display three blocks. - NK Montreal
  • Do you need blocks to appear and disappear where the buttons are? - Horchynskyi
  • @Horchynskyi yes, i.e., make the width between the blocks smaller and fit inside the block with arrows. - NK Montreal
  • I have to dig into them in the documentation. Well, I found Item Margin try in onInitialized: add $ ('. item'). css ({'margin-right': '10px'}); - Horchynskyi

0