diff --git a/doric-demo/src/SliderStyleDemo.ts b/doric-demo/src/SliderStyleDemo.ts
new file mode 100644
index 00000000..8bed4d50
--- /dev/null
+++ b/doric-demo/src/SliderStyleDemo.ts
@@ -0,0 +1,37 @@
+import { Group, Panel, gravity, LayoutSpec, vlayout, slider, slideItem, layoutConfig, modal, stack } from "doric";
+import { colors } from "./utils";
+
+@Entry
+class SliderStyleDemo extends Panel {
+    build(rootView: Group): void {
+        let pager = slider({
+            itemCount: 12,
+            renderPage: (idx) => {
+                return slideItem(stack([], {
+                    width: Environment.screenWidth * 307 / 375,
+                    height: Environment.screenWidth * 307 / 375 * 520 / 307,
+                    layoutConfig: layoutConfig()
+                        .configWidth(LayoutSpec.JUST)
+                        .configHeight(LayoutSpec.JUST)
+                        .configAlignment(gravity().center()),
+                    backgroundColor: (colors[++idx % colors.length])
+                }))
+            },
+            slideStyle: { type: "gallery", minScale: 480 / 520, minAlpha: 0.5, itemWidth: Environment.screenWidth * 307 / 375 },
+            layoutConfig: {
+                widthSpec: LayoutSpec.MOST,
+                heightSpec: LayoutSpec.MOST,
+                weight: 1,
+            }
+        })
+
+        rootView.addChild(vlayout([
+            pager,
+        ]).also(it => {
+            it.layoutConfig = {
+                widthSpec: LayoutSpec.MOST,
+                heightSpec: LayoutSpec.MOST,
+            }
+        }))
+    }
+}
\ No newline at end of file