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
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