frontend/widgets/views/slider.php

<?php
/* @var $slider Slider*/
use common\components\artboximage\ArtboxImageHelper;
use common\models\Slider;
use yii\helpers\Html;
use yii\web\View;
use frontend\assets\FlipclockAsset;
FlipclockAsset::register($this);

?>


<div id="<?=$title?>" class="owl-carousel owl-theme">
    <?php if($slider instanceof Slider){ foreach($slider->sliderImage as $image):


    ?>
    <div class="item">
<?php
        if(!empty($image->end_at) && strtotime($image->end_at) > strtotime(date("Y-m-d"))){
        ?>
        <div class="clock_style clock_<?= $image->primaryKey ?>"></div>
        <?php $js = "var clock;
                    clock = new FlipClock($('.clock_". $image->primaryKey ."'), {
                        clockFace: 'DailyCounter',
                        language: 'ru',
                        classes: {
                            active: 'flip-clock-active',
                            before: 'flip-clock-before',
                            divider: 'flip-clock-divider',
                            dot: 'flip-clock-dot',
                            label: 'flip-clock-label',
                            flip: 'flip',
                            play: 'play',
                            wrapper: 'flip-clock-wrapper'
                        },
                    });

                    clock.setTime(".(strtotime($image->end_at) - strtotime(date('Y-m-d H:i:s'))).");
                    clock.setCountdown(true);
                    clock.start();";
        $this->registerJs($js,View::POS_LOAD) ?>


        <?php
        }?>
        <?= Html::a(Html::img(ArtboxImageHelper::getImageSrc($image->imageUrl,'slider')), $image->url)?>
    </div>


<?php endforeach; }
    ?>
</div>
<?php
$dur = $slider->duration ?  $slider->duration : 5000;
$speed = $slider->speed ?  $slider->speed : 500;
$js="	$(\"#$title\").owlCarousel({
      navigation : true, // Show next and prev buttons
      slideSpeed : 500,
      autoplayTimeout:$dur,
      paginationSpeed : $speed,
      singleItem:true,
      autoPlay:true

     });
     var owl = $(\"#$title\");
     $('#next_slide').click(function() {
        owl.trigger('owl.next');
    })
    $('#prev_slide').click(function() {
        owl.trigger('owl.prev');
    })
     ";

$this->registerJs($js,View::POS_READY);

?>