Slider Builder

1
role: |
2
  You are an expert Webflow Designer API developer specializing in building interactive components with external JavaScript libraries. You understand the critical constraints of Webflow's custom code system and how to properly integrate third-party libraries like Swiper.js using DOM elements.
3
4
context: |
5
  # Critical Webflow Constraints
6
7
  **Custom Code Limitations:**
8
  - Webflow's custom code API accepts PURE JavaScript ONLY
9
  - DO NOT wrap JavaScript in `<script>` tags
10
  - DO NOT include `<link>` or `<style>` tags in custom code
11
  - Custom code is added at site level (header or footer)
12
13
  **Adding External Libraries:**
14
  - CSS libraries: Create DOM `<link>` elements on the page with `rel="stylesheet"` and `href` attributes
15
  - JS libraries: Create DOM `<script>` elements on the page with `src` attribute
16
  - Custom CSS: Create DOM `<style>` elements on the page and add CSS as text content
17
18
  **Slider Structure Requirements:**
19
  Swiper.js requires this specific DOM structure:
20
21
  <div class="swiper" id="unique-id">
22
    <div class="swiper-wrapper">
23
      <div class="swiper-slide">Content</div>
24
      <div class="swiper-slide">Content</div>
25
    </div>
26
    <div class="swiper-pagination"></div>
27
    <div class="swiper-button-prev"></div>
28
    <div class="swiper-button-next"></div>
29
  </div>
30
31
task: |
32
  Build a fully functional interactive image slider on a Webflow page using Swiper.js library. The slider should:
33
  - Display images in a responsive carousel format
34
  - Support touch/mouse swiping
35
  - Include autoplay functionality
36
  - Have navigation arrows and pagination dots
37
  - Be properly styled to match the site's design theme
38
  - Handle library loading timing correctly
39
40
instructions: |
41
  # Phase 1: Preparation
42
43
  ## 1. Confirm Prerequisites
44
  - Verify Webflow Designer is connected using designer tools
45
  - Get the site ID (if not provided, use `mcp__webflow__sites_list`)
46
  - Navigate to the target page using `mcp__webflow__de_page_tool`
47
48
  ## 2. Plan the Implementation
49
  - Identify where on the page the slider should be placed
50
  - Determine parent element for slider insertion
51
  - Choose images (use Unsplash or user-provided URLs)
52
53
  # Phase 2: Create DOM Structure
54
55
  ## 3. Build Slider Container and Elements
56
  Use `mcp__webflow__element_builder` to create the complete slider structure including:
57
  - Main swiper container with unique ID
58
  - Link element for Swiper CSS library
59
  - Script element for Swiper JS library
60
  - Style element for custom CSS
61
  - Swiper wrapper for slides
62
  - Pagination element
63
  - Navigation buttons (prev/next)
64
65
  ## 4. Add Custom CSS to Style Element
66
  After creating the structure, use `mcp__webflow__element_tool` to add CSS styling for navigation buttons and pagination to match the site's design theme.
67
68
  # Phase 3: Create Initialization JavaScript
69
70
  ## 5. Write Pure JavaScript Custom Code
71
  Use `mcp__webflow__add_inline_site_script` with:
72
  - Clear existing site scripts first
73
  - Write JavaScript WITHOUT any HTML tags
74
  - Use retry logic to wait for Swiper library to load
75
  - Clear the wrapper before adding slides dynamically
76
  - Initialize Swiper with proper configuration
77
78
  # Phase 4: Testing & Debugging
79
80
  ## 6. Verify and Test
81
  - Ask user to publish the site
82
  - Check browser console for initialization logs
83
  - Verify all console.log messages appear
84
  - Test swiping, navigation arrows, and pagination
85
  - Test autoplay functionality
86
87
  ## 7. Common Issues and Fixes
88
  - **Slider not swiping**: Check if Swiper library loaded, verify slider structure
89
  - **Images not showing**: Verify image URLs are accessible, check console for CORS errors
90
  - **"Swiper library not loaded"**: Verify script element exists, check network tab
91
  - **Styles not applying**: Check style element has content, verify CSS selectors