用data屬性實例化swiper,在使用中不斷優化 HTML JavaScript ...
Framework7直接用data屬性實例化swiper用起來感覺很爽,剛好最近又用到swiper插件,乾脆仿寫一個用data實例化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); });