Как увеличить время показа первого слайда, если слайды формируются динамически с помощью Swiper?
Для изменения времени отображения определенного элемента в слайдере, можно воспользоваться параметром `delay` в настройках Swiper. Например, чтобы увеличить время отображения первого слайда, можно задать для него большее значение параметра `delay`.
Пример:
```javascript
var swiper = new Swiper('.swiper-container', {
// другие настройки
delay: 5000, // время показа в миллисекундах для всех слайдов (заменить 5000 на нужное время)
on: {
init: function () {
this.slides.eq(0).css('transition-duration', '8000ms'); // установить длительность показа первого слайда в миллисекундах
},
},
});
```
В данном примере, первый слайд будет показываться в течение 8 секунд (8000 миллисекунд), в то время как все остальные слайды будут меняться каждые 5 секунд (5000 миллисекунд).
Помимо этого, также можно использовать событие `slideChangeTransitionStart`, чтобы изменить длительность показа конкретного слайда (например, если слайды формируются динамически).
Пример:
```javascript
var swiper = new Swiper('.swiper-container', {
// другие настройки
on: {
init: function () {
this.slides.eq(0).css('transition-duration', '8000ms'); // установить длительность показа первого слайда в миллисекундах
},
slideChangeTransitionStart: function () {
var activeSlideIndex = this.activeIndex;
if (activeSlideIndex === 1) {
this.slides.eq(activeSlideIndex).css('transition-duration', '10000ms'); // установить длительность показа второго слайда в миллисекундах
}
},
},
});
```
Таким образом, можно изменить длительность отображения определенного элемента в слайдере, включая случай, когда слайды формируются динамически.
<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>