• swiper3初始化/swiper-init/用data实例化swiper/data-swiper


    Framework7直接用data属性实例化swiper用起来很爽,刚好最近又用到swiper插件,自己写一个

    HTML

    <div class="swiper-container swiper-init" data-autoplay="3000" data-loop="true" data-space-between="15"
         data-breakpoints="{1200:{slidesPerView: 1,spaceBetween: 15},768: {slidesPerView: 2,spaceBetween: 15}}">
        <div class="swiper-wrapper">
            <div class="swiper-slide" php-foreach="$tagList as $v">
                <a href="{$v['linkurl']}">
                    <div class="img" style="background-image: url({$v['thumb']});" title="{$v['title']}"></div>
                    <h4 class="title">{$v['title']} </h4>
                    <div class="content">{$v['introduce']}</div>
                </a>
            </div>
        </div>
        <div class="swiper-button-prev"><i class="icon icon-prev"></i></div>
        <div class="swiper-button-next"><i class="icon icon-next"></i></div>
    </div>

    JavaScript

    $('.swiper-container.swiper-init').each(function () {
        var $swiper = $(this);
        var defaults = {
            prevButton: $swiper.find('.swiper-button-prev')[0],
            nextButton: $swiper.find('.swiper-button-next')[0],
            pagination: $swiper.find('.swiper-pagination')[0],
            paginationType: 'bullets',
            autoplayDisableOnInteraction: false,
            paginationClickable: true,
            slideToClickedSlide: false,
            setWrapperSize: true,
            slidesPerView: 1,
            spaceBetween: 0,
            autoResize: true,
            observer: true,
            observeParents: true,
            autoplay: 3000,
            loop: true,
            onAfterResize: function (swiper) {
                swiper.update(true);
                setTimeout(function () {
                    swiper.update(true);
                }, 200);
            }
        };
        var options = $swiper.data('swiper');
        if (!!options) {
            options = (new Function('return ' + $swiper.data('swiper')))();
        } else {
            options = $swiper.data();
            $.each(options, function (k, v) {
                options[k] = (new Function('return ' + v))();
            });
        }
        var swiper = new Swiper(this, $.extend({}, defaults, options));
        $swiper.data('swiper', swiper);
    });
  • 相关阅读:
    git的使用(一)
    数据结构与算法 —— 二叉树 01
    数据结构与算法 —— 二叉树
    数据结构与算法 —— 链表linked list(06)
    数据结构与算法 —— 链表linked list(05)
    数据结构与算法 —— 链表linked list(04)
    数据结构与算法 —— 链表linked list(03)
    数据结构与算法 —— 链表linked list(02)
    Install sheild设置了Blue皮肤,但是有的窗口更改不了问题
    C# 进制转换
  • 原文地址:https://www.cnblogs.com/stumpx/p/7286042.html
Copyright © 2020-2023  润新知