i want to create two rows owl carousel .and i have about 14 items that i want to for each carousel item show about 10 items in two rows.i'm using this code: https://stackoverflow.com/a/60433864/4323507

first item is OK. but second item have a lot of free space.

but is it my plroblem:

      <div id="latest-posts" class="owl-usage owl-carousel owl-theme d-md-none" dir="ltr">
                <div class="item">
                    <div class="row d-flex flex-nowrap">
                        <div class="col ms-1">
                            <figure class="text-center">
                                <img src="https://files.postcarpet.com/Content_General/49/4.jpg" class="rounded-circle"
                                    alt="..." style="width: 100%">
                                <figcaption>توضیح</figcaption>
                            </figure>
                        </div>
.... /*repeat <div class="col ms-1">  5 times*/
  <div class="row d-flex flex-nowrap">
                        <div class="col ms-1">
                            <figure class="text-center">
                                <img src="https://files.postcarpet.com/Content_General/49/4.jpg" class="rounded-circle"
                                    alt="..." style="width: 100%">
                                <figcaption>توضیح</figcaption>
                            </figure>
                        </div>
........ /*repeat <div class="col ms-1"> 5 times*/
 <div class="item">
                    <div class="row row-cols-5 d-flex flex-nowrap ">

                        <div class="col ms-1">
                            <figure class="text-center">
                                <img src="https://files.postcarpet.com/Content_General/49/4.jpg" class="rounded-circle"
                                    alt="..." style="width: 100%">
                                <figcaption>توضیح</figcaption>
                            </figure>
/* repeat <div class="col ms-1"> 2 titmes*/

<div class="row row-cols-5 d-flex flex-nowrap ">

                        <div class="col ms-1">
                            <figure class="text-center">
                                <img src="https://files.postcarpet.com/Content_General/49/4.jpg" class="rounded-circle"
                                    alt="..." style="width: 100%">
                                <figcaption>توضیح</figcaption>
                            </figure>
/* repeat <div class="col ms-1"> 2 titmes*/</div>

in js:

 $(document).ready(function () {
        $('.owl-usage').owlCarousel({
            loop: false,
            margin: 10,
            items: 1,
            nav: true,
            dots: false,
            // navContainer: '#customNav',
            navText: ['<i class="bi bi-chevron-left"></i>', '<i class="bi bi-chevron-right"></i>'],
            slideBy: 2
        })

demo: https://jsfiddle.net/Lodmqszg/