diff --git a/package-lock.json b/package-lock.json
index 8db1dbda..d17a161b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,9 @@
       "name": "@muenchen/muc-patternlab-vue",
       "version": "0.1.0",
       "license": "MIT",
+      "dependencies": {
+        "@splidejs/vue-splide": "github:joris-gallot/vue-splide"
+      },
       "devDependencies": {
         "@muenchen/prettier-codeformat": "1.0.2",
         "@rushstack/eslint-patch": "1.10.4",
@@ -2211,6 +2214,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@splidejs/splide": {
+      "version": "4.1.4",
+      "integrity": "sha512-5I30evTJcAJQXt6vJ26g2xEkG+l1nXcpEw4xpKh0/FWQ8ozmAeTbtniVtVmz2sH1Es3vgfC4SS8B2X4o5JMptA==",
+      "license": "MIT"
+    },
+    "node_modules/@splidejs/vue-splide": {
+      "version": "0.6.12",
+      "resolved": "git+ssh://git@github.com/joris-gallot/vue-splide.git#6f0199b1a3b09f943db07c7a2dedc9b6e4a917d0",
+      "license": "MIT",
+      "dependencies": {
+        "@splidejs/splide": "^4.1.3"
+      }
+    },
     "node_modules/@storybook/addon-a11y": {
       "version": "8.4.7",
       "integrity": "sha512-GpUvXp6n25U1ZSv+hmDC+05BEqxWdlWjQTb/GaboRXZQeMBlze6zckpVb66spjmmtQAIISo0eZxX1+mGcVR7lA==",
diff --git a/package.json b/package.json
index 4d88fd2d..064bf56e 100644
--- a/package.json
+++ b/package.json
@@ -76,5 +76,8 @@
     "vite-plugin-dts": "4.4.0",
     "vitest": "2.1.8",
     "vue-tsc": "2.2.0"
+  },
+  "dependencies": {
+    "@splidejs/vue-splide": "github:joris-gallot/vue-splide"
   }
 }
