slider.md

{foreach $_modx->resource.slider | fromJSON as $slide}
    {if $slide@index in list [3,8,10]}
        {set $cls = 'm-ibook--1_3'}
        {set $thumb = 'w=450&h=250&zc=1'}
        {set $thumbWebp = 'w=450&h=250&zc=1&zc=1&bg=none&f=webp'}
    {elseif $slide@index in list [0,7,9]}
        {set $cls = 'm-ibook--3_3'}
        {set $thumb = 'w=450&h=650&zc=1'}
        {set $thumbWebp = 'w=450&h=650&zc=1&zc=1&bg=none&f=webp'}
    {elseif $slide@index === 4}
        {set $cls = 'm-ibook--rectangle'}
        {set $thumb = 'w=910&h=520&zc=1'}
        {set $thumbWebp = 'w=910&h=520&zc=1&zc=1&bg=none&f=webp'}
    {else}
        {set $cls = 'm-ibook--2_3'}
        {set $thumb = 'w=450&h=450&zc=1'}
        {set $thumbWebp = 'w=450&h=450&zc=1&zc=1&bg=none&f=webp'}
    {/if}

    <div class="m-ibook {$cls}" data="{$slide@index}">
        <picture>
            <source srcset="{$slide.image | phpthumbon: $thumbWebp}" type="image/webp">
            <img class="m-lbook__img" src="{$slide.image | phpthumbon: $thumb}" alt="{$_modx->resource.pagetitle | strip_tags} - {$slide.MIGX_id}" loading="lazy">
        </picture>
        <button class="m-ibook__btn" type="button" data-id="ibook-{$slide.MIGX_id}" data-master="{$slide.main_product}">
            <span>Товары из образа</span>
        </button>
        <div class="m-cart" id="ibook-{$slide.MIGX_id}">
            <div class="m-cart__header">
                <h2 class="m-cart__title">Товары из образа</h2>
                <button class="m-cart__close m-cart__close--book" type="button"></button>
            </div>
            <div class="m-cart__main">
                {'!msProducts' | snippet : [
                    'parents' => 'msync_catalog_root_id' | config
                    'limit' => 0,
                    'link' => 2,
                    'master' => $slide.main_product,
                    'tpl' => 'lookbook.cart_item'
                ]}
            </div>
            <div class="m-cart__footer">
                <button class="m-btn m-btn__close" type="button"><span>Закрыть</span></button>
            </div>
        </div>
    </div>
{/foreach}