microbee-http 丨 软件开发框架
microbee-http 丨 软件开发框架 > 快速开始 > MICROBEE-FRONT > 框架工具组件 > 轮播图

轮播图

调用方法：McrbHttpClient.carousel.init(options);

1.参数表

id（String）轮播图容器id
width（String）轮播图宽度。例："600px"
height（String）轮播图高度。例："300px"
arrow（String）左右箭头显示模式。always:一直显示；hover:鼠标悬停在轮播图上时显示。
indicator（String）轮播图下方图片指示器切换模式。click:点击切换。hover:悬停切换。
interval（String）轮播图图片切换间隔。单位为ms。
imgs（Array[String]）轮播图片Url数组。

2.demo

  //使用方法：
  <div id="lunbotest"></div>

  <script>
    let options = {
      id: 'lunbotest',
      width: '600px',
      height: '300px',
      arrow: 'hover',
      indicator: 'hover',
      interval: '3000',
      imgs: [
        '/img/carousel1.png',
        '/img/carousel2.png',
        '/img/carousel3.png',
        '/img/carousel4.png'
      ]
    }
    McrbHttpClient.carousel.init(options);
</script>

3.效果展示

 
本文档来自—microbee-http 丨 软件开发框架平台