diff --git a/demo/src/EffectsDemo.ts b/demo/src/EffectsDemo.ts
index 630b2bcb..71780949 100644
--- a/demo/src/EffectsDemo.ts
+++ b/demo/src/EffectsDemo.ts
@@ -1,18 +1,7 @@
 
 import { Group, Panel, Text, text, gravity, Color, Stack, LayoutSpec, vlayout, hlayout, scroller, IVLayout, IHLayout, layoutConfig } from "doric";
+import { colors } from "./colorutils";
 
-const colors = [
-    "#70a1ff",
-    "#7bed9f",
-    "#ff6b81",
-    "#a4b0be",
-    "#f0932b",
-    "#eb4d4b",
-    "#6ab04c",
-    "#e056fd",
-    "#686de0",
-    "#30336b",
-].map(e => Color.parse(e))
 
 function box(idx = 0) {
     return (new Stack).also(it => {
diff --git a/demo/src/SliderDemo.ts b/demo/src/SliderDemo.ts
index 49ca4b8a..a1f6a35c 100644
--- a/demo/src/SliderDemo.ts
+++ b/demo/src/SliderDemo.ts
@@ -1,53 +1,48 @@
-import { Group, Panel, List, text, gravity, Color, Stack, LayoutSpec, list, NativeCall, listItem, log, vlayout, Gravity, hlayout, slider, slideItem } from "doric";
-const colors = [
-    "#f0932b",
-    "#eb4d4b",
-    "#6ab04c",
-    "#e056fd",
-    "#686de0",
-    "#30336b",
+import { Group, Panel, List, text, gravity, Color, Stack, LayoutSpec, list, NativeCall, listItem, log, vlayout, Gravity, hlayout, slider, slideItem, image, layoutConfig } from "doric";
+import { colors } from "./colorutils";
+
+const imageUrls = [
+    'http://b.hiphotos.baidu.com/image/pic/item/908fa0ec08fa513db777cf78376d55fbb3fbd9b3.jpg',
+    'http://f.hiphotos.baidu.com/image/pic/item/0e2442a7d933c8956c0e8eeadb1373f08202002a.jpg',
+    'http://f.hiphotos.baidu.com/image/pic/item/b151f8198618367aa7f3cc7424738bd4b31ce525.jpg',
+    'http://b.hiphotos.baidu.com/image/pic/item/0eb30f2442a7d9337119f7dba74bd11372f001e0.jpg',
+    'http://calonye.com/wp-content/uploads/2015/08/0-wx_fmtgiftpwebpwxfrom5wx_lazy1-9.gif',
+    'http://hbimg.b0.upaiyun.com/ca29ea125b7f2d580f573e48eb594b1ef509757f34a08-m0hK45_fw658',
+    'https://misc.aotu.io/ONE-SUNDAY/SteamEngine.png',
 ]
 @Entry
 class SliderPanel extends Panel {
     build(rootView: Group): void {
         rootView.addChild(vlayout([
             text({
-                text: "SliderDemo",
+                text: "Gallery",
                 layoutConfig: {
                     widthSpec: LayoutSpec.AT_MOST,
                     heightSpec: LayoutSpec.EXACTLY,
                 },
                 textSize: 30,
-                textColor: Color.parse("#535c68"),
-                bgColor: Color.parse("#dff9fb"),
+                textColor: Color.WHITE,
+                bgColor: colors[1],
                 textAlignment: gravity().center(),
                 height: 50,
             }),
             slider({
                 itemCount: 100,
                 renderPage: (idx) => {
-                    return slideItem(text({
-                        layoutConfig: {
-                            widthSpec: LayoutSpec.AT_MOST,
-                            heightSpec: LayoutSpec.EXACTLY,
-                            alignment: gravity().center(),
-                        },
-                        text: `Page At Line ${idx}`,
-                        textAlignment: gravity().center(),
-                        textColor: Color.parse("#ffffff"),
-                        textSize: 20,
-                        height: 300,
-                        bgColor: Color.parse(colors[idx % colors.length]),
-                    }).also(it => {
+                    return slideItem(image({
+                        imageUrl: imageUrls[idx % imageUrls.length],
+                        layoutConfig: layoutConfig().wrap().a(gravity().center()),
+                    })).also(it => {
                         let start = idx
                         it.onClick = () => {
-                            it.bgColor = Color.parse(colors[++start % colors.length])
+                            it.bgColor = (colors[++start % colors.length])
                         }
-                    }))
+                    })
                 },
                 layoutConfig: {
                     widthSpec: LayoutSpec.AT_MOST,
                     heightSpec: LayoutSpec.WRAP_CONTENT,
+                    weight: 1,
                 },
             }),
         ]).also(it => {
diff --git a/demo/src/colorutils.ts b/demo/src/colorutils.ts
new file mode 100644
index 00000000..093d46c3
--- /dev/null
+++ b/demo/src/colorutils.ts
@@ -0,0 +1,14 @@
+import { Color } from "doric";
+
+export const colors = [
+    "#70a1ff",
+    "#7bed9f",
+    "#ff6b81",
+    "#a4b0be",
+    "#f0932b",
+    "#eb4d4b",
+    "#6ab04c",
+    "#e056fd",
+    "#686de0",
+    "#30336b",
+].map(e => Color.parse(e))
\ No newline at end of file
diff --git a/js-framework/src/ui/declarative.ts b/js-framework/src/ui/declarative.ts
index 659a3a9e..02a5e61b 100644
--- a/js-framework/src/ui/declarative.ts
+++ b/js-framework/src/ui/declarative.ts
@@ -148,7 +148,7 @@ export class LayoutConfigImpl implements LayoutConfig, Modeling {
             widthSpec: this.widthSpec,
             heightSpec: this.heightSpec,
             margin: this.margin,
-            alignment: this.alignment,
+            alignment: this.alignment ? this.alignment.toModel() : undefined,
             weight: this.weight,
         }
     }
diff --git a/js-framework/src/ui/slider.ts b/js-framework/src/ui/slider.ts
index 5584445a..0778b6e5 100644
--- a/js-framework/src/ui/slider.ts
+++ b/js-framework/src/ui/slider.ts
@@ -5,7 +5,7 @@ export function slideItem(item: View) {
     return (new SlideItem).also((it) => {
         it.layoutConfig = {
             widthSpec: LayoutSpec.AT_MOST,
-            heightSpec: LayoutSpec.WRAP_CONTENT,
+            heightSpec: LayoutSpec.AT_MOST,
         }
         it.addChild(item)
     })