FRONTEND_MVC/views/site/index/_three_widgets_slider.php

<?php
/**
 * @var $this \yii\web\View
 * @var $models \app\models\front\TopSlider[]
 */
$k = 0;
echo \yii\helpers\Html::beginTag('div',['id'=>"top_slider","class"=>"col-md-4"]);
if(count($models)>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"]);
foreach ($models as $model){
	if( $model ){
		$k++;
		echo $this->render('_partner_news_item',["model"=>$model->post,"key"=>$k]);
	}
}
echo \yii\helpers\Html::endTag('div');
echo \yii\helpers\Html::endTag('div');
?>
<script>
    (function (){
        let shift = 0;
        const slider = document.getElementById('top_slider')
        let slides = Array.from(slider.getElementsByClassName('slides')[0].children)

        let width = (slides.length -1)* Math.ceil(slider.offsetWidth)-15;

        const buttons = slider.getElementsByClassName('arrows')[0]
        function next(){
            resetInterval()
            shift = shift - (Math.ceil(slider.offsetWidth) - 15);
            if(shift<(width*-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(){
            resetInterval()
            shift = shift + (Math.ceil(slider.offsetWidth) - 15);
            if(shift>0){
                shift = width*-1;
                return slides.map((slide) => {
                    slide.style.transform = "translate("+ width*-1 +"px,0px)"
                })
            }
            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()
                    }
                });
            })
        }
        let interval = setInterval(()=>next(),3000)
        const resetInterval = function()
        {
            clearInterval(interval);
            interval = setInterval(()=>next(),3000)
        }

    })()
</script>