frontend/widgets/views/slider.php

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


<div id="<?=$title?>" class="owl-carousel owl-theme">
    <?php 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>
        <script type="text/javascript">
            var clock;

            $(document).ready(function() {
                var clock;

                clock = $('.clock_<?= $image->primaryKey ?>').FlipClock({
                    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();

            });
        </script>


        <?php
        }?>
        <?= Html::img(ArtboxImageHelper::getImageSrc($image->imageUrl,'slider'))?>
    </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_END);

?>