diff --git a/src/sliders/Readme.md b/src/sliders/Readme.md
deleted file mode 100644
index 70d9f81..0000000
--- a/src/sliders/Readme.md
+++ /dev/null
@@ -1,57 +0,0 @@
-# 幻灯片组件文档
-
-## 配置说明
-
-```json
-    {
-        sliderList: [{src: '', title: '', link: '', elm: ''}],       //src: 图片地址; link: 点击链接; title: 幻灯片标题(可以是文本或html); elm: 幻灯片中的dom元素
-        autoSlide: boolean,     //true: 自动轮播; false: 停止轮播
-        time: int,     //自动轮播间隔时间
-        preview: boolean   //是否缩略有图(不适用于全屏)
-        skin: int,     //4种,默认0(0,1,2,3)
-        sliderType: int,      //幻灯片动画效果,目前有1: 水平滑动;2: 水平渐进渐出;3: 垂直滑动;4: 垂直渐进渐出
-        $onSuccess: function(vm){
-            slider = vm
-        },           //初始化回调
-        vm.$setSliderList(list),         //赋值数据给幻灯片数组
-    }
-
-```
-
-
-## 用法
-
-```html
-<div class="slider" :controller="test">
-    <template name="sliders" config="sliderOpts"></template>
-</div>
-<!--  
-其中config属性是指定分页组件的配置，会自动从上一层controller里找;
-其他的属性（除$id, config, id, class, tabindex, style, ms-*属性,data-*属性外，也可以用以配置组件，且优先级最高）;
-name属性可以设定组件的$id值，方便各模块之间进行通讯
--->
-<!--  引入幻灯片组件  -->
-<script src="//dist.doui.cc/js/yua.js"></script>
-<script>
-    require(['//dist.doui.cc/js/lib/sliders/main.js'],function(){
-        var vm = yua({
-            $id: "test",
-            sliderOpts: {
-                sliderList: [{src: '', link: '', title: '', elm: ''}],
-                autoSlide: false,
-                time: 0,
-                // preview: true,
-                fullScreen: true,
-                skin: 1,
-                sliderType: 4,
-                $onSuccess: function(vm){
-                    slider = vm
-                    slider.$setSliderList(list)
-                }
-            }
-        })
-
-        yua.scan()
-    })
-</script>
-```
diff --git a/src/sliders/index.wc b/src/sliders/index.wc
new file mode 100644
index 0000000..5091ee3
--- /dev/null
+++ b/src/sliders/index.wc
@@ -0,0 +1,22 @@
+<template>
+  <label></label>
+</template>
+
+<style lang="scss">
+:host {
+  display: flex;
+}
+</style>
+
+<script>
+export default class Slider {
+  props = {
+    value: 0,
+    max: 100
+  }
+
+  __init__() {
+    /* render */
+  }
+}
+</script>
diff --git a/src/sliders/main.htm b/src/sliders/main.htm
deleted file mode 100644
index 5003a44..0000000
--- a/src/sliders/main.htm
+++ /dev/null
@@ -1,95 +0,0 @@
-<div class="do-sliders" :class="{fullscreen: fullScreen}">
-    <div class="skin" :class="{{skin}}">
-
-        <div class="slider-content" :class="{'h-83': preview && !fullScreen, 'h-100': !preview || fullScreen}" :if="sliderList.length" :mouseenter="$stopSlide()" :mouseleave="$startSlide()">
-            <a class="do-ui-font slider-btn" href="javascript:;"
-                :if="sliderType < 3"
-                :click="$go(-1)">&#xe8ed</a>
-
-            <div class="container">
-                <div class="box"
-                    :if="sliderType == 1"
-                    :css="{width: sliderList.length * 100 + '%', transform: animation}">
-                    <a class="page" target="_blank"
-                        :repeat="sliderList"
-                        :css="{width: currWidth + '%'}"
-                        :attr="{href: el.link || 'javascript:;'}">
-                        <img :if="el.src && el.src != ''" :attr-src="el.src">
-                        <p :if="el.title"
-                            :html="el.title"
-                            class="title-class"></p>
-                    </a>
-                </div>
-                <div class="box"
-                    :if="sliderType == 2">
-                    <a  target="_blank"
-                        class="page fadeType"
-                        :repeat="sliderList"
-                        :css="{opacity: curr != $index ? 0 : 1}"
-                        :attr="{href: el.link || 'javascript:;'}">
-                        <img :if="el.src && el.src != ''" :attr-src="el.src">
-
-                        <p :if="el.title"
-                            :html="el.title"
-                            class="title-class"></p>
-                    </a>
-                </div>
-                <div class="box"
-                    :if="sliderType == 3"
-                    :css="{height: sliderList.length * 100 + '%', transform: animation}">
-                    <a class="page" target="_blank"
-                        :repeat="sliderList"
-                        :css="{width: '100%', height: (100 / sliderList.length) + '%'}"
-                        :attr="{href: el.link || 'javascript:;'}">
-                        <img :if="el.src && el.src != ''" :attr-src="el.src">
-                        <p :if="el.title"
-                            :html="el.title"
-                            class="title-class"></p>
-                    </a>
-                </div>
-                <div class="box"
-                    :if="sliderType == 4">
-                    <a target="_blank"
-                        class="page fadeType"
-                        :repeat="sliderList"
-                        :css="{opacity: curr != $index ? 0 : 1}"
-                        :attr="{href: el.link || 'javascript:;'}">
-                        <img :if="el.src && el.src != ''" :attr-src="el.src">
-                        {{el.elm | html}}
-                        <p :if="el.title"
-                            :html="el.title"
-                            class="title-class"></p>
-                    </a>
-                </div>
-            </div>
-
-            <a class="do-ui-font slider-btn" href="javascript:;"
-                :if="sliderType < 3"
-                :click="$go(1)">&#xe8eb</a>
-        </div>
-
-
-        <div class="slider-preview-btn"
-            :class="{'slider-preview-btn-vertical': sliderType > 2}"
-            :css="{padding: !preview && sliderType < 3 ? '2%' : ''}" >
-            <span href="javascript:;"
-                :if="!preview || fullScreen"
-                :class="{'no-preview-act': curr === $index}"
-                :repeat="sliderList"
-                :click="$jump($index)">
-            </span>
-
-            <a class="btn-img" href="javascript:;"
-                :if="preview && !fullScreen"
-                :class="{act: curr === $index || (curr >= maxNum && $index == maxNum - 1), 'default-btn': !el.src}"
-                :click="$jump($index)"
-                :repeat="sliderBtnList">
-                <img
-                    :class="{'preview-act': curr === $index ||  (curr >= maxNum && $index == maxNum - 1)}"
-                    :if="el.src && el.src != ''"
-                    :attr-src="el.src" />
-                <div class="btn-background" ms-if="el.src"></div>
-            </a>
-        </div>
-    </div>
-</div>
diff --git a/src/sliders/main.js b/src/sliders/main.js
deleted file mode 100644
index a164499..0000000
--- a/src/sliders/main.js
+++ /dev/null
@@ -1,163 +0,0 @@
-/**
- *
- * @authors linteng (875482941@qq.com)
- * @date    2017-09-07 19:53:18
- */
-
-define(["yua", "text!./main.htm", "css!./main"], function(yua, tpl){
-
-    var dom;
-    var sliderNum = 0;
-    var skin = ['skin-0','skin-1','skin-2','skin-3']
-
-    /**
-     * [根据当前幻灯片索引获取填充底下按钮数据]
-     * @param  {Object} vm [vm对象]
-     * @return {[Array]}    [填充到按钮的数据]
-     */
-    function getBtnList(vm, el){
-        if(el){
-            dom = el
-        }
-        vm.maxNum = Math.floor(dom.offsetWidth / 90)
-        var curr = vm.curr + 1
-        let res = []
-        if(!vm.preview)
-            res = vm.sliderList
-
-        if(vm.maxNum >= vm.sliderList.length){
-            res = vm.sliderList
-        }else{
-            if(curr > vm.maxNum){
-                res = vm.sliderList.slice(curr - vm.maxNum, curr)
-            }else if(curr <= vm.maxNum){
-                res = vm.sliderList.slice(0, vm.maxNum)
-            }
-        }
-        return res
-    }
-
-    /**
-     * [设置自动轮播]
-     * @param  {[type]} vm [description]
-     * @return {[type]}    [description]
-     */
-    function autoSlide(vm){
-        vm.timer = setTimeout(function(){
-            vm.$go(1)
-            autoSlide(vm)
-        }, vm.time <= 0 ? 3000 : vm.time)
-    }
-
-    return yua.component("sliders", {
-        $template: tpl,
-        $init: function(vm){
-            vm.$go = function(num){
-                vm.curr += num
-                if(vm.curr < 0){
-                    vm.curr = vm.sliderList.length - 1
-                }else if(vm.curr > vm.sliderList.length - 1){
-                    vm.curr = 0
-                }
-            }
-
-            vm.$jump = function(i){
-                var curr = vm.curr + 1
-                if(curr > vm.maxNum && vm.preview){
-                    var distance = vm.maxNum - (i + 1)
-                    vm.curr -= distance
-                }else{
-                    vm.curr = i
-                }
-            }
-
-            vm.$stopSlide = function(){
-                if(vm.autoSlide){
-                    clearTimeout(vm.timer)
-                }
-            }
-
-            vm.$startSlide = function(){
-                if(vm.autoSlide)
-                    autoSlide(vm)
-            }
-
-            vm.$setSliderList = function(list){
-                vm.sliderBtnList.removeAll()
-                vm.sliderList.pushArray(list)
-            }
-
-            vm.$onSuccess(vm)
-        },
-        $ready: function(vm, el){
-            vm.skin = skin[vm.skin]
-            vm.currWidth = (100 / vm.sliderList.length)
-            if(vm.autoSlide)
-                autoSlide(vm)
-
-            if(vm.preview){
-                vm.sliderBtnList.removeAll()
-                vm.sliderBtnList.pushArray(getBtnList(vm, el))
-            }
-
-            vm.$watch('curr', function(val, old) {
-
-                vm.animation = vm.sliderType > 2 ? 'translate(0, ' + (-vm.currWidth * val) + '%)' : 'translate(' + (-vm.currWidth * val) + '%, 0)'
-                if(vm.preview && vm.maxNum < vm.sliderList.length){
-                    vm.sliderBtnList.removeAll()
-                    vm.sliderBtnList.pushArray(getBtnList(vm, el))
-                }
-            })
-
-            window.addEventListener('resize', function(){
-
-                vm.animation = vm.sliderType > 2 ? 'translate(0, ' + (-vm.currWidth * vm.curr) + '%)' : 'translate(' + (-vm.currWidth * vm.curr) + '%, 0)'
-                if(vm.preview && vm.maxNum < vm.sliderList.length){
-                    vm.sliderBtnList.removeAll()
-                    vm.sliderBtnList.pushArray(getBtnList(vm, el))
-                }
-            }, false)
-
-            if(vm.sliderType >= 3){
-                var now = 0
-                var mouseWheelEv = /Firefox/i.test(navigator.userAgent) ? "DOMMouseScroll": "mousewheel"
-                var direction = /Firefox/i.test(navigator.userAgent) ? "detail": "deltaY"
-                window.addEventListener(mouseWheelEv, function(ev){
-                    if(Date.now() - now > 500 || now == 0){
-
-                        if(ev[direction] > 0){
-                            vm.$go(1)
-                        }else{
-                            vm.$go(-1)
-                        }
-                        now = Date.now()
-                    }
-                }, false)
-            }
-        },
-        currWidth: 0,
-        animation: '',
-        curr: 0,
-        sliderBtnList: [],
-        maxNum: 0,
-        timer: yua.noop,
-        sliderType: 1,
-
-        sliderList: [],
-        autoSlide: '',
-        time: 3000,
-        preview: false,
-        skin: 0,
-        fullScreen: false,
-
-        $onSuccess: yua.noop,
-        $setSliderList: yua.noop,
-        $jump: yua.noop,
-        $stopSlide: yua.noop,
-        $startSlide: yua.noop,
-        $go: yua.noop,
-    })
-
-    yua.scan(dom)
-
-})