Question

我将猫头鹰轮播更改为多行显示，因此我每五个项目后添加了co-md-12类。这样，循环中的所有项目都在显示，但我只想在其中显示9个项目三行之后，我想要下9个项目（例如分页）的分页点。我该怎么做？

我在我的jquery中尝试了点：true和items：9，但是它不起作用。

这是我的轮播代码：

 <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个项目，例如分页。猫头鹰轮播可以实现吗？

Answer 1

在控制器中：

public function actionPager(){

    // Here it is through the database (Active Record) - it can be an array and ...
    $model =  \app\models\YourModel::find();  //->where('[[yourField]] = :condition', [':condition' => 1 ])

    $page = new \yii\data\Pagination([
      'totalCount' => $model->count(),
      'defaultPageSize' => 3 ,
      'pageParam' => 'apage',
      ]);

    $Restaurants = $model ->offset($page->offset)
    ->limit($page->limit)->all();

   return $this->render('pager',['Restaurants'=>$Restaurants , 'page'=>$page ]);
 }

在查看文件中：

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

echo  \yii\widgets\linkPager::widget([ 'pagination' => $page, 'firstPageLabel' => 'first',  'lastPageLabel' => 'last','hideOnSinglePage' => true,'disableCurrentPageButton' => true, 'options' =>['class' => 'pagination']]);

          }
         ?>
        </div>
</div>

您不需要Javascript代码。它是通过linkPager::widget完成的。
我试图添加多个属性linkPager。

在多行猫头鹰传送带中显示分页点的问题

1 个答案: