* [html5] add slider infinte demo
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/44866b74 Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/44866b74 Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/44866b74 Branch: refs/heads/0.11-dev Commit: 44866b749415234e9969d31a56505a18adbcac5f Parents: 66df2cb Author: tancy <ron...@gmail.com> Authored: Fri Apr 7 12:03:15 2017 +0800 Committer: tancy <ron...@gmail.com> Committed: Fri Apr 7 12:03:15 2017 +0800 ---------------------------------------------------------------------- examples/vue/components/sliderinfinite.vue | 46 +++++++++++++++++++++++++ 1 file changed, 46 insertions(+) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/44866b74/examples/vue/components/sliderinfinite.vue ---------------------------------------------------------------------- diff --git a/examples/vue/components/sliderinfinite.vue b/examples/vue/components/sliderinfinite.vue new file mode 100644 index 0000000..4a3702e --- /dev/null +++ b/examples/vue/components/sliderinfinite.vue @@ -0,0 +1,46 @@ +<template> + <div> + <slider class="slider" interval="3000" auto-play="true"> + <div class="frame" v-for="img in imageList"> + <image class="image" resize="cover" :src="img.src"></image> + </div> + </slider> + </div> +</template> + +<style scoped> + .image { + width: 700px; + height: 300px; + } + .slider { + margin-top: 25px; + margin-left: 25px; + width: 700px; + height: 300px; + border-width: 2px; + border-style: solid; + border-color: #41B883; + } + .frame { + width: 700px; + height: 300px; + position: relative; + } +</style> + +<script> + export default { + data () { + return { + imageList: [ + { src: 'https://gw.alicdn.com/tfs/TB1SA2wQXXXXXXDapXXXXXXXXXX-1400-600.png'}, + { src: 'https://gw.alicdn.com/tfs/TB1KS_OQXXXXXcSXVXXXXXXXXXX-1400-600.png'}, + { src: 'https://gw.alicdn.com/tfs/TB1Ez7XQXXXXXbNXXXXXXXXXXXX-1400-600.png'}, + { src: 'https://gw.alicdn.com/tfs/TB1XLn6QXXXXXb2XpXXXXXXXXXX-1400-600.png'} + ] + + } + } + } +</script> \ No newline at end of file