# lc-ep-slider 

 > ExpressionBinding Slider

### Rule
- Used to enrich slide, including merchandise window, picture list, etc.
- If the child element has click event, **because of the [reason](http://weex-project.io/cn/references/gesture.html#约束) in android**, You now need to bind the expression event in child element, Weex Ui has provided [wxc-pan-cell](https://github.com/alibaba/weex-ui/tree/master/packages/lc-pan-item) to solve this issue, you can see more in [here](https://github.com/alibaba/weex-ui/tree/master/example/ep-slider).

## [Demo](https://h5.m.taobao.com/trip/lc-ep-slider/index.html?_wx_tpl=https%3A%2F%2Fh5.m.taobao.com%2Ftrip%2Flc-ep-slider%2Fdemo%2Findex.native-min.js)
<img src="https://gw.alipayobjects.com/zos/rmsportal/lWWUuRBxjMdLCaJGVHsp.gif" width="240"/>&nbsp;&nbsp;&nbsp;&nbsp;<img src="https://img.alicdn.com/tfs/TB1Ky4QSpXXXXbRapXXXXXXXXXX-200-200.png" width="160"/>

## Code Example

```vue
<template>
  <div class="wrapper">
    <lc-ep-slider :slider-id="sliderId"
                   :card-length='cardLength'
                   :card-s="cardSize"
                   :select-index="2"
                   @LcEpSliderCurrentIndexSelected="LcEpSliderCurrentIndexSelected">

      <!--demo-->
      <div v-for="(v,index) in [1,2,3,4,5]"
           :key="index"
           :slot="`card${index}_${sliderId}`"
           :class="['slider',`slider${index}`]">
        <text>this is the {{index + 1}} slider</text>
      </div>
    </lc-ep-slider>
  </div>
</template>

<style scoped>
  .wrapper {
    padding-top: 100px;
  }

  .slider {
    width: 400px;
    height: 300px;
    background-color: #C3413D;
    align-items: center;
    justify-content: center;
  }

  .slider1 {
    background-color: #635147;
  }

  .slider2 {
    background-color: #FFC302;
  }

  .slider3 {
    background-color: #FF9090;
  }

  .slider4 {
    background-color: #546E7A;
  }
</style>

<script>
  import { LcEpSlider } from 'weex-ui';

  export default {
    components: { LcEpSlider },
    data: () => ({
      sliderId: 1,
      cardLength: 5,
      cardSize: {
        width: 400,
        height: 300,
        spacing: 0,
        scale: 0.8
      }
    }),
    methods: {
      LcEpSliderCurrentIndexSelected (e) {
        const index = e.currentIndex;
        console.log(index);
      }
    }
  }
</script>
```

More details can be found in [here](https://github.com/alibaba/weex-ui/blob/master/example/ep-slider/index.vue)

### API

| Prop | Type | Required | Default | Description |
|-------------|------------|--------|-----|-----|
| slider-id | `Number` |`Y`| `1` | slider id|
| card-length | `Number` |`Y`| `1` |  count of slider items|
| select-index | `Number` |`N`| `0` | default card |
| container-s | `Object` |`Y`| `{position: 'relative',width: 750,height: 352,overflow: 'hidden'}` | container style|
| card-s | `Object` | `Y`|`{width: 360,height: 300,spacing: 0,scale: 0.75}` | card style|
| auto-play | `Boolean` | `N`|`false` |whether is auto-play|
| interval | `Number` | `N`|`1200` |interval of auto-play|

### More

```
// destruction may occur when sliding under the ios list, you need rebind it
// <lc-ep-slider ref="lc-ep-slider"></lc-ep-slider
this.$refs['lc-ep-slider'].rebind();
```

### Manually setting page

```
// <lc-ep-slider ref="lc-ep-slider"></lc-ep-slider
this.$refs['lc-ep-slider'].manualSetPage(1); 
```

### Event

```
// @LcEpSliderCurrentIndexSelected="LcEpSliderCurrentIndexSelected"
```