Проблема с отображением точек нумерации в карусели сов с несколькими рядами - PullRequest
Новая
       26

Проблема с отображением точек нумерации в карусели сов с несколькими рядами

0 голосов
/ 31 мая 2019

Я изменил отображение owl-carousel в нескольких строках, поэтому я добавил класс co-md-12 после каждых пяти элементов. Таким образом отображаются все элементы из цикла, но я хочу отображать только 9 элементов в три строки и после того, как я хочу разбить точки на следующие девять элементов, таких как нумерация страниц. Как я могу это сделать?

Я пробовал точки: true и items: 9 в моем jquery, но он не работает.

Это мой код для карусели: 

 <div class="col-md-12">
            <div class="owl-carousel site-owl">
                <?php 
        if(!empty($Restaurants)){ 
          $count = 0;
          foreach ($Restaurants as $key => $restaurant) { ?>
              <div class="item">
                <div class="media d-block mb-4 text-center site-media site-animate border-0 restaurant_image">
                  <img src="<?php echo Yii::getAlias('@web')."../../../uploads/".$restaurant->photo?>" alt="Free Template by colorlib.com" class="img-fluid">
                  <div class="media-body p-md-5 p-4">
                  <!--   <h5 class="text-primary">$19.50</h5> -->
                    <h5 class="mt-0 h4"><?php echo !empty($restaurant->name) ? $restaurant->name : "-"; ?></h5>
                    <p class="mb-4"><?php echo !empty($restaurant->description) ? Common::get_substr($restaurant->description,70) : "-"; ?></p>

                    <p class="mb-0"><a href="#" class="btn btn-primary btn-sm">Read More</a></p>
                  </div>
                </div>
              </div>
                <?php $count++;
                if($count>=3)
                  {
                    echo "</div></div><div class='col-md-12'><div class='owl-carousel site-owl'>";
                    $count=0;
                  }

               ?>
        <?php }
          }
         ?>

         <!--    </div>
          </div> -->

        </div>
      </div>

А это мой код js: 

var carousel = function() {
        $('.owl-carousel').owlCarousel({
            loop: false,
            margin: 10,
            nav: true,
            stagePadding: 5,
            //autoWidth:true,
            nav: false,
            navText: ['<span class="icon-chevron-left">', '<span class="icon-chevron-right">'],
            responsive:{
                0:{
                    items: 1
                },
                600:{
                    items: 2
                },
                1000:{
                    items: 3
                },
            }
        });
    };
    carousel();

Я хочу три элемента в каждой строке и всего три строки, то есть 9 элементов на одном слайде страницы, и после этого мне нужны точки нумерации страниц и снова 9 элементов на следующем слайде, такие как нумерация страниц. Можно ли этого добиться в сове-карусели?

...