How to build a CMS Testimonial slider in Webflow (simple tutorial)

แชร์
ฝัง
  • เผยแพร่เมื่อ 8 ต.ค. 2024
  • Get the full Webflow couse here:
    www.nocode.mba...
    In this video, we're tackling a popular yet challenging feature of website design-creating a testimonial slider in Webflow.
    💡 Sliders are everywhere-clients love them, and they feature in almost every project. But Webflow's native slider often falls short when dealing with CMS collections or more complex designs. That’s why today, we're going beyond the basics and building a custom CMS testimonial slider using Swiper.js. This tutorial will guide you through every step: from building the slider from scratch, importing testimonial data using Google Sheets, to styling and scripting the slider to perfection.
    Here's what you can expect:
    We’ll start by creating a new CMS collection in Webflow to hold all the testimonials.
    Then, we’ll import data directly from Google Sheets-speeding up the whole process when working with lots of entries.
    Next, we’ll dive into building the slider, applying dynamic data from our CMS, and making it responsive.
    Finally, we integrate Swiper.js, using custom code to achieve the desired design effect, complete with dynamic pagination, looping slides, and autoplay settings.
    This is premium content for anyone looking to up their game in Webflow, especially when it comes to building more interactive, client-friendly features.
    Tools Mentioned:
    🛠 Webflow: webflow.com/
    🛠 Swiper.js: swiperjs.com/
    🛠 Figma: figma.com/
    🛠 Google Sheets: sheets.google....
    💡 ABOUT NO CODE MBA
    We want to teach the 99% of the world who can’t code how to change their life building apps, websites, and automations.
    Our mission is to make building online accessible to anyone who’s curious and willing to learn. No-code democratizes the digital economy. Instead of having to $10k+ to hire a developer or learn to code, No Code MBA makes education for building apps, websites, and automations accessible to anyone.
    Discover more at www.nocode.mba

ความคิดเห็น •