@designcrowd/fe-shared-lib 1.5.36 → 1.6.0-eng-4039

package/src/atoms/components/Carousel/carousel.stories.js

@@ -1,530 +1,652 @@
-import Icon from '../Icon/Icon.vue';
-import { cards } from './Carousel.fixtures';
-import Carousel from './Carousel.vue';
-
-export default {
-  title: 'Components/Carousel',
-  component: Carousel,
-  tags: ['autodocs'],
-  argTypes: {
-    cards: {
-      control: 'object',
-      description: 'Array of card data to display in the carousel',
-      table: {
-        type: { summary: 'Array<Object>' },
-        defaultValue: { summary: '[]' },
-      },
-    },
-    showControls: {
-      control: 'boolean',
-      description: 'Show/hide navigation arrows',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'true' },
-      },
-    },
-    showBullets: {
-      control: 'boolean',
-      description: 'Show/hide pagination bullets',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'true' },
-      },
-    },
-    hideBulletsOnMobile: {
-      control: 'boolean',
-      description: 'Hide pagination bullets on mobile devices',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'true' },
-      },
-    },
-    navCarousel: {
-      control: 'boolean',
-      description: 'Use alternative navigation styling',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-      },
-    },
-    disableRightClick: {
-      control: 'boolean',
-      description: 'Disable right-click context menu',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-      },
-    },
-    options: {
-      control: 'object',
-      description: 'Swiper options object for customization',
-      table: {
-        type: { summary: 'Object' },
-        defaultValue: { summary: '{}' },
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'A flexible carousel component built with Swiper.js. Supports multiple slides, custom navigation, pagination, and various display options.',
-      },
-    },
-  },
-};
-
-// Default story with interactive controls
-export const Default = {
-  args: {
-    cards,
-    showControls: true,
-    showBullets: true,
-    hideBulletsOnMobile: false,
-    navCarousel: false,
-    options: {
-      loop: true,
-      spaceBetween: 20,
-      slidesPerView: 1,
-      breakpoints: {
-        640: {
-          slidesPerView: 2,
-          slidesPerGroup: 2,
-        },
-        1024: {
-          slidesPerView: 3,
-          slidesPerGroup: 3,
-        },
-      },
-    },
-  },
-  render: (args) => ({
-    components: { Carousel },
-    setup() {
-      return { args };
-    },
-    template: `
-      <div class="tw-p-8">
-        <Carousel
-          :cards="args.cards"
-          :show-controls="args.showControls"
-          :show-bullets="args.showBullets"
-          :hide-bullets-on-mobile="args.hideBulletsOnMobile"
-          :nav-carousel="args.navCarousel"
-          :options="args.options"
-        >
-          <template #slide="{ slide }">
-            <div class="tw-flex tw-flex-col tw-items-center tw-cursor-pointer tw-p-4 tw-bg-gray-50 tw-rounded-lg tw-h-full">
-              <img :src="slide.imageUrl" :alt="slide.name" class="tw-w-full tw-h-48 tw-object-contain tw-mb-4" />
-              <span class="tw-text-lg tw-font-semibold tw-text-center">{{ slide.name }}</span>
-            </div>
-          </template>
-        </Carousel>
-      </div>
-    `,
-  }),
-};
-
-// Single slide view
-export const SingleSlide = {
-  args: {
-    cards,
-    showControls: true,
-    showBullets: true,
-    options: {
-      loop: false,
-      slidesPerView: 1,
-      slidesPerGroup: 1,
-    },
-  },
-  render: (args) => ({
-    components: { Carousel },
-    setup() {
-      return { args };
-    },
-    template: `
-      <div class="tw-p-8 tw-max-w-md tw-mx-auto">
-        <Carousel
-          :cards="args.cards"
-          :show-controls="args.showControls"
-          :show-bullets="args.showBullets"
-          :options="args.options"
-        >
-          <template #slide="{ slide }">
-            <div class="tw-flex tw-flex-col tw-items-center tw-p-6 tw-bg-white tw-rounded-xl tw-shadow-lg">
-              <img :src="slide.imageUrl" :alt="slide.name" class="tw-w-full tw-h-64 tw-object-contain tw-mb-4" />
-              <h3 class="tw-text-xl tw-font-bold tw-text-center">{{ slide.name }}</h3>
-              <p class="tw-text-gray-600 tw-text-center tw-mt-2">Click to learn more</p>
-            </div>
-          </template>
-        </Carousel>
-      </div>
-    `,
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Display one slide at a time with navigation controls.',
-      },
-    },
-  },
-};
-
-// Without navigation controls
-export const WithoutControls = {
-  args: {
-    cards,
-    showControls: false,
-    showBullets: true,
-    options: {
-      loop: true,
-      autoplay: {
-        delay: 3000,
-        disableOnInteraction: false,
-      },
-    },
-  },
-  render: (args) => ({
-    components: { Carousel },
-    setup() {
-      return { args };
-    },
-    template: `
-      <div class="tw-p-8">
-        <Carousel
-          :cards="args.cards"
-          :show-controls="args.showControls"
-          :show-bullets="args.showBullets"
-          :options="args.options"
-        >
-          <template #slide="{ slide }">
-            <div class="tw-flex tw-flex-col tw-items-center tw-p-4">
-              <img :src="slide.imageUrl" :alt="slide.name" class="tw-w-full tw-h-40 tw-object-contain tw-mb-2" />
-              <span class="tw-text-center tw-font-medium">{{ slide.name }}</span>
-            </div>
-          </template>
-        </Carousel>
-      </div>
-    `,
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Auto-playing carousel without navigation arrows. Uses only pagination bullets for navigation.',
-      },
-    },
-  },
-};
-
-// Without bullets
-export const WithoutBullets = {
-  args: {
-    cards,
-    showControls: true,
-    showBullets: false,
-    options: {
-      loop: true,
-      slidesPerView: 2,
-      spaceBetween: 20,
-    },
-  },
-  render: (args) => ({
-    components: { Carousel },
-    setup() {
-      return { args };
-    },
-    template: `
-      <div class="tw-p-8">
-        <Carousel
-          :cards="args.cards"
-          :show-controls="args.showControls"
-          :show-bullets="args.showBullets"
-          :options="args.options"
-        >
-          <template #slide="{ slide }">
-            <div class="tw-flex tw-flex-col tw-items-center tw-p-4 tw-bg-gray-100 tw-rounded">
-              <img :src="slide.imageUrl" :alt="slide.name" class="tw-w-full tw-h-32 tw-object-contain tw-mb-2" />
-              <span class="tw-text-center">{{ slide.name }}</span>
-            </div>
-          </template>
-        </Carousel>
-      </div>
-    `,
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Carousel with arrow controls only, no pagination bullets.',
-      },
-    },
-  },
-};
-
-// Custom arrow styling
-export const CustomArrows = {
-  args: {
-    cards,
-  },
-  render: (args) => ({
-    components: { Carousel, Icon },
-    setup() {
-      return { args };
-    },
-    template: `
-      <div class="tw-p-8">
-        <Carousel :cards="args.cards" :options="{ loop: true }">
-          <template #arrow-left>
-            <div class="tw-bg-blue-500 tw-text-white tw-rounded-full tw-p-3 tw-cursor-pointer hover:tw-bg-blue-600 tw-transition tw-shadow-lg">
-              <Icon classes="tw-transform tw-rotate-180" name="chevron-right" size="lg" color="white" />
-            </div>
-          </template>
-          <template #slide="{ slide }">
-            <div class="tw-flex tw-flex-col tw-items-center tw-p-4">
-              <img :src="slide.imageUrl" :alt="slide.name" class="tw-w-full tw-h-40 tw-object-contain tw-mb-2" />
-              <span class="tw-text-center tw-font-medium">{{ slide.name }}</span>
-            </div>
-          </template>
-          <template #arrow-right>
-            <div class="tw-bg-blue-500 tw-text-white tw-rounded-full tw-p-3 tw-cursor-pointer hover:tw-bg-blue-600 tw-transition tw-shadow-lg">
-              <Icon name="chevron-right" size="lg" color="white" />
-            </div>
-          </template>
-        </Carousel>
-      </div>
-    `,
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Carousel with custom-styled navigation arrows using the arrow slots.',
-      },
-    },
-  },
-};
-
-// Free mode (continuous scroll)
-export const FreeMode = {
-  args: {
-    cards: [...cards, ...cards, ...cards],
-  },
-  render: (args) => ({
-    components: { Carousel },
-    setup() {
-      return { args };
-    },
-    template: `
-      <div class="tw-p-8">
-        <Carousel 
-          :cards="args.cards" 
-          :options="{
-            loop: false,
-            spaceBetween: 20,
-            freeMode: true,
-            slidesPerView: 'auto',
-          }"
-        >
-          <template #slide="{ slide }">
-            <div class="tw-flex tw-flex-col tw-items-center tw-p-4 tw-bg-white tw-rounded-lg tw-shadow" style="width: 200px;">
-              <img :src="slide.imageUrl" :alt="slide.name" class="tw-w-full tw-h-32 tw-object-contain tw-mb-2" />
-              <span class="tw-text-center tw-text-sm tw-font-medium">{{ slide.name }}</span>
-            </div>
-          </template>
-        </Carousel>
-      </div>
-    `,
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Free scrolling mode where users can drag freely without snapping to slides.',
-      },
-    },
-  },
-};
-
-// Centered slides
-export const CenteredSlides = {
-  args: {
-    cards: [...cards, ...cards],
-  },
-  render: (args) => ({
-    components: { Carousel },
-    setup() {
-      return { args };
-    },
-    template: `
-      <div class="tw-p-8">
-        <Carousel 
-          :cards="args.cards" 
-          :options="{
-            loop: true,
-            centeredSlides: true,
-            slidesPerView: 1.5,
-            spaceBetween: 30,
-          }"
-        >
-          <template #slide="{ slide }">
-            <div class="tw-flex tw-flex-col tw-items-center tw-p-6 tw-bg-gradient-to-br tw-from-purple-100 tw-to-blue-100 tw-rounded-xl">
-              <img :src="slide.imageUrl" :alt="slide.name" class="tw-w-full tw-h-48 tw-object-contain tw-mb-4" />
-              <span class="tw-text-center tw-text-lg tw-font-semibold">{{ slide.name }}</span>
-            </div>
-          </template>
-        </Carousel>
-      </div>
-    `,
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Carousel with centered active slide and partial view of adjacent slides.',
-      },
-    },
-  },
-};
-
-// Multiple carousels on same page
-export const MultipleCarousels = {
-  render: () => ({
-    components: { Carousel },
-    setup() {
-      return {
-        cards,
-        swiperOne: {
-          options: {
-            loop: true,
-            navigation: {
-              prevEl: '.carousel__button-prev--1',
-              nextEl: '.carousel__button-next--1',
-            },
-            pagination: {
-              el: '.pagination--1',
-            },
-          },
-          navigationUniqueIndexer: '1',
-        },
-        swiperTwo: {
-          options: {
-            loop: true,
-            navigation: {
-              prevEl: '.carousel__button-prev--2',
-              nextEl: '.carousel__button-next--2',
-            },
-            pagination: {
-              el: '.pagination--2',
-            },
-          },
-          navigationUniqueIndexer: '2',
-        },
-      };
-    },
-    template: `
-      <div class="tw-p-8 tw-space-y-12">
-        <div>
-          <h3 class="tw-text-xl tw-font-bold tw-mb-4 tw-text-center">First Carousel</h3>
-          <div class="tw-max-w-md tw-mx-auto">
-            <Carousel
-              :cards="cards"
-              :show-bullets="true"
-              :swiper-ref="swiperOne.navigationUniqueIndexer"
-              :navigation-unique-indexer="swiperOne.navigationUniqueIndexer"
-              :options="swiperOne.options"
-            >
-              <template #slide="{ slide }">
-                <div class="tw-flex tw-flex-col tw-items-center tw-p-4 tw-bg-blue-50 tw-rounded-lg">
-                  <img :src="slide.imageUrl" :alt="slide.name" class="tw-w-full tw-h-40 tw-object-contain tw-mb-2" />
-                  <span class="tw-text-center tw-font-medium">{{ slide.name }}</span>
-                </div>
-              </template>
-            </Carousel>
-          </div>
-        </div>
-        
-        <div>
-          <h3 class="tw-text-xl tw-font-bold tw-mb-4 tw-text-center">Second Carousel</h3>
-          <div class="tw-max-w-md tw-mx-auto">
-            <Carousel
-              :cards="cards"
-              :show-bullets="true"
-              :swiper-ref="swiperTwo.navigationUniqueIndexer"
-              :navigation-unique-indexer="swiperTwo.navigationUniqueIndexer"
-              :options="swiperTwo.options"
-            >
-              <template #slide="{ slide }">
-                <div class="tw-flex tw-flex-col tw-items-center tw-p-4 tw-bg-green-50 tw-rounded-lg">
-                  <img :src="slide.imageUrl" :alt="slide.name" class="tw-w-full tw-h-40 tw-object-contain tw-mb-2" />
-                  <span class="tw-text-center tw-font-medium">{{ slide.name }}</span>
-                </div>
-              </template>
-            </Carousel>
-          </div>
-        </div>
-      </div>
-    `,
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Example of multiple independent carousels on the same page. Each requires unique navigationUniqueIndexer.',
-      },
-    },
-  },
-};
-
-// Responsive breakpoints demo
-export const ResponsiveBreakpoints = {
-  args: {
-    cards: [...cards, ...cards],
-  },
-  render: (args) => ({
-    components: { Carousel },
-    setup() {
-      return { args };
-    },
-    template: `
-      <div class="tw-p-8">
-        <div class="tw-mb-4 tw-p-4 tw-bg-blue-50 tw-rounded-lg">
-          <p class="tw-text-sm tw-font-semibold tw-mb-2">Responsive behavior:</p>
-          <ul class="tw-text-sm tw-space-y-1">
-            <li>• Mobile (< 640px): 1 slide</li>
-            <li>• Tablet (640px - 1023px): 2 slides</li>
-            <li>• Desktop (≥ 1024px): 4 slides</li>
-          </ul>
-        </div>
-        <Carousel 
-          :cards="args.cards" 
-          :options="{
-            loop: true,
-            spaceBetween: 20,
-            slidesPerView: 1,
-            slidesPerGroup: 1,
-            breakpoints: {
-              640: {
-                slidesPerView: 2,
-                slidesPerGroup: 2,
-              },
-              1024: {
-                slidesPerView: 4,
-                slidesPerGroup: 4,
-              },
-            },
-          }"
-        >
-          <template #slide="{ slide }">
-            <div class="tw-flex tw-flex-col tw-items-center tw-p-4 tw-bg-white tw-border tw-border-gray-200 tw-rounded-lg">
-              <img :src="slide.imageUrl" :alt="slide.name" class="tw-w-full tw-h-32 tw-object-contain tw-mb-2" />
-              <span class="tw-text-center tw-text-sm tw-font-medium">{{ slide.name }}</span>
-            </div>
-          </template>
-        </Carousel>
-      </div>
-    `,
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Demonstrates responsive behavior with different numbers of slides at different screen sizes.',
-      },
-    },
-  },
-};
+import Icon from '../Icon/Icon.vue';
+import { cards } from './Carousel.fixtures';
+import Carousel from './Carousel.vue';
+
+export default {
+  title: 'Components/Carousel',
+  component: Carousel,
+  tags: ['autodocs'],
+  argTypes: {
+    cards: {
+      control: 'object',
+      description: 'Array of card data to display in the carousel',
+      table: {
+        type: { summary: 'Array<Object>' },
+        defaultValue: { summary: '[]' },
+      },
+    },
+    showControls: {
+      control: 'boolean',
+      description: 'Show/hide navigation arrows',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+      },
+    },
+    showBullets: {
+      control: 'boolean',
+      description: 'Show/hide pagination bullets',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+      },
+    },
+    hideBulletsOnMobile: {
+      control: 'boolean',
+      description: 'Hide pagination bullets on mobile devices',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+      },
+    },
+    navCarousel: {
+      control: 'boolean',
+      description: 'Use alternative navigation styling',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    disableRightClick: {
+      control: 'boolean',
+      description: 'Disable right-click context menu',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    options: {
+      control: 'object',
+      description: 'Swiper options object for customization',
+      table: {
+        type: { summary: 'Object' },
+        defaultValue: { summary: '{}' },
+      },
+    },
+    isMousewheelScrollEnabled: {
+      control: 'boolean',
+      description: 'Enable horizontal trackpad/mousewheel scrolling',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    shouldShowScrollbar: {
+      control: 'boolean',
+      description: 'Show or hide the native scrollbar (shown by default)',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A flexible carousel component built with Swiper.js. Supports multiple slides, custom navigation, pagination, and various display options.',
+      },
+    },
+  },
+};
+
+// Default story with interactive controls
+export const Default = {
+  args: {
+    cards,
+    showControls: true,
+    showBullets: true,
+    hideBulletsOnMobile: false,
+    navCarousel: false,
+    options: {
+      loop: true,
+      spaceBetween: 20,
+      slidesPerView: 1,
+      breakpoints: {
+        640: {
+          slidesPerView: 2,
+          slidesPerGroup: 2,
+        },
+        1024: {
+          slidesPerView: 3,
+          slidesPerGroup: 3,
+        },
+      },
+    },
+  },
+  render: (args) => ({
+    components: { Carousel },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="tw-p-8">
+        <Carousel
+          :cards="args.cards"
+          :show-controls="args.showControls"
+          :show-bullets="args.showBullets"
+          :hide-bullets-on-mobile="args.hideBulletsOnMobile"
+          :nav-carousel="args.navCarousel"
+          :options="args.options"
+        >
+          <template #slide="{ slide }">
+            <div class="tw-flex tw-flex-col tw-items-center tw-cursor-pointer tw-p-4 tw-bg-gray-50 tw-rounded-lg tw-h-full">
+              <img :src="slide.imageUrl" :alt="slide.name" class="tw-w-full tw-h-48 tw-object-contain tw-mb-4" />
+              <span class="tw-text-lg tw-font-semibold tw-text-center">{{ slide.name }}</span>
+            </div>
+          </template>
+        </Carousel>
+      </div>
+    `,
+  }),
+};
+
+// Single slide view
+export const SingleSlide = {
+  args: {
+    cards,
+    showControls: true,
+    showBullets: true,
+    options: {
+      loop: false,
+      slidesPerView: 1,
+      slidesPerGroup: 1,
+    },
+  },
+  render: (args) => ({
+    components: { Carousel },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="tw-p-8 tw-max-w-md tw-mx-auto">
+        <Carousel
+          :cards="args.cards"
+          :show-controls="args.showControls"
+          :show-bullets="args.showBullets"
+          :options="args.options"
+        >
+          <template #slide="{ slide }">
+            <div class="tw-flex tw-flex-col tw-items-center tw-p-6 tw-bg-white tw-rounded-xl tw-shadow-lg">
+              <img :src="slide.imageUrl" :alt="slide.name" class="tw-w-full tw-h-64 tw-object-contain tw-mb-4" />
+              <h3 class="tw-text-xl tw-font-bold tw-text-center">{{ slide.name }}</h3>
+              <p class="tw-text-gray-600 tw-text-center tw-mt-2">Click to learn more</p>
+            </div>
+          </template>
+        </Carousel>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Display one slide at a time with navigation controls.',
+      },
+    },
+  },
+};
+
+// Without navigation controls
+export const WithoutControls = {
+  args: {
+    cards,
+    showControls: false,
+    showBullets: true,
+    options: {
+      loop: true,
+      autoplay: {
+        delay: 3000,
+        disableOnInteraction: false,
+      },
+    },
+  },
+  render: (args) => ({
+    components: { Carousel },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="tw-p-8">
+        <Carousel
+          :cards="args.cards"
+          :show-controls="args.showControls"
+          :show-bullets="args.showBullets"
+          :options="args.options"
+        >
+          <template #slide="{ slide }">
+            <div class="tw-flex tw-flex-col tw-items-center tw-p-4">
+              <img :src="slide.imageUrl" :alt="slide.name" class="tw-w-full tw-h-40 tw-object-contain tw-mb-2" />
+              <span class="tw-text-center tw-font-medium">{{ slide.name }}</span>
+            </div>
+          </template>
+        </Carousel>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Auto-playing carousel without navigation arrows. Uses only pagination bullets for navigation.',
+      },
+    },
+  },
+};
+
+// Without bullets
+export const WithoutBullets = {
+  args: {
+    cards,
+    showControls: true,
+    showBullets: false,
+    options: {
+      loop: true,
+      slidesPerView: 2,
+      spaceBetween: 20,
+    },
+  },
+  render: (args) => ({
+    components: { Carousel },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="tw-p-8">
+        <Carousel
+          :cards="args.cards"
+          :show-controls="args.showControls"
+          :show-bullets="args.showBullets"
+          :options="args.options"
+        >
+          <template #slide="{ slide }">
+            <div class="tw-flex tw-flex-col tw-items-center tw-p-4 tw-bg-gray-100 tw-rounded">
+              <img :src="slide.imageUrl" :alt="slide.name" class="tw-w-full tw-h-32 tw-object-contain tw-mb-2" />
+              <span class="tw-text-center">{{ slide.name }}</span>
+            </div>
+          </template>
+        </Carousel>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Carousel with arrow controls only, no pagination bullets.',
+      },
+    },
+  },
+};
+
+// Custom arrow styling
+export const CustomArrows = {
+  args: {
+    cards,
+  },
+  render: (args) => ({
+    components: { Carousel, Icon },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="tw-p-8">
+        <Carousel :cards="args.cards" :options="{ loop: true }">
+          <template #arrow-left>
+            <div class="tw-bg-blue-500 tw-text-white tw-rounded-full tw-p-3 tw-cursor-pointer hover:tw-bg-blue-600 tw-transition tw-shadow-lg">
+              <Icon classes="tw-transform tw-rotate-180" name="chevron-right" size="lg" color="white" />
+            </div>
+          </template>
+          <template #slide="{ slide }">
+            <div class="tw-flex tw-flex-col tw-items-center tw-p-4">
+              <img :src="slide.imageUrl" :alt="slide.name" class="tw-w-full tw-h-40 tw-object-contain tw-mb-2" />
+              <span class="tw-text-center tw-font-medium">{{ slide.name }}</span>
+            </div>
+          </template>
+          <template #arrow-right>
+            <div class="tw-bg-blue-500 tw-text-white tw-rounded-full tw-p-3 tw-cursor-pointer hover:tw-bg-blue-600 tw-transition tw-shadow-lg">
+              <Icon name="chevron-right" size="lg" color="white" />
+            </div>
+          </template>
+        </Carousel>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Carousel with custom-styled navigation arrows using the arrow slots.',
+      },
+    },
+  },
+};
+
+// Free mode (continuous scroll)
+export const FreeMode = {
+  args: {
+    cards: [...cards, ...cards, ...cards],
+  },
+  render: (args) => ({
+    components: { Carousel },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="tw-p-8">
+        <Carousel 
+          :cards="args.cards" 
+          :options="{
+            loop: false,
+            spaceBetween: 20,
+            freeMode: true,
+            slidesPerView: 'auto',
+          }"
+        >
+          <template #slide="{ slide }">
+            <div class="tw-flex tw-flex-col tw-items-center tw-p-4 tw-bg-white tw-rounded-lg tw-shadow" style="width: 200px;">
+              <img :src="slide.imageUrl" :alt="slide.name" class="tw-w-full tw-h-32 tw-object-contain tw-mb-2" />
+              <span class="tw-text-center tw-text-sm tw-font-medium">{{ slide.name }}</span>
+            </div>
+          </template>
+        </Carousel>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Free scrolling mode where users can drag freely without snapping to slides.',
+      },
+    },
+  },
+};
+
+// Centered slides
+export const CenteredSlides = {
+  args: {
+    cards: [...cards, ...cards],
+  },
+  render: (args) => ({
+    components: { Carousel },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="tw-p-8">
+        <Carousel 
+          :cards="args.cards" 
+          :options="{
+            loop: true,
+            centeredSlides: true,
+            slidesPerView: 1.5,
+            spaceBetween: 30,
+          }"
+        >
+          <template #slide="{ slide }">
+            <div class="tw-flex tw-flex-col tw-items-center tw-p-6 tw-bg-gradient-to-br tw-from-purple-100 tw-to-blue-100 tw-rounded-xl">
+              <img :src="slide.imageUrl" :alt="slide.name" class="tw-w-full tw-h-48 tw-object-contain tw-mb-4" />
+              <span class="tw-text-center tw-text-lg tw-font-semibold">{{ slide.name }}</span>
+            </div>
+          </template>
+        </Carousel>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Carousel with centered active slide and partial view of adjacent slides.',
+      },
+    },
+  },
+};
+
+// Multiple carousels on same page
+export const MultipleCarousels = {
+  render: () => ({
+    components: { Carousel },
+    setup() {
+      return {
+        cards,
+        swiperOne: {
+          options: {
+            loop: true,
+            navigation: {
+              prevEl: '.carousel__button-prev--1',
+              nextEl: '.carousel__button-next--1',
+            },
+            pagination: {
+              el: '.pagination--1',
+            },
+          },
+          navigationUniqueIndexer: '1',
+        },
+        swiperTwo: {
+          options: {
+            loop: true,
+            navigation: {
+              prevEl: '.carousel__button-prev--2',
+              nextEl: '.carousel__button-next--2',
+            },
+            pagination: {
+              el: '.pagination--2',
+            },
+          },
+          navigationUniqueIndexer: '2',
+        },
+      };
+    },
+    template: `
+      <div class="tw-p-8 tw-space-y-12">
+        <div>
+          <h3 class="tw-text-xl tw-font-bold tw-mb-4 tw-text-center">First Carousel</h3>
+          <div class="tw-max-w-md tw-mx-auto">
+            <Carousel
+              :cards="cards"
+              :show-bullets="true"
+              :swiper-ref="swiperOne.navigationUniqueIndexer"
+              :navigation-unique-indexer="swiperOne.navigationUniqueIndexer"
+              :options="swiperOne.options"
+            >
+              <template #slide="{ slide }">
+                <div class="tw-flex tw-flex-col tw-items-center tw-p-4 tw-bg-blue-50 tw-rounded-lg">
+                  <img :src="slide.imageUrl" :alt="slide.name" class="tw-w-full tw-h-40 tw-object-contain tw-mb-2" />
+                  <span class="tw-text-center tw-font-medium">{{ slide.name }}</span>
+                </div>
+              </template>
+            </Carousel>
+          </div>
+        </div>
+        
+        <div>
+          <h3 class="tw-text-xl tw-font-bold tw-mb-4 tw-text-center">Second Carousel</h3>
+          <div class="tw-max-w-md tw-mx-auto">
+            <Carousel
+              :cards="cards"
+              :show-bullets="true"
+              :swiper-ref="swiperTwo.navigationUniqueIndexer"
+              :navigation-unique-indexer="swiperTwo.navigationUniqueIndexer"
+              :options="swiperTwo.options"
+            >
+              <template #slide="{ slide }">
+                <div class="tw-flex tw-flex-col tw-items-center tw-p-4 tw-bg-green-50 tw-rounded-lg">
+                  <img :src="slide.imageUrl" :alt="slide.name" class="tw-w-full tw-h-40 tw-object-contain tw-mb-2" />
+                  <span class="tw-text-center tw-font-medium">{{ slide.name }}</span>
+                </div>
+              </template>
+            </Carousel>
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Example of multiple independent carousels on the same page. Each requires unique navigationUniqueIndexer.',
+      },
+    },
+  },
+};
+
+// Mousewheel scrolling
+export const MousewheelScroll = {
+  args: {
+    cards: [...cards, ...cards],
+    isMousewheelScrollEnabled: true,
+    shouldShowScrollbar: false,
+    showControls: true,
+    showBullets: true,
+    options: {
+      loop: false,
+      spaceBetween: 20,
+      slidesPerView: 1,
+      breakpoints: {
+        640: {
+          slidesPerView: 2,
+          slidesPerGroup: 2,
+        },
+        1024: {
+          slidesPerView: 3,
+          slidesPerGroup: 3,
+        },
+      },
+    },
+  },
+  render: (args) => ({
+    components: { Carousel },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="tw-p-8">
+        <p class="tw-text-sm tw-text-gray-600 tw-mb-4">Use trackpad horizontal swipe or mouse scroll wheel to navigate.</p>
+        <Carousel
+          :cards="args.cards"
+          :is-mousewheel-scroll-enabled="args.isMousewheelScrollEnabled"
+          :should-show-scrollbar="args.shouldShowScrollbar"
+          :show-controls="args.showControls"
+          :show-bullets="args.showBullets"
+          :options="args.options"
+        >
+          <template #slide="{ slide }">
+            <div class="tw-flex tw-flex-col tw-items-center tw-cursor-pointer tw-p-4 tw-bg-gray-50 tw-rounded-lg tw-h-full">
+              <img :src="slide.imageUrl" :alt="slide.name" class="tw-w-full tw-h-48 tw-object-contain tw-mb-4" />
+              <span class="tw-text-lg tw-font-semibold tw-text-center">{{ slide.name }}</span>
+            </div>
+          </template>
+        </Carousel>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Carousel with native trackpad/mousewheel horizontal scrolling enabled. Arrow buttons stay synchronized with scroll position.',
+      },
+    },
+  },
+};
+
+// Mousewheel with free mode
+export const MousewheelFreeMode = {
+  args: {
+    cards: [...cards, ...cards, ...cards],
+    isMousewheelScrollEnabled: true,
+    shouldShowScrollbar: false,
+  },
+  render: (args) => ({
+    components: { Carousel },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="tw-p-8">
+        <p class="tw-text-sm tw-text-gray-600 tw-mb-4">Free-scrolling with mousewheel support. Scrolls continuously without snapping.</p>
+        <Carousel
+          :cards="args.cards"
+          :is-mousewheel-scroll-enabled="args.isMousewheelScrollEnabled"
+          :should-show-scrollbar="args.shouldShowScrollbar"
+          :options="{
+            loop: false,
+            spaceBetween: 20,
+            freeMode: true,
+            slidesPerView: 'auto',
+          }"
+        >
+          <template #slide="{ slide }">
+            <div class="tw-flex tw-flex-col tw-items-center tw-p-4 tw-bg-white tw-rounded-lg tw-shadow" style="width: 200px;">
+              <img :src="slide.imageUrl" :alt="slide.name" class="tw-w-full tw-h-32 tw-object-contain tw-mb-2" />
+              <span class="tw-text-center tw-text-sm tw-font-medium">{{ slide.name }}</span>
+            </div>
+          </template>
+        </Carousel>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Mousewheel scrolling combined with free mode for continuous smooth scrolling without snapping to slides.',
+      },
+    },
+  },
+};
+
+// Responsive breakpoints demo
+export const ResponsiveBreakpoints = {
+  args: {
+    cards: [...cards, ...cards],
+  },
+  render: (args) => ({
+    components: { Carousel },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="tw-p-8">
+        <div class="tw-mb-4 tw-p-4 tw-bg-blue-50 tw-rounded-lg">
+          <p class="tw-text-sm tw-font-semibold tw-mb-2">Responsive behavior:</p>
+          <ul class="tw-text-sm tw-space-y-1">
+            <li>• Mobile (< 640px): 1 slide</li>
+            <li>• Tablet (640px - 1023px): 2 slides</li>
+            <li>• Desktop (≥ 1024px): 4 slides</li>
+          </ul>
+        </div>
+        <Carousel 
+          :cards="args.cards" 
+          :options="{
+            loop: true,
+            spaceBetween: 20,
+            slidesPerView: 1,
+            slidesPerGroup: 1,
+            breakpoints: {
+              640: {
+                slidesPerView: 2,
+                slidesPerGroup: 2,
+              },
+              1024: {
+                slidesPerView: 4,
+                slidesPerGroup: 4,
+              },
+            },
+          }"
+        >
+          <template #slide="{ slide }">
+            <div class="tw-flex tw-flex-col tw-items-center tw-p-4 tw-bg-white tw-border tw-border-gray-200 tw-rounded-lg">
+              <img :src="slide.imageUrl" :alt="slide.name" class="tw-w-full tw-h-32 tw-object-contain tw-mb-2" />
+              <span class="tw-text-center tw-text-sm tw-font-medium">{{ slide.name }}</span>
+            </div>
+          </template>
+        </Carousel>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstrates responsive behavior with different numbers of slides at different screen sizes.',
+      },
+    },
+  },
+};