Customize Slider Dots in Webflow - Tutorial

Customize Slider Dots in Webflow - Tutorial

28.5K views · 2020-01-05 UI Design
🚀 Watch my Mega Webflow Course for Beginners on Skillshare. Register now to get 2 Free months of Skillshare Premium: https://skl.sh/2TVhf8z

Get started with Webflow today: https://webflow.grsm.io/2455142

In this Webflow Tutorial, I am going to show you how you can customize the slider dots for the slider component in Webflow. We will be using a bit of Custom Code for customizing the slider dots in Webflow.

NOTE: Use Angle Brackets instead of Square Brackets!
NOTE: Use Flower Brackets instead of Curvy Brackets!

[style]
.w-slider-dot (
height: 6px;
background: #6AAAF3;
top: 3px;
)
.w-slider-dot.w-active (
height: 6px;
background: white;
top: 3px;
)
.w-slider-nav.w-round]div (
width: 24px;
border-radius: 8px;
)
[/style]

---------------------------------------­----
UI/UX Design Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1_kDOXCrEGmB58IsLOiIc3

Webflow Course for Beginners:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1N4PxzGE_ywogtBeeOaqc8

Photoshop Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ372RTmi1rQmfqbIqXr3opi

Illustrator Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ0pK595gwPLmcVF-P_jx0V1

After Effects Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ23p3SZD49unrbkh_F8q9Dk

UI Design Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1uHAE-_rAxeDMBnhzzmYuW

Design Resources, Tools and Softwares:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1-qY3TQToZWn3vYWVo6EA9

Adobe XD CC Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ11D_9_jX80GDenpMUWjTtv

eSports Design Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ3lLdkQmG-Ebw90KdChq56P
--------------------------------------------------------------------------------------------
Contact me :
Twitter : https://twitter.com/kvschethan
Facebook : https://facebook.com/designpilot
Mail : designpilot21@gmail.com
Portfolio : https://behance.net/chethankvs
Instagram : https://instagram.com/design_pilot
Discord: https://discord.gg/GtjBpjD
--------------------------------------------------------------------------------------------
LIKE, SHARE, COMMENT & SUBSCRIBE :)
#webflow #nocode #webdesign