diff --git a/src/components/Slider/MucSlider.stories.ts b/src/components/Slider/MucSlider.stories.ts
new file mode 100644
index 00000000..7f0fb4c0
--- /dev/null
+++ b/src/components/Slider/MucSlider.stories.ts
@@ -0,0 +1,39 @@
+import MucCard from "../Card/MucCard.vue";
+import MucSlider from "./MucSlider.vue";
+import MucSliderItem from "./MucSliderItem.vue";
+
+export default {
+  components: { MucSliderItem, MucSlider },
+  component: MucSlider,
+  title: "MucSlider",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: `A wrapping layout to show elements in a carousel and slide them, for example [MucCards](/docs/muccard--docs).
+
+🔗 Patternlab-Docs (https://patternlab.muenchen.space/?p=components-slider-quote)
+`,
+      },
+    },
+  },
+};
+
+export const Template = () => ({
+  components: { MucCard, MucSlider, MucSliderItem },
+  template: `
+      <MucSlider>
+        <MucSliderItem v-for="index in 5" :key="index">
+          <MucCard
+              title="Lorem Ipsum"
+              tagline="Dolor"
+          >
+            <template #content>
+              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+              dolore magna aliquyam erat, sed diam voluptua.
+            </template>
+          </MucCard>
+        </MucSliderItem>
+      </MucSlider>
+    `,
+});
diff --git a/src/components/Slider/MucSlider.vue b/src/components/Slider/MucSlider.vue
new file mode 100644
index 00000000..13b6954f
--- /dev/null
+++ b/src/components/Slider/MucSlider.vue
@@ -0,0 +1,130 @@
+<template>
+  <div
+    class="m-component m-component-slider-comment"
+    style="overflow: hidden"
+  >
+    <div class="container">
+      <div class="m-component__grid">
+        <div class="m-component__column">
+          <section
+            class="m-slider m-slider--visible-preview"
+            aria-label="Slider mit Elementen"
+            data-m-slider-splide="m-slider-comment"
+          >
+            <button
+              v-if="showBackArrow"
+              aria-label="Vorheriges Element"
+              class="previous-button is-control"
+              @click="prevSlide"
+            >
+              <svg class="icon">
+                <use xlink:href="#icon-arrow-left"></use>
+              </svg>
+            </button>
+            <Splide
+              :options="mucSliderOptions"
+              aria-label="Dies ist ein Karussell mit rotierenden Elementen. Verwenden Sie
+              die Pfeiltaste links und rechts oder die Buttons um zu navigieren."
+              ref="splide"
+            >
+              <slot />
+            </Splide>
+            <button
+              v-if="showNextArrow"
+              aria-label="Nächstes Element"
+              class="next-button is-control"
+              @click="nextSlide"
+            >
+              <svg class="icon">
+                <use xlink:href="#icon-arrow-right"></use>
+              </svg>
+            </button>
+          </section>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Splide } from "@splidejs/vue-splide";
+import { computed, onMounted, ref, useTemplateRef } from "vue";
+
+import { mucSliderOptions } from "./MucSliderOptions";
+
+defineSlots<{
+  /**
+   * MucSliderItems can be put into this slot.
+   */
+  default(): any;
+}>();
+
+const emit = defineEmits<{
+  /**
+   * Triggered when an item is clicked.
+   * @param id of the clicked item
+   */
+  changeSlide: [index: number];
+}>();
+
+const splide = useTemplateRef("splide");
+
+/**
+ * Index of the current silde
+ */
+const currentSlide = ref<number>(0);
+
+/**
+ * Length of the splide
+ */
+const splideLength = ref<number>(0);
+
+/**
+ * Set next slide
+ */
+const nextSlide = () => {
+  if (splide.value) {
+    splide.value.go(">");
+  }
+};
+
+/**
+ * Set previous slide
+ */
+const prevSlide = () => {
+  if (splide.value) {
+    splide.value.go("<");
+  }
+};
+
+/**
+ * Computed property set back button
+ */
+const showBackArrow = computed(() => currentSlide.value > 0);
+
+/**
+ * Computed property set next button
+ */
+const showNextArrow = computed(
+  () => currentSlide.value < splideLength.value - 1
+);
+
+onMounted(() => {
+  if (splide.value && splide.value.splide) {
+    splideLength.value = splide.value.length;
+    splide.value.splide.on("move", () => {
+      if (splide.value) {
+        currentSlide.value = splide.value.splide!.index;
+        emit("changeSlide", splide.value.splide!.index);
+      }
+    });
+  }
+});
+</script>
+
+<style scoped>
+.m-component-slider-comment {
+  padding-right: 1.8rem;
+  padding-left: 1.8rem;
+}
+</style>
diff --git a/src/components/Slider/MucSliderItem.vue b/src/components/Slider/MucSliderItem.vue
new file mode 100644
index 00000000..f0b776ba
--- /dev/null
+++ b/src/components/Slider/MucSliderItem.vue
@@ -0,0 +1,16 @@
+<template>
+  <SplideSlide>
+    <slot />
+  </SplideSlide>
+</template>
+
+<script setup lang="ts">
+import { SplideSlide } from "@splidejs/vue-splide";
+
+defineSlots<{
+  /**
+   * Elements can be put into this slot.
+   */
+  default(): any;
+}>();
+</script>
diff --git a/src/components/Slider/MucSliderOptions.ts b/src/components/Slider/MucSliderOptions.ts
new file mode 100644
index 00000000..584262f0
--- /dev/null
+++ b/src/components/Slider/MucSliderOptions.ts
@@ -0,0 +1,33 @@
+import type { Options } from "@splidejs/splide";
+
+export const mucSliderOptions: Options = {
+  autoplay: false,
+  keyboard: true,
+  slideFocus: true,
+  lazyLoad: false,
+  arrows: false,
+  perMove: 1,
+  gap: "0",
+  type: "slide",
+  perPage: 1,
+  pagination: false,
+  speed: 350,
+  drag: true,
+  swipe: true,
+  swipeThreshold: 50,
+  mediaQuery: "min",
+  breakpoints: {
+    1: {
+      perPage: 1,
+      gap: "1.5rem",
+    },
+    768: {
+      perPage: 1,
+      gap: "1.5rem",
+    },
+    1200: {
+      perPage: 1,
+      gap: "2rem",
+    },
+  },
+};
diff --git a/src/components/Slider/index.ts b/src/components/Slider/index.ts
new file mode 100644
index 00000000..069f94d4
--- /dev/null
+++ b/src/components/Slider/index.ts
@@ -0,0 +1,4 @@
+import MucSlider from "./MucSlider.vue";
+import MucSliderItem from "./MucSliderItem.vue";
+
+export { MucSlider, MucSliderItem };
diff --git a/src/components/index.ts b/src/components/index.ts
index d155a510..9a5c9da5 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -21,6 +21,7 @@ import { MucIcon } from "./Icon";
 import { MucIntro } from "./Intro";
 import { MucLink } from "./Link";
 import { MucPercentageSpinner } from "./PercentageSpinner";
+import { MucSlider, MucSliderItem } from "./Slider";
 import { MucStepper } from "./Stepper";
 
 export {
@@ -48,4 +49,6 @@ export {
   MucPercentageSpinner,
   MucStepper,
   MucCalendar,
+  MucSlider,
+  MucSliderItem,
 };