Разные изображения в слайдере для десктопа и мобильного

slide_background.php

<?php

return [
    'title' => 'Слайд',

    'show_in_templates' => 1,

    'container' => 'main_cycle',

    'templates' => [
        'owner' => '
            <div class="slide main-slide-[+iteration+]" style="background-color: [[getImageColor? &source=`[+background+]`]]" data-invert="[+invert+]">
                <div class="slide-inner">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-6">
                                <h1 class="title">
                                    [[if? &is=`[+text_decoration+]:is:bg` &then=`
                                        <span class="inline-padding"><span><span>[+title+]</span></span></span>
                                    ` &else=`
                                        <span class="[+text_decoration+]">[+title+]</span>
                                    `]]
                                </h1>

                                <div class="text user-content">
                                    [+text+]
                                </div>

                                <a href="[+link+]" class="btn btn-theme">Подробнее</a>
                            </div>
                        </div>
                    </div>

                    <div class="image">
                        <div class="container">
                            <div class="lazy" data-src="[+image+]"></div>
                        </div>
                    </div>
                </div>

                [+style+]
            </div>
        ',
    ],

    'fields' => [
        'title' => [
            'caption' => 'Заголовок',
            'type'    => 'text',
        ],

        'background' => [
            'caption' => 'Фоновое изображение',
            'type'    => 'image',
        ],

        'mobile_background' => [
            'caption' => 'Фоновое изображение на мобильном',
            'type'    => 'image',
            'note'    => 'Если не заполнено, будет использоваться полное изображение',
        ],

        'image' => [
            'caption' => 'Изображение',
            'type'    => 'image',
        ],

        'text' => [
            'caption' => 'Текст',
            'type'    => 'richtext',
            'options' => [
                'height' => '100px',
            ],
        ],

        'text_decoration' => [
            'caption'  => 'Оформление текста',
            'type'     => 'radio',
            'elements' => ['' => 'Нет', 'bg' => 'Подложка', 'glowing' => 'Свечение', 'shadow' => 'Тень'],
            'layout'   => 'horizontal',
        ],

        'link' => [
            'caption' => 'Ссылка',
            'type'    => 'text',
        ],

        'invert' => [
            'caption' => 'Инвертировать шапку',
            'type'    => 'checkbox',
            'elements' => [1 => 'Да'],
        ],
    ],

    'prepare' => function($options, &$values) {
        if (!empty($values['mobile_background'])) {
            $style  = '@media (max-width: 575px) {.main-slide-' . $this->iterations['iteration'] . ' {background-image: url(\'' . htmlentities($values['mobile_background']) . '\');}}';
            $style .= '@media (min-width: 576px) {.main-slide-' . $this->iterations['iteration'] . ' {background-image: url(\'' . htmlentities($values['background']) . '\');}}';
        } else {
            $style = '.main-slide-' . $this->iterations['iteration'] . ' {background-image: url(\'' . htmlentities($values['background']) . '\');}';
        }

        $values['style'] = '<style>' . $style . '</style>';
    },
];

slide_image.php

<?php

return [
    'title' => 'Слайд',

    'container' => 'cycle',

    'templates' => [
        'owner' => '
            <div class="slide">
                <div class="container">
                    <div class="slide-header">
                        <div class="user-content">
                            [+text+]
                        </div>
                    </div>

                    <div class="image">
                        <picture>
                            <source srcset="[+image+]" media="(min-width: 576px)">
                            <source srcset="[+mobile_image+]" media="(max-width: 575px)">
                            <img src="[+mobile_image+]" srcset="[+image+]" alt="" class="img-fluid">
                        </picture>
                    </div>

                    <div class="slide-footer">
                        [[if? &is=`[+link+]~~!empty` &separator=`~~` &then=`
                            <a href="[+link+]" class="btn btn-theme">
                                [+btn_caption+]
                            </a>
                        `]]
                    </div>
                </div>
            </div>
        ',
    ],

    'fields' => [
        'text' => [
            'caption' => 'Текст',
            'type'    => 'richtext',
            'theme'   => 'minimenu',
            'options' => [
                'height' => 200,
            ],
        ],

        'image' => [
            'caption' => 'Изображение',
            'type'    => 'image',
        ],

        'mobile_image' => [
            'caption' => 'Мобильное изображение',
            'type'    => 'image',
        ],

        'link' => [
            'caption' => 'Ссылка',
            'type' => 'text',
        ],

        'btn_caption' => [
            'caption' => 'Надпись на кнопке',
            'type' => 'text',
            'default' => 'Подробнее',
        ],
    ],
];