FRONTEND_MVC/views/site/index/_main_view_item_slider.php

<?php
/**
 * @var $model \app\models\News
 * @var $key
 * @var $index
 * @var $widget
 */

use app\models\base\Image;
use app\models\PhotoFilter;
	$brightness = Yii::$app->deviceDetect->isMobile()?85:100;
	$mfilter = new PhotoFilter();
	$filter = $mfilter->findOne($model->id);
	if( !$filter ){
		$filter = new stdClass();
		$filter->brightness = $brightness;
		$filter->saturate = 100;
		$filter->contrast = 100;
		$filter->opacity = 0.5;
	}
	$sstr = 'style="filter: saturate('.$filter->saturate.'%) brightness('.$filter->brightness.'%) contrast('.$filter->contrast.'%);"';

$preview = $model->preview;
$className = 'main';
?>
<div class="news-sitem <?=$className?> col-md-12" data-key="<?=$key?>">
        <?php if($preview instanceof Image ):?>
        <div class="picture-cont-16x9" >
            <a href="<?=$model->url?>" title="<?=htmlentities($model->title,ENT_QUOTES)?>">
                <picture class="w-100" id="fimgb<?=$index?>" >
                    <img src="<?=$preview->getUrl(Image::SIZE_841x473,'jpg')?>?v=<?=$model->rev?>" srcset="<?=$preview->getUrl(Image::SIZE_841x473,'webp')?>?v=<?=$model->rev?> 841w,<?=$preview->getUrl(Image::SIZE_320x180)?>?v=<?=$model->rev?> 320w,<?=$preview->getUrl(Image::SIZE_500x282)?>?v=<?=$model->rev?> 500w,<?=$preview->getUrl(Image::SIZE_680x383)?>?v=<?=$model->rev?> 680w" alt="<?=htmlentities($model->photo_title,ENT_QUOTES)?>" class="w-100" loading="lazy" id='mainphoto' <?=$sstr?>>
                </picture>
            </a>
        </div>
        <div class="meta">
            <h2 class="title"><a href="<?=$model->url?>"><?=$model->title?></a></h2>
            <?php if($className!="low"): ?><div class="lead"><?=$model->lid?></div><?php endif;?>
            <div class="published_at">
                <?=$model->publishedAt?> <?=date("H:i",strtotime($model->dt_pub))?>
                <?php if($model->comments=="Y"):?>
                    <?php
                    $count=$model->getCommentsAll()->count();
                    ?>
                    <?php if($count>0):?>
                        <span class="commnets">&nbsp;<svg class="icon icon-comments"><use xlink:href="/svg/symbol/sprite-clear.svg#comments"></use></svg><?=$count?></span>
                    <?php endif;?>
                <?php endif;?>
            </div>
        </div>
        <?php endif;?>

			<span class="slpager slinner">
			 <?
			 for( $i = 0; $i < $elcount; $i++ ){
			 ?>
				<span class="slider-indicator<?=$index == $i?' active':' '?>"></span>
			<?
			}
			?>
			</span>

<style>
#fimgb<?=$index?>::after{
	background:linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,<?=$filter->opacity?>)) !important;
}
#fimgb<?=$index?>{
	filter:brightness(100%);
}
</style>
</div>