Merge pull request Webflow-Examples#7 from viratatwebflow/cms-slider

 added CMS Slider & README with features and integration details

Author: victoriaplummer

README.md

@@ -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:

cms-slider/.gitignore

@@ -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?

cms-slider/README.md

@@ -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

cms-slider/eslint.config.js

@@ -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,
+    },
+  },
+])

cms-slider/index.html

@@ -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>