0

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: first item is OK

but second item have a lot space

      <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/

Ignazio
  • 10,504
  • 1
  • 14
  • 25
Mohadeseh
  • 360
  • 4
  • 19
  • @mohadesh please create a working fiddle just like i did so that we know the actual problem – Awais Jan 18 '22 at 10:52
  • @Awais i create fiddle . it is link: https://jsfiddle.net/Lodmqszg/ – Mohadeseh Jan 18 '22 at 12:26
  • You have used bootstrap `row` and `col` due to which this white space is shown.. plz remove these and use the structure i have provided in my solution – Awais Jan 18 '22 at 12:49
  • @Awais it did not changed. another problem arose.please see:jsfiddle.net/ms28e6kb second items was big. – Mohadeseh Jan 19 '22 at 05:26
  • Above fiddle not working. and can you please tell me what you actually want... as far as i understand you need second row items to be center right ?and of same size? plz correct me if i am wrong. – Awais Jan 19 '22 at 08:42

0 Answers0