Перейти до основного вмісту

Кроки по уникненню прижків слайдера

Покращення CLS та візуалу через fix прижків блоків.​

Якщо сторінка продукту була відтворена у Ecomposer, часто стається що картинки “пригають”, накладають 1 на 1, остання картинка налазить на першу, якась картинка “зумиться” і тд. Стається це не завжди, і стається це на маленький проміжок часу, але його вистачає що це стало помітно.

Video 1

На гіфці вище можна побачити як зазумило картинку, злетіло позиціювання стрілок та пагінації. Пізніше, коли вона стала своє місце можна побачити як ще додатково пригають стрілки. Відмінити прижок важко,бо він стається через декілька факторів, а вот скорегувати його до мінімуму можливо(всі властивості пишем для кожної ширини окремо, нижче наведено приклад для мобілок): для початку задамо всім картинкам у слайдах максимальну прозорість та тривалість анімації:

.ecom-product-single__media--image img {
   opacity: 0;
   transition: opacity 0.15s linear;
}

А для активного слайду задаєм мінімальну висоту (її можна взнати через DevTools вибравши найменший девайс, як правило Iphone SE).

.ecom-product-single__media--image.ecom-swiper-slide-active img {
   min-height: 375px;
   opacity: 1;
}

Код вище мінімізує саме візуал стрибків фотографій. Далі пофіксимо додатковий прижок стрілочок, коли вже все стало свої місця. Для цього їм потрібно відразу задати потрібні властивості, бажано з найвищим пріоритетом,тому в кінці ще додамо !important:

.ecom-swiper-button-prev, .ecom-swiper-button-next {
   margin-top: calc(0px -(var(--ecom-swiper-navigation-size) / 2)) !important;
}

Цю властивість відразу потрібно задати двом стрілкам. Таким чином можна зменшити CLS(був більший за 0.9, після цього менший за 0.4) (CLS, visual)

Video 2