<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"><legend>设定各种参数</legend></fieldset>
<div class="layui-form">
<div class="layui-form-item">
<div class="layui-inline"><label class="layui-form-label">宽高</label>
<div class="layui-input-inline" style="width: 98px;"><input autocomplete="off" class="layui-input demoSet" name="width" placeholder="width" type="tel" value="600" /></div>
<div class="layui-input-inline" style="width: 98px;"><input autocomplete="off" class="layui-input demoSet" name="height" placeholder="height" type="tel" value="280" /></div></div></div>
<div class="layui-form-item"><label class="layui-form-label">动画类型</label>
<div class="layui-input-block">
<div class="layui-btn-group demoTest" style="margin-top: 5px;"><button class="layui-btn layui-btn-sm" data-key="anim" data-type="set" data-value="default" style="background-color: #5FB878;">左右切换</button><button class="layui-btn layui-btn-sm" data-key="anim" data-type="set" data-value="updown">上下切换</button><button class="layui-btn layui-btn-sm" data-key="anim" data-type="set" data-value="fade">渐隐渐显</button></div></div></div>
<div class="layui-form-item"><label class="layui-form-label">箭头状态</label>
<div class="layui-input-block">
<div class="layui-btn-group demoTest" style="margin-top: 5px;"><button class="layui-btn layui-btn-sm" data-key="arrow" data-type="set" data-value="hover" style="background-color: #5FB878;">悬停显示</button><button class="layui-btn layui-btn-sm" data-key="arrow" data-type="set" data-value="always">始终显示</button><button class="layui-btn layui-btn-sm" data-key="arrow" data-type="set" data-value="none">不显示</button></div></div></div>
<div class="layui-form-item"><label class="layui-form-label">指示器位置</label>
<div class="layui-input-block">
<div class="layui-btn-group demoTest" style="margin-top: 5px;"><button class="layui-btn layui-btn-sm" data-key="indicator" data-type="set" data-value="inside" style="background-color: #5FB878;">容器内部</button><button class="layui-btn layui-btn-sm" data-key="indicator" data-type="set" data-value="outside">容器外部</button><button class="layui-btn layui-btn-sm" data-key="indicator" data-type="set" data-value="none">不显示</button></div></div></div>
<div class="layui-form-item">
<div class="layui-inline"><label class="layui-form-label">自动切换</label>
<div class="layui-input-block"><!--<input type="checkbox" name="switch" lay-skin="switch" checked lay-text="ON|OFF" lay-filter="autoplay">--><select lay-filter="autoplay"><option value="1">开启</option><option value="0">关闭</option><option value="always">always</option> </select></div></div>
<div class="layui-inline"><label class="layui-form-label" style="width: auto;">时间间隔</label>
<div class="layui-input-inline" style="width: 120px;"><input autocomplete="off" class="layui-input demoSet" name="interval" placeholder="毫秒" type="tel" value="3000" /></div></div></div></div>
<div class="layui-carousel" id="test3" lay-filter="test4">
<div carousel-item="">
<div>条目1</div>
<div>条目2</div>
<div>条目3</div>
<div>条目4</div>
<div>条目5</div></div></div>
<script>
layui.use(['carousel', 'form'], function(){
  var carousel = layui.carousel
  ,form = layui.form;
  
  //常规轮播
  carousel.render({
    elem: '#test1'
  });
  
  //改变下时间间隔、动画类型、高度
  carousel.render({
    elem: '#test2'
    ,interval: 1800
    ,anim: 'fade'
    ,height: '120px'
  });
  
  //设定各种参数
  var ins3 = carousel.render({
    elem: '#test3'
  });
  //图片轮播
  carousel.render({
    elem: '#test10'
    ,width: '720px'
    ,height: '360px'
    ,interval: 3000
  });
  
  //事件
  carousel.on('change(test4)', function(res){
    console.log(res)
  });
  
  var $ = layui.$, active = {
    set: function(othis){
      var THIS = 'layui-bg-normal'
      ,key = othis.data('key')
      ,options = {};
      
      othis.css('background-color', '#5FB878').siblings().removeAttr('style'); 
      options[key] = othis.data('value');
      ins3.reload(options);
    }
  };
  
  //开关事件
  form.on('switch(autoplay)', function(){
    ins3.reload({
      autoplay: this.checked
    });
  });
  // 自动播放控制
  form.on('select(autoplay)', function (obj) {
    // debugger;
    var autoplayValue = parseInt(obj.value);
    ins3.reload({
      autoplay: isNaN(autoplayValue) ? obj.value : autoplayValue
    });
  })
  
  $('.demoSet').on('keyup', function(){
    var value = this.value
    ,options = {};
    if(!/^\d+$/.test(value)) return;
    
    options[this.name] = value;
    ins3.reload(options);
  });
  
  //其它示例
  $('.demoTest .layui-btn').on('click', function(){
    var othis = $(this), type = othis.data('type');
    active[type] ? active[type].call(this, othis) : '';
  });
});
</script>