Untitled

<?php
if(!$this->getStatus()) return;
$selector = 'alo-content-'.uniqid();
$slider = $this->getSlider();
if(!count($slider)) return;
$notLazyload = (int) $this->getData('exclude_lazyload_visible');
if($notLazyload) $notLazyload = (int) $this->getData('visible');
$imageAsBackground = (int) $this->getData('background-image');
?>
<style type="text/css">.magicslider-caption {display: none;} .magicslider-caption.mobile.desktop{display: block;}</style>
<div class="<?php echo $selector ?>" data-use-intersection-observer='<?php echo $this->getData('useIntersectionObserver')?>' >
    <div class="magicslider grid-slider <?php echo $this->getData('class')?>"
    <?php foreach ($this->getFrontendCfg() as $opt) :?>
        data-<?php echo $opt ?>='<?php echo $this->getData($opt) ?>'
    <?php endforeach;?>  
    data-lazy-load="ondemand"
    >
        <?php foreach ($slider as $image) :?>
            <div class="item <?php echo $image->getmediaType() ?>"
                <?php echo ($image['video_url']) ? 'data-video="'. $image['video_url'] .'"' : ''; ?> 
            >
                <?php
                    $classImage = $this->getData('image-class');
                    if($notLazyload){
                        $classImage .= ' loaded';
                        $notLazyload--;
                    }
                    if($imageAsBackground){
                        $classImage .= ' background-image';
                    }
                ?> 
                <a href="<?php echo isset($image['link']) ? $image['link'] : '#'; ?>">
                    <picture>
                        <?php
                            $img = $image->getMobile();
                            if($img){
                                $mWidth = $img->getWidth();
                                echo '<source media="(min-width: ' . ++ $mWidth . 'px)" srcset=" ' . $image->getUrl() . ' ">';   
                            }  
                        ?>
                        <img class="img-responsive <?php /* @escapeNotVerified */ echo $classImage ?>" src="<?php echo $img ? $img->getUrl() : $image->getUrl() ?>" alt="<?php echo __($image->getLabel()) ?>" title="<?php echo __($image->getLabel()) ?>" width="<?php echo $image->getWidth() ?>" height="<?php echo $image->getHeight() ?>" />
                    </picture>
                </a>
                <?php
                    if ($img) {
                        $classes = 'caption-' . uniqid();
                        $width   = $img->getWidth();
                        echo isset($img['caption']) ? '<div class="magicslider-caption mobile ' . $classes . '" >' . $img['caption'] . '</div>' : ''; 
                        echo isset($image['caption']) ? '<div class="magicslider-caption desktop ' . $classes . '" >' . $image['caption'] . '</div>' : '';
                        $style = '<style>';
                        $style .= '@media only screen and (max-width: ' . $width . 'px){ .mobile.' .$classes . '{display:block}}';
                        $style .= '@media only screen and (min-width: ' . ++$width . 'px){ .desktop.' . $classes . ' {display:block}}';
                        $style .= '</style>';
                        echo $style;
                    } else {
                        echo isset($image['caption']) ? '<div class="magicslider-caption mobile desktop" >' . $image['caption'] . '</div>' : '';
                    }
                ?>
            </div>
        <?php endforeach ?>
    </div>
</div>
<script type="text/javascript">
    require(['jquery','gridSlider'], function($, gridSlider){
        var el  = $('.<?php echo $selector ?>');
        if(el.length) el.gridSlider(el.data());
    });
</script>