JSFiddle - React, Tailwind, and code Playground

by wen yongheng

HTML

<link rel="stylesheet" href="https://oggpmngp5.qnssl.com/mui/v3.4.0/mui.min.css">
<script src="https://oggpmngp5.qnssl.com/mui/v3.4.0/mui.min.js"></script>
<div class="mui-content-padded">
  <p>
    默认轮播
  </p>
  <div class="mui-slider">
    <div class="mui-slider-group">
      <!--第一个内容区容器-->
      <div class="mui-slider-item">
        <div style="background:#ff00ff;height:200px;line-height:200px;text-align:center;">
          轮播内容1
        </div>
      </div>
      <!--第二个内容区容器-->
      <div class="mui-slider-item">
        <div style="background:#ffff00;height:200px;line-height:200px;text-align:center;">
          轮播内容2
        </div>
      </div>
    </div>
  </div>
  <p>
    增加焦点轮播
  </p>
  <div class="mui-slider">
    <div class="mui-slider-group">
      <!--第一个内容区容器-->
      <div class="mui-slider-item">
        <div style="background:#ff00ff;height:200px;line-height:200px;text-align:center;">
          轮播内容1
        </div>
      </div>
      <!--第二个内容区容器-->
      <div class="mui-slider-item">
        <div style="background:#ffff00;height:200px;line-height:200px;text-align:center;">
          轮播内容2
        </div>
      </div>
    </div>
    <div class="mui-slider-indicator">
      <div class="mui-indicator mui-active"></div>
      <div class="mui-indicator"></div>
    </div>
  </div>
  <p>
    定时轮播
  </p>
  <div id="slider_content" class="mui-slider">
    <div class="mui-slider-group">
      <!--第一个内容区容器-->
      <div class="mui-slider-item">
        <div style="background:#ff00ff;height:200px;line-height:200px;text-align:center;">
          轮播内容1
        </div>
      </div>
      <!--第二个内容区容器-->
      <div class="mui-slider-item">
        <div style="background:#ffff00;height:200px;line-height:200px;text-align:center;">
          轮播内容2
        </div>
      </div>
    </div>
    <div class="mui-slider-indicator">
      <div class="mui-indicator mui-active"></div>
      <div class="mui-indicator"></div>
    </div>
  </div>
  <p>
    循环轮播
  </p>
  <div id=""...

JavaScript

var slider_content = mui("#slider_content");
slider_content.slider({
  interval: 3000
})

var slider_content2 = mui("#slider_content2");
slider_content2.slider({
  interval: 2000
})