The State Changers had a meeting to discuss troubleshooting some problematic code. The primary challenge dealt with a web development issue where certain elements were not displaying correctly on a web page build in Webflow. The elements in question were part of an image slide show enabled by 'Swiper', a JavaScript library.
David, one of the State Changers, noticed that the slideshow items were not displaying at all on the Webflow page, while they worked just fine within the JSFiddle, an online environment for testing and showcasing user-created HTML, CSS, and JavaScript code snippets. As the team investigated, they noticed several issues: 1. The translate3d property, part of CSS transformations, was offsetting elements significantly off-screen on the Webflow setup than it did on the JSFiddle setup. This seemed to indicate that 'Swiper' was miscalculating the number of slideshow elements, causing it to travel much further than needed. 2. There seemed to be a timing issue leading to the misinterpretation of the number of elements. It was suggested that the initiation of Swiper might need to be moved within a 'Webflow.push' function to ensure proper timing and correct element counting. 3.In addition, there was an attempt to check if having two 'swiper' classes, which could have caused double duplication and hence the error. But this hypothesis got eliminated when the script didn't run after changing from a class selector to an ID selector. The meeting ended by narrowing down that the problem had to do with the Swiper JavaScript running incorrectly on Webflow. This could be due to different base structures in Webflow when compared to JSFiddle, as there was still uncertainty at the close of the meeting.
(Source: Office Hours 10/26 )
