Кастомний колір навігаційних крапок для нативного слайдера
Use Case
Ті з вас, хто вже використовував нативний компонент <slider>, помітив, що всередині Webflow Designer немає можливості стилізувати колір навігаційних крапок, використовуючи панель стилів. Саме тому, я вирішив підготувати короткий гайд, як вирішити кейси, коли нам потрібно налаштувати користувацькі стилі для цього елементу.
Для цього нам знадобиться додати всього декілька рядків кастомного CSS.
Додавання кастомного коду
Ось яким чином ти можеш налаштовувати користувацькі стилі для навігаційних крапок слайдеру. Додай цей код в розділ <head> або в налаштуваннях сторінки, або в налаштуваннях сайту.
<style>
.w-slider-dot {
background: #6D88F6 !important;
width: 10px;
height: 10px;
}
.w-slider-dot.w-active {
background: #0B39F0 !important;
width: 12px;
height: 12px;
}
</style>
Як правильно користуватися параметрами сніпету?
Для того, щоб адаптувати налаштування CSS парамтерів відповідно до свого проєкту, достатньо змінити параметр <background>. В ідеалі перший колір повинен бути світлішим, тоді як другий – більш насиченим, оскільки саме він буде відповідати за активний стан крапки.
Для твоєї зручності я також додав можливість керувати розміром крапок. Так у моєму прикладі крапка в активному стані має значення у 12px, а в стані спокою 10px. Звісно ти також можеш керувати розміром крапок з панелі стилів. Для цього тобі потрібно перейти до секції <Typography> та внести зміни у величину тексту. Проте в такому випадку, ти не зможеш налаштувати окремі стилі для різних станів крапок (none, active).
Пам'ятай, що кастомний код, який ти інтегруєш на свій сайт не працює в режимі перегляду! Для того, щоб переконатися, що код відпрацьовує, тобі потрібно опублікувати сайт та переглянути його перейшовши за лінком, який вказує на твій тестовий домен "назва-твого-проекту-webflow.io" або на домен, який ти підключив до проекту.
Це все, сподіваюсь цей сніпет був корисним для твого проєкту!
