The State Changers held a problem-solving session with a focus on Webflow and a component called swiper. They discussed how to implement a swiper in a Webflow context using Javascript, HTML, CSS and other web-based technologies like JS Fiddle.
There was a detailed walkthrough of implementing the swiper directly into Webflow, forgoing initial attempts to test it in a separate JS Fiddle environment. The participants debugged an issue where the swiper was going too wide due to a lack of size constraints, reaching widths up to 33 million pixels. They suggested wrapping the swiper code within a div to constrain its size, allowing a much more manageable display. Beyond solving this layout problem, there was also the discussion of how to initialize the swiper using a webflow.push function, which ensures it runs when the page is loaded. The key learning points were the process of interactively applying and testing the swiper’s styling within their system, problem-solving layout issues, and using Webflow's push function for better control over onload scripts. Throughout the meeting, participants showcased web debugging skills using devtools, understanding the structure of their sites, adjusting CSS properties, and directly running Javascript in the browser. This meeting is valuable for anyone seeking to understand detailed problem-solving techniques in a Webflow context, especially if implementing advanced interactive components like swiper or working with responsive layouts.
(Source: Office Hours 10/18 )
