console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=">
<meta http-equiv="X-UA-Compatible" content="">
<script src="https://static.360buyimg.com/pops/xstoreom/plugins/vue/vue.min.js">
</script>
<script src="https://static.360buyimg.com/pops/xstoreom/fresh/fresh.min.js">
</script>
<link href="https://static.360buyimg.com/pops/xstoreom/fresh/styles/fresh.min.css" rel="stylesheet" />
<style>
body {
padding: 20px;
}
.demo-carousel{
height:200px;
line-height:200px;
text-align:center;
color:#fff;
font-size:20px;
background:#506b9e
}
</style>
</head>
<body>
<p-form :model="setting" :label-width="100">
<p-form-item label="自动切换">
<p-switch :checked.sync="setting.autoplay">
<span slot="open">开</span>
<span slot="close">关</span>
</p-switch>
</p-form-item>
<p-form-item label="自动切换速度">
<p-slider :value.sync="setting.autoplaySpeed" :min="300" :max="10000" :step="100"></p-slider>
</p-form-item>
<p-form-item label="指示器位置">
<p-radio-group :model.sync="setting.dots" type="button">
<p-radio value="inside">内部</p-radio>
<p-radio value="outside">外部</p-radio>
<p-radio value="none">不显示</p-radio>
</p-radio-group>
</p-form-item>
<p-form-item label="切换箭头">
<p-radio-group :model.sync="setting.arrow" type="button">
<p-radio value="hover">悬停时显示</p-radio>
<p-radio value="always">一直显示</p-radio>
<p-radio value="never">不显示</p-radio>
</p-radio-group>
</p-form-item>
<p-form-item label="指示器触发方式">
<p-radio-group :model.sync="setting.trigger" type="button">
<p-radio value="click">点击</p-radio>
<p-radio value="hover">悬停</p-radio>
</p-radio-group>
</p-form-item>
</p-form>
<p-carousel :autoplay="setting.autoplay" :autoplay-speed="setting.autoplaySpeed" :dots="setting.dots" :trigger="setting.trigger" :arrow="setting.arrow">
<p-carousel-item>
<div class="demo-carousel">1</div>
</p-carousel-item>
<p-carousel-item>
<div class="demo-carousel">2</div>
</p-carousel-item>
<p-carousel-item>
<div class="demo-carousel">3</div>
</p-carousel-item>
<p-carousel-item>
<div class="demo-carousel">4</div>
</p-carousel-item>
</p-carousel>
<script>
new Vue({
el: "body",
data: {
setting: {
autoplay: false,
autoplaySpeed: 2000,
dots: 'inside',
trigger: 'click',
arrow: 'hover'
}
}
})
</script>
</body>
</html>