轮播图_GJ-UI前端组件

发布时间::2018-06-03 09:35:04 已收录 阅读:500次

将将下列html代码、javascript代码复制粘贴在html文件的相应位置即可(可参考组件附带index.html文件中相应的注释说明位置);

轮播图1[gj-slide1]:

HTML代码:

<div class="gj-slide1">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <a href="javascript:(0)"><img src="images/lbt1.jpg" alt="">
                    <p>这里是第一张轮播图的标题部分内容</p>
                </a>
            </div>
            <div class="swiper-slide">
                <a href="javascript:(0)"><img src="images/lbt2.jpg" alt="">
                    <p>这里是第二张轮播图的标题部分内容</p>
                </a>
            </div>
            <div class="swiper-slide">
                <a href="javascript:(0)"><img src="images/lbt3.jpg" alt="">
                    <p>这里是第三张轮播图的标题部分内容</p>
                </a>
            </div>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"><i class="fa fa-chevron-left fa-2x" aria-hidden="true"></i></div>
        <div class="swiper-button-next"><i class="fa fa-chevron-right fa-2x" aria-hidden="true"></i></div>
    </div>
</div>

javascript代码:

<script>
    var mySwiper = new Swiper('.swiper-container', {
        loop: true,
        autoplay: true,

        autoplay: {
            disableOnInteraction: false,
        },

        // 分页器
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        // 上下页
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

    })
</script>

YzmCMS代码:

<div class="gj-slide1">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            {m:banner field="title,image,url,typeid,status" typeid="1" limit="3"}
            {loop $data $v}
            <div class="swiper-slide">
                <a href="{$v[url]}"><img src="{$v[image]}" alt="{$v[title]}">
                    <p>{$v[title]}</p>
                </a>
            </div>
            {/loop}
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"><i class="fa fa-chevron-left fa-2x" aria-hidden="true"></i></div>
        <div class="swiper-button-next"><i class="fa fa-chevron-right fa-2x" aria-hidden="true"></i></div>
    </div>
</div>

组件说明:

gj-slide1轮播图组件基于Swiper的响应式、可拖拽轮播图插件,Swiper是一款开源、免费且用纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。

上一篇:已经是第一篇