FRONTEND_MVC/views/site/index/main_view_slider.php

<?php
use app\models\front\News;

/*
$newsDataProvider = new \yii\data\ActiveDataProvider(
    [
        "query"=>\app\models\News::getMainView()->orderBy(["dt_pub"=>SORT_DESC])->limit(3),
        "pagination" =>[
            "pageSize"=>4
        ],
    ]
);
*/

$keyadd = News::keyFilter();

$NHDataProvider = new \yii\data\ActiveDataProvider(
    [
        "query"=>News::getNH()->limit(4),
        "pagination" => false
    ]
);

$NH = $NHDataProvider->getModels();

$arrayNH = [];
foreach( $NH as $item ){
		$arrayNH[] = $item->id;
}
if( $auto ){
	$newsDataProvider = new \yii\data\ActiveDataProvider(
		[
			"query"=>News::findFilter()->andWhere(["(flags & 1)"=>0])->andWhere(['not',[ 'id' => $arrayNH]])->andWhere(['or',['NH'=>'Y'],['top'=>'Y']])->limit(3),
			"pagination" => false
		]
	);

}else{
	$newsDataProvider = new \yii\data\ActiveDataProvider(
		[
			"query"=>\app\models\Kd::find()->orderBy(["order"=>SORT_ASC])->limit(3),
			"pagination" => false
		]
	);
}
$sort = $newsDataProvider->getModels();

$news = new \yii\data\ActiveDataProvider();
$models = [];
//if($NH[0] instanceof \app\models\front\News) $models[] = $NH[0] ;

foreach( $sort as $item ){
    $model = News::findOne($item->id);
	if($model instanceof \app\models\front\News) $models[] = $model;
 }
$news->setModels($models);

echo \yii\helpers\Html::beginTag("div",["class"=>"main-view"]);


echo \yii\helpers\Html::beginTag('div',['id'=>"top_mslider","class"=>""]);
if(count($NH)>1){
    echo \yii\helpers\Html::beginTag('div',['class'=>'arrows']);
    echo \yii\helpers\Html::tag('div','<svg class="icon icon-h-slider-prev"><use xlink:href="/svg/symbol/sprite-clear.svg#h-slider-prev"></use></svg>',['class'=>"prev"]);
    echo \yii\helpers\Html::tag('div','<svg class="icon icon-h-slider-prev"><use xlink:href="/svg/symbol/sprite-clear.svg#h-slider-next"></use></svg>',['class'=>"next"]);
    echo \yii\helpers\Html::endTag('div');
}
echo \yii\helpers\Html::beginTag('div',["class"=>"slides"]);

echo Yii::$app->cache->getOrSet("main-page-main-views",function () use ($NHDataProvider,$NH){
    return \yii\widgets\ListView::widget([
        "dataProvider" => $NHDataProvider,
        'options' => [
            'tag' => false,
            'class' => 'list-wrapper',
            'id' => 'list-wrapper',
        ],
        "itemOptions"=>[
            "tag"=>false
        ],
		'viewParams'   => [
			'elcount' => count($NH)
		],
        "itemView" => "_main_view_item_slider",
        "layout" => "{items}"
    ]);
	},News::$keysCache['main-page-main-view']);

echo \yii\helpers\Html::endTag('div');

?>
			<span class="slpager">
			 <?
			 for( $i = 0; $i < count($NH); $i++ ){
			 ?>
				<span class="slider-indicator"></span>
			<?
			}
			?>
			</span>
<?

echo \yii\helpers\Html::endTag('div');

echo Yii::$app->cache->getOrSet("main-page-main-view",function () use ($news){
    return \yii\widgets\ListView::widget([
        "dataProvider" => $news,
        'options' => [
            'tag' => false,
            'class' => 'list-wrapper',
            'id' => 'list-wrapper',
        ],
        "itemOptions"=>[
            "tag"=>false
        ],
        "itemView" => "_main_view_item_pod",
        "layout" => "{items}"
    ]);
},News::$keysCache['main-page-main-view']);

echo \yii\helpers\Html::endTag("div");
echo \yii\helpers\Html::endTag("div");
?>
<script>
    (function (){
        let shift = 0;
		let delta = -15;
        const slider = document.getElementById('top_mslider');
        let slides = Array.from(slider.getElementsByClassName('slides')[0].children);
        const buttons = slider.getElementsByClassName('arrows')[0];
        function next(){
			let width = (slides.length -1)* Math.ceil(slider.offsetWidth)-delta;
	//		$('.slinner').css('display','none');
			slides.map((slide) => {
				slide.addEventListener('transitionend', () => {
					$('.slinner').css('display','block');
				});
            });
            resetInterval()
            shift = shift - ((slider.offsetWidth) - delta);
            if(shift<(width*-1)+delta*<?=count($NH)-2?>-1){
                shift = 0;
                return slides.map((slide) => {
                    slide.style.transform = "translate("+ shift +"px,0px)";
                })
            }
            slides.map((slide) => {
                slide.style.transform = "translate("+ shift +"px,0px)"
            })
        }
        function prev(){
			let width = (slides.length -1)* Math.ceil(slider.offsetWidth)-delta;
//			$('.slinner').css('display','none');
			slides.map((slide) => {
				slide.addEventListener('transitionend', () => {
					$('.slinner').css('display','block');
				});
            });
            resetInterval()
            shift = shift + (Math.ceil(slider.offsetWidth) - delta);
            if(shift>0){
                shift = width*-1+(delta*<?=count($NH)-2?>);
                return slides.map((slide) => {
                    slide.style.transform = "translate("+ shift +"px,0px)"
                })
            }
            slides.map((slide) => {
                slide.style.transform = "translate("+ shift +"px,0px)"
            })

        }
        function reset(){
			shift = 0
			let width = (slides.length -1)* Math.ceil(slider.offsetWidth)-delta;
//			$('.slinner').css('display','none');
			slides.map((slide) => {
				slide.addEventListener('transitionend', () => {
					$('.slinner').css('display','block');
				});
            });
            resetInterval()
            shift = shift ;
            slides.map((slide) => {
                slide.style.transform = "translate("+ shift +"px,0px)"
            })

        }
        if(typeof buttons !== 'undefined'){
            const arrows =  Array.from(buttons.children)
            arrows.map((arrow) => {
                arrow.addEventListener('mousedown', e => {
                    if(arrow.classList.contains('next')){
                        next()
                    } else {
                        prev()
                    }
                });
            })
        }
        window.addEventListener("resize", function() {	console.log('resize'); reset();}, false);

        let interval = setInterval(()=>next(),30000)
        const resetInterval = function()
        {
           clearInterval(interval);
            interval = setInterval(()=>next(),30000)
        }
		window.onSwipe(slider,function (){prev();return true;},function (){next();return true;});
    })()
</script>