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);
});
原文地址:https://www.cnblogs.com/stumpx/p/7286042.html