Как изменить время показа определенного элемента в слайдере?

Question

[rinatoptimus]

Нужно увеличить время показа первого слайда.
Используется Swiper.

В документах написано, что увеличить время показа определенного слайда можно при помощи

<!-- hold this slide for 2 seconds -->
<div class="swiper-slide" data-swiper-autoplay="2000">

Источник: https://swiperjs.com/swiper-api#methods--properties

Но как прописать это для определенного элемента, если слайды не прописаны в коде, а формируются динамически?

<div class="main-promo__slider swiper-container" data-promo-slider>
    <div class="main-promo__slider-holder swiper-wrapper">
        {if (!isset($smarty.server.HTTP_USER_AGENT) || stripos($smarty.server.HTTP_USER_AGENT, 'Chrome-Lighthouse') === false) }
            {foreach $alldata as $item}
                {if !empty($item->url)}
                    {*если есть ссылка*}
                    <a href="{$item->url}"
                       class="main-promo__slider-slide swiper-slide"
                       style="background-image: url('/storage/slider/{$item->img}')"
                       target="_blank">
                        {if !empty($item->mintext) || !empty($item->title)}
                            <div class="main-promo__slider-slide-content">
                                {if !empty($item->title)}
                                    <p class="main-promo__slider-slide-title">{$item->title}</p>
                                {/if}
                                {if !empty($item->mintext)}
                                    <p class="main-promo__slider-slide-text">{$item->mintext|truncate:200}</p>
                                {/if}
                            </div>
                        {/if}
                    </a>
                {else}
                    {*если нет ссылки*}
                    <div class="main-promo__slider-slide swiper-slide"
                         style="background-image: url('{[$item->img, $urlg]|resize:[1920, 700, 0, 'fullsize' => false]}')">
                        {if !empty($item->mintext) || !empty($item->title)}
                            <div class="main-promo__slider-slide-content">
                                {if !empty($item->title)}
                                    <p class="main-promo__slider-slide-title">{$item->title}</p>
                                {/if}
                                {if !empty($item->mintext)}
                                    <p class="main-promo__slider-slide-text">{$item->mintext|truncate:200}</p>
                                {/if}
                            </div>
                        {/if}
                    </div>
                {/if}

            {/foreach}
        {/if}
    </div>
</div>

Comments

[Александр Васильев]

Там где задаются title итп, задавай переменную задержки, какой-нибудь item_time и выводи его в атрибут слайда как все остальное.

Answer 1

[Александр]

<div class="main-promo__slider swiper-container" data-promo-slider>
    <div class="main-promo__slider-holder swiper-wrapper">
        {if (!isset($smarty.server.HTTP_USER_AGENT) || stripos($smarty.server.HTTP_USER_AGENT, 'Chrome-Lighthouse') === false) }
            {foreach $alldata as $item}
                {if !empty($item->url)}
                    {*если есть ссылка*}
                    <a href="{$item->url}"
                       class="main-promo__slider-slide swiper-slide"
                       style="background-image: url('/storage/slider/{$item->img}')"
                       target="_blank"
                       data-swiper-autoplay="{$item->showTime}">
                        {if !empty($item->mintext) || !empty($item->title)}
                            <div class="main-promo__slider-slide-content">
                                {if !empty($item->title)}
                                    <p class="main-promo__slider-slide-title">{$item->title}</p>
                                {/if}
                                {if !empty($item->mintext)}
                                    <p class="main-promo__slider-slide-text">{$item->mintext|truncate:200}</p>
                                {/if}
                            </div>
                        {/if}
                    </a>
                {else}
                    {*если нет ссылки*}
                    <div class="main-promo__slider-slide swiper-slide"
                         data-swiper-autoplay="{$item->showTime}">
                         style="background-image: url('{[$item->img, $urlg]|resize:[1920, 700, 0, 'fullsize' => false]}')">
                        {if !empty($item->mintext) || !empty($item->title)}
                            <div class="main-promo__slider-slide-content">
                                {if !empty($item->title)}
                                    <p class="main-promo__slider-slide-title">{$item->title}</p>
                                {/if}
                                {if !empty($item->mintext)}
                                    <p class="main-promo__slider-slide-text">{$item->mintext|truncate:200}</p>
                                {/if}
                            </div>
                        {/if}
                    </div>
                {/if}

            {/foreach}
        {/if}
    </div>
</div>

Comments

[rinatoptimus]

После добавления строчки
data-swiper-autoplay="{$item->showTime}"
страница вся белая. Что это за showTime?