Skip to content

added CMS Slider & README with features and integration details #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
victoriaplummer merged 1 commit into from
Oct 28, 2025
Merged

added CMS Slider & README with features and integration details #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,16 @@ A dynamic form generator demonstrating:
- **Conditional logic** for showing/hiding fields
- **Data persistence** across steps

### 🎠 [CMS Slider](./cms-slider/)

A carousel slider that integrates with Webflow CMS collections featuring:

- **CMS Collection Integration** extracts and displays items from Webflow CMS Collection list.
- **React Slick** carousel with configurable options (autoplay, infinite loop, dots, arrows).
- **Shadow DOM styling** for proper style isolation in Webflow Code Component.
- **Slot-based content** accepts Webflow CMS collection lists as component slots.
- **Customizable behavior** control slides to show, scroll speed, and autoplay settings.

### 🗺️ [Store Locator](./store-locator/)

A map component and backend API that plots locations demonstrating:
Expand Down
24 changes: 24 additions & 0 deletions cms-slider/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
41 changes: 41 additions & 0 deletions cms-slider/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
# CMS Slider

This code component example is a carousel slider that integrates seamlessly with Webflow CMS collections, allowing you to display dynamic CMS content in an interactive slider format. [See a live example here.](https://cms-slider-4d63c4.webflow.io/)

![](./screenshot/preview-1.png)

## Features

- **CMS Collection Integration** - Automatically extracts and displays items from Webflow CMS Collection lists via slot-based architecture
- **React Slick Carousel** - Powered by React Slick with full carousel functionality
- **Configurable Behavior** - Control slides to show, scroll speed, infinite looping, autoplay, navigation arrows, and dots
- **Slot-Based Content** - Accepts any Webflow CMS collection list as a component slot for maximum flexibility
- **Vite Project Setup** - Fast development experience with Hot Module Replacement (HMR)

## Getting Started

- Install dependencies: `npm i`
- Run `npx webflow library share` to create a code library for this example in your designated Webflow workspace

## Component Properties

| Prop Name | Type | Default | Description |
| ---------------------------- | --------- | ------- | ------------------------------------------------------------ |
| `cmsCollectionComponentSlot` | `Slot` | - | The slot where you place your Webflow CMS Collection List |
| `showCMSCollectionComponent` | `Boolean` | `false` | Toggle visibility of the CMS collection for editing purposes |
| `infinite` | `Boolean` | `true` | Enable infinite looping of slides |
| `slidesToShow` | `Number` | `1` | Number of slides visible at once |
| `slidesToScroll` | `Number` | `1` | Number of slides to scroll on navigation |
| `dots` | `Boolean` | `true` | Show navigation dots below the slider |
| `arrows` | `Boolean` | `true` | Show previous/next navigation arrows |
| `autoplay` | `Boolean` | `true` | Enable automatic slide transitions |
| `autoplaySpeed` | `Number` | `3000` | Delay between auto transitions (in milliseconds) |

## Technical Implementation

This component showcases several advanced patterns for Webflow Code Components:

- **Custom Hook (`useCMSCollectionItems`)** - Extracts CMS list items from Webflow slots using Shadow DOM slot APIs
- **Shadow DOM Style Injection** - Uses `useShadowGlobalStyles` hook to inject Webflow styles into the shadow root
- **Element Cloning** - Clones CMS elements to render them within the slider while preserving their Webflow styling
- **React Slick Integration** - Demonstrates how to integrate third-party React libraries with Webflow Code Components
23 changes: 23 additions & 0 deletions cms-slider/eslint.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'
import { defineConfig, globalIgnores } from 'eslint/config'

export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
js.configs.recommended,
tseslint.configs.recommended,
reactHooks.configs['recommended-latest'],
reactRefresh.configs.vite,
],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
},
},
])
13 changes: 13 additions & 0 deletions cms-slider/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>cms-slider</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
Loading