ic slider指令 - Julienedies/brick GitHub Wiki

使用

    <div style="width:560px;height: 350px;" ic-slider="a" ic-slider-interval="4000">
    <ul ic-role-slider-view>
        <li ic-role-slider-item>
            <a href="#3">
                <img src="https://assets.shukugang.com/vcn/img/banner/b_1.jpg"/>
            </a>
        </li>
        <li ic-role-slider-item>
            <a href="#4">
                <img src="https://assets.shukugang.com/vcn/img/banner/b_2.jpg"/>
            </a>
        </li>
        <li ic-role-slider-item>
            <a href="#2">
                <img src="https://assets.shukugang.com/vcn/img/banner/b_3.jpg"/>
            </a>
        </li>
        <li ic-role-slider-item>
            <a href="#1">
                <img src="https://assets.shukugang.com/vcn/img/banner/b_4.jpg"/>
            </a>
        </li>
        <li ic-role-slider-item>
            <a href="#">
                <img src="https://assets.shukugang.com/vcn/img/banner/b_5.jpg"/>
            </a>
        </li>
    </ul>

    <span class="btn btn-0" style="left:0;" ic-role-slider-prev>&lt;</span>

    <span class="btn btn-0" style="right:0;" ic-role-slider-next>&gt;</span>

    <ol class="inline-list-1 hc" style="position: absolute; bottom: 10px;width:100%">
        <li ic-role-slider-pagination="1"></li>
        <li ic-role-slider-pagination="2"></li>
        <li ic-role-slider-pagination="3"></li>
        <li ic-role-slider-pagination="4"></li>
        <li ic-role-slider-pagination="5"></li>
    </ol>
</div>

查看example

相关选项

  • ic-slider-interval - 定义slider自动切换间隔。如果没有定义此选项，则slider不会自动切换。
  • ic-slider-direction - 定义slider切换方向，可选，设为1，则slider切换方向为上下切换。

相关dom元素选项

  • ic-role-slider-view - 定义所属dom元素为slide视图容器。
  • ic-role-slider-item - 定义所属dom元素为slider切换项。
  • ic-role-slider-prev - 定义所属dom元素为向前切换按钮。
  • ic-role-slider-next - 定义所属dom元素为向后切换按钮。
  • ic-role-slider-pagination - 定义所属dom元素为分页按钮。

js接口

无。

事件

每当分页项发生改变，会触发ic-slider.change事件。

$('[ic-slider=a]').on('ic-slider.change',function(e, msg){
       //当前激活的分页
      console.log(msg);
});

样式

被激活的分页项对应的ic-role-slider-pagination dom元素默认会被添加active类；

Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️