FRONTEND_MVC/views/site/index/topic_widget.php

<?php
/**
 * @var $post \app\models\News
 * @var \yii\data\ActiveDataProvider $newsDataProvider
 * @var \app\models\base\NewsTopic | \app\models\base\Story $topic
 * @var \app\models\Design $design
 */
$topic_picture = $topic->image;
$url = '';
if( $topic instanceof \app\models\base\NewsTopic ) $url = '/news/';
if( $topic instanceof \app\models\base\Story ) $url = '/story/';
if( $topic->ext != '' ){
	$ext = json_decode($topic->ext, false, JSON_THROW_ON_ERROR);
	if( isset( $ext->brightness ) ){
		$brightness = $ext->brightness;
	}
}
?>
<div class="row topic-widget widget" id="design-<?=$design->id?>">
    <div class="col-md-12">
        <div class="cont">
            <?php if($topic_picture instanceof \app\models\TopicImages || $topic_picture instanceof \app\models\StoryImages):?>
                <picture class="w-100"<?=isset($brightness)?' style="filter: brightness('.$brightness.'%);"':''?>>
                    <source srcset="<?=$topic_picture->url?>" media="(min-width: 600px)">
                    <source srcset="<?=$topic_picture->getUrl(\app\models\TopicImages::SIZE_SD_16_9)?>" media="(max-width: 500px)">
                    <img src="<?=$topic_picture->url?>" alt="<?=htmlentities($topic->title,ENT_QUOTES)?>" class="w-100" loading="lazy">
                </picture>
            <?php endif;?>
            <div class="content">
                <div class="topic-title">
                    <a href="<?=$url?><?=$design->url!=""?$design->url:$topic->url?>"><?=$design->title!=""?$design->title:$topic->title?></a>
                </div>
                <div class="swipe-icon"></div>
                <div class="topic-news">
                    <?php
                    echo Yii::$app->cache->getOrSet("main-page-topic-widget-".$design->id,function () use ($newsDataProvider){

                        return \yii\widgets\ListView::widget([
                            "dataProvider" => $newsDataProvider,
                            'options' => [
                                'tag' => false,
                                'class' => 'list-wrapper',
                                'id' => 'list-wrapper',
                            ],
                            "itemOptions"=>[
                                "tag"=>false
                            ],
                            "itemView" => "_topic_widget_item",
                            "layout" => "{items}"
                        ]);
                    },60);
                    ?>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    (function (){
        function scroll(container, value, duration) {
            if (duration <= 0) return;
            var difference = value - container.scrollLeft;
            var perTick = difference / duration * 10;

            setTimeout(function() {
                container.scrollLeft= container.scrollLeft + perTick;
                if (container.scrollLeft === value) return;
                scroll(container, value, duration - 10);
            }, 10);
        }
        const container = document.getElementById("design-<?=$design->id?>").getElementsByClassName('topic-news')[0];
        const items = container.getElementsByClassName('topic-widget-item');
        const style = items[0].currentStyle || window.getComputedStyle(items[0]);
        const itemWidth = parseInt(style.width.replace(/px/,""));
        const shift = itemWidth + parseInt(style.marginRight.replace(/px/,"")) * 2;

        const next = document.createElement('div');
        container.after(next);
        next.classList.add('navigation','next');
        const prev = document.createElement('div');
        container.before(prev);
        prev.classList.add('navigation','prev');
        prev.onclick = function (){scroll(container, container.scrollLeft + (shift * -1), 200); return true};
        next.onclick = function (){scroll(container, container.scrollLeft + shift , 200); return true};
        window.onSwipe(container,function (){scroll(container, container.scrollLeft + (shift * -1), 200); return true}, function (){scroll(container, container.scrollLeft + shift , 200); return true}, )
    })()
</script>