javascript - 实现jquery全屏图像 slider yii 2项目

Question

我正在尝试在我的 yii2 项目中实现一个 slider ，我上周开始使用 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 将为从 $dataProvider 检索的每个 Cake 模型呈现 _bolos.php View 。因此，您的页面将包含少量 #gallery div 元素和 js 脚本(请参阅页面源代码)。因此无法正确初始化。

您需要将所有不应重复的元素移动到主视图。