Having trouble with owlcarousel width

Question

http://makarskarivijera.hr/

this is what the .html says

<div class="row">
  <div class="col-lg-7 col-sm-6">
    <div class="owl-carousel" id="homeCarousel">
      <div class="item">
      <img src="images/brela.jpg" alt="brela makarska">
      </div>
    </div> 
  </div> 
</div>

this is what i get when inspect

<div class="row">
<div class="col-lg-7 col-sm-6">
<div class="owl-carousel owl-theme" id="homeCarousel" style="opacity: 1; display: block;">
<div class="owl-wrapper-outer">
<div class="owl-wrapper" style="width: 3918px; left: 0px; display: block; -webkit-   transform: translate3d(0px, 0px, 0px); -webkit-transform-origin: 326.5px 50%;">
<div class="owl-item" style="width: 653px;">
<div class="item">
<img src="images/brela.jpg" alt="brela makarska"/>

i would like to change that width: 653px but i have no idea where to find that

if someone can share the information that would be very nice :) thx

Answer 1

look in your javascript files for ".owlCarousel(" It should be a function that runs and controls the owl carousel. Its nothing to do with owl.carousel.min.js but rather a function that invokes that code. I have something like this:

 .owlCarousel({
    items: 10,
    rewindNav: false
});

Change the items:10 and it should change your width per pic. Then you can add to your function things like -

$("#owl-example").owlCarousel({ 
        items:10,   
        itemsDesktop : [1199,10],
        itemsDesktopSmall : [980,9],
        itemsTablet: [768,5],
        itemsTabletSmall: false,
        itemsMobile : [479,4]
})

Look for "Customizing" - https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html