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);
});

浙公网安备 33010602011771号