Внедрение jquery fullscreen image slider yii 2 project

Question

Я пытаюсь реализовать слайдер в моем проекте yii2, я начал использовать yii на прошлой неделе, я не знаю, если я делаю правильные вещи здесь, я скачал this код, но путь, который я использую, не работает на 100%, изображения и миниатюры отображаются, но я не могу нажимать на миниатюры, чтобы изменить фон, исходный код работает нормально, проблема в том, что я не могу это сделать работать в моем YII проекте

<?php 
$dataProvider = new ActiveDataProvider([ 
    'query' => Cake::find(), 

]); 
?> 

<?= ListView::widget([ 
    'dataProvider' => $dataProvider, 
    'itemView' => '_bolos', 
    'summary' => '', 
    'options' => [ 
     'tag' => 'div', 
     'id' => 'gallery', 
     'class' => 'bigImages', 
    ], 

]); ?> 

_bolos:

<?php 
use yii\helpers\Html; 

/* @var $model \app\models\Cake */ 

?> 

<script> 
    <?php $this->beginBlock('page-script') ?> 
    (function() { 

     $("#gallery").fullscreenGallery(); 

    })(); 
    <?php $this->endBlock() ?> 
</script> 

<?php $this->registerJs($this->blocks['page-script']) ?> 


<div id="gallery"> 
    <div class="bigImages"> 
     <ul> 
      <li> <?= Html::img($model->cakePhotos[0]->getUploadUrl('file'), ['width' => '100%']); ?></li> 

     </ul> 
    </div> 
    <div class="thumbnails"> 
     <ul> 
      <li> <?= Html::img($model->cakePhotos[0]->getThumbUploadUrl('file')); ?></li> 
     </ul> 
    </div> 

</div> 

Answer 1

Widget ListView будет отображать _bolos.php вид на каждую модель Cake, которая будет получена от $dataProvider. Поэтому вы будете содержать несколько элементов #gallery div и js-скриптов (см. Исходный код вашей страницы). Поэтому он не может быть правильно инициализирован.

Вам нужно переместить все элементы, которые не должны повторять основной вид.