Как сделать просмотр картинок через Carousel yii2?

Question

[Miri_Skava]

Здравствуйте!
Как в виджет Carousel передать, какое изображение сейчас должно быть активно?

Код контроллера

namespace frontend\controllers;

use common\models\Photo;

class PhotoController extends \yii\web\Controller
{
    public function actionIndex()
    {
        $photos=Photo::find()->all();
        return $this->render('index',[
            'photos'=>$photos,
        ]);
    }

}

Код представления

<?php

use yii\bootstrap\Modal;
use yii\bootstrap\Carousel;
?>
<h1 style="margin-top: 0" class="hea">Фотографии</h1>

<div >
    <?php
$i=0;
foreach ($photos as $ph) {
    echo '<a href = "#" data-toggle = "modal" data-target = "#' . $i . '" >';
    echo '<img style="border:2px white" height="100" class="i" src = "' . $ph->name . '" /> </a >';
    $car[$i]=[
        'content' => '<img style="text-align:center;height: 650px" src="'.$ph->name.'"/>',
        'caption' => '',
        'options' => []];
    $i++;
}
echo '</div>';
for($j=0;$j<$i;$j++) {
    Modal::begin([
        'id' => $j,
        'options'=>['class'=>'mod']
    ]);

    echo Carousel::widget([
        'items' => $car,
        'options' => [
            'class' => 'carousel slide',
            'data-interval' => '120000',
            'style'=>'height: 650px;width:max-content;',
        ],
    ]);

    Modal::end();
}
?>

Answer 1

[Максим Тимофеев]

Заходим в доки и видим, что за это ответственный
class="active"
https://getbootstrap.com/docs/3.3/javascript/#carousel
Для контроля рендера items, есть
https://www.yiiframework.com/extension/yiisoft/yii...
так же можно через js, для этого есть готовый метод:
https://getbootstrap.com/docs/3.3/javascript/#caro...

Comments

[Miri_Skava]

Если можете, то расскажите поподробнее, как контролировать рендер items, пожалуйста, точнее даже применить это в данном случае.

[Максим Тимофеев]

Miri_Skava, я не понимаю в чем у Вас проблема и не понимаю почему Вы сделали в цикле вывод карусели. У Вас несколько каруселей?

[Miri_Skava]

Максим Тимофеев, просто у меня есть страница с миниатюрами картинок, при нажатии на одну из миниатюр она должна открыться в модальном окне, и в этом модальном окне должна быть возможность перелистывания на следующую и предыдущую картинку, и хотела решить эту проблему с помощью карусели в модальном окне. И в данном коде создается модальное окно со своей каруселью для каждой картинки.

[Максим Тимофеев]

Miri_Skava, Возьмите любую галерею с хорошим api (без виджета yii, в виде js). Галерея у Вас будет 1, а клик по миниатюре будет вызывать открытие модального окна и по событию его открытия, будет вызываться метод, который перелистывает к нужному слайду. Тут yii, как и backend в целом не при чем. Задача полностью в разрезе fronta и js в частности. Вначале реализуйте на html+js, потом думайте как это в php сформировать, а не наоборот.