{"id":1158,"date":"2024-03-29T11:08:25","date_gmt":"2024-03-29T03:08:25","guid":{"rendered":"http:\/\/www.max-shu.com\/blog\/?p=1158"},"modified":"2024-03-29T11:08:27","modified_gmt":"2024-03-29T03:08:27","slug":"%e4%bd%bf%e7%94%a8js%e6%a8%a1%e5%9d%97swiper%e5%81%9a%e5%a4%9a%e5%9b%be%e7%89%87%e8%87%aa%e5%8a%a8%e6%bb%9a%e5%8a%a8","status":"publish","type":"post","link":"http:\/\/www.max-shu.com\/blog\/?p=1158","title":{"rendered":"\u4f7f\u7528js\u6a21\u5757Swiper\u505a\u591a\u56fe\u7247\u81ea\u52a8\u6eda\u52a8"},"content":{"rendered":"\n<p>\u5b98\u7f51\uff1a<a href=\"https:\/\/swiperjs.com\/swiper-api\">https:\/\/swiperjs.com\/swiper-api<\/a><\/p>\n\n\n\n<p>\u5b98\u7f51\u4f8b\u5b50\uff1a<a href=\"https:\/\/swiperjs.com\/demos#autoplay\">https:\/\/swiperjs.com\/demos#autoplay<\/a><\/p>\n\n\n\n<p>\u5b9e\u9645\u4f7f\u7528\uff1a<\/p>\n\n\n\n<p>&lt;!DOCTYPEhtml&gt;<\/p>\n\n\n\n<p>&lt;html><\/p>\n\n\n\n<p>    &lt;head><\/p>\n\n\n\n<p>        &lt;meta http-equiv=&#8221;Content-Type&#8221; content=&#8221;text\/html; charset=UTF-8&#8243;><\/p>\n\n\n\n<p>\u00a0 \u00a0 \u00a0  &lt;meta name=&#8221;viewport&#8221; content=&#8221;width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no&#8221;><\/p>\n\n\n\n<p>\u00a0 \u00a0 \u00a0 \u00a0&lt;meta name=&#8221;apple-mobile-web-app-capable&#8221; content=&#8221;yes&#8221;><\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp;&lt;!&#8211;\u5168\u5c4f\u663e\u793a&#8211;&gt;<\/p>\n\n\n\n<p>\u00a0 \u00a0 \u00a0 \u00a0&lt;meta name=&#8221;apple-mobile-web-app-status-bar-style&#8221; content=&#8221;blank&#8221;><\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp;&lt;!&#8211;\u9690\u85cf\u72b6\u6001\u680f&#8211;&gt;<\/p>\n\n\n\n<p>\u00a0 \u00a0 \u00a0 \u00a0&lt;meta name=&#8221;format-detection&#8221; content=&#8221; telephone=no&#8221;><\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp;&lt;!&#8211;\u5173\u95ediphone\u7ed9\u6570\u5b57\u6dfb\u52a0\u94fe\u63a5\u7684\u529f\u80fd&#8211;&gt;<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp;&lt;title&gt;\u6d4b\u8bd5&lt;\/title&gt;<\/p>\n\n\n\n<p>       &lt;meta http-equiv=&#8221;Cache-Control&#8221; content=&#8221;no-transform&#8221;><\/p>\n\n\n\n<p>\u00a0 \u00a0 \u00a0 \u00a0&lt;meta http-equiv=&#8221;Cache-Control&#8221; content=&#8221;no-siteapp&#8221;><\/p>\n\n\n\n<p>\u00a0 \u00a0 \u00a0 \u00a0&lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text\/css&#8221; href=&#8221;.\/css\/swiper-bundle.min.css&#8221;><\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp;&lt;style&gt;<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;.swiper{<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;width:100%;<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;height:100%;<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;.swiper-slide{<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;text-align:center;<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;font-size:18px;<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;background:#fff;<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;display:flex;<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;justify-content:center;<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;align-items:center;<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;.swiper-slideimg{<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;display:block;<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;width:100%;<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;height:100%;<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;object-fit:cover;<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp;&lt;\/style&gt;<\/p>\n\n\n\n<p>&nbsp; &nbsp;&lt;\/head&gt;<\/p>\n\n\n\n<p>&nbsp; &nbsp;&lt;body&gt;<\/p>\n\n\n\n<p class=\"has-vivid-red-color has-text-color has-link-color wp-elements-aacc03b6b2259ef0a62fc6ad9a2a5887\">        &lt;div class=&#8221;swiper <strong>mySwiper<\/strong>&#8220;><\/p>\n\n\n\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0&lt;div class=&#8221;swiper-wrapper&#8221;><\/p>\n\n\n\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0&lt;div class=&#8221;swiper-slide&#8221;>&lt;imgsrc=&#8221;images\/head\/DuZouQiShi.jpg&#8221;\/>&lt;\/div><\/p>\n\n\n\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0&lt;div class=&#8221;swiper-slide&#8221;>&lt;imgsrc=&#8221;images\/head\/XianGuoZhi.jpg&#8221;\/>&lt;\/div><\/p>\n\n\n\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0&lt;div class=&#8221;swiper-slide&#8221;>&lt;imgsrc=&#8221;images\/head\/ShuDu.jpg&#8221;\/>&lt;\/div><\/p>\n\n\n\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0&lt;div class=&#8221;swiper-slide&#8221;>&lt;imgsrc=&#8221;images\/head\/TianDianXiaoXiao.jpg&#8221;\/>&lt;\/div><\/p>\n\n\n\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0&lt;div class=&#8221;swiper-slide&#8221;>&lt;imgsrc=&#8221;images\/head\/TangGuoJingLing.png&#8221;\/>&lt;\/div><\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;\/div&gt;<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;\/div&gt;<\/p>\n\n\n\n<p>\u00a0 \u00a0 \u00a0 \u00a0&lt;script type=&#8221;text\/javascript&#8221; src=&#8221;.\/js\/swiper-bundle.min.js&#8221;>&lt;\/script><\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp;&lt;script&gt;<\/p>\n\n\n\n<p class=\"has-vivid-red-color has-text-color has-link-color wp-elements-1c5379fdae71e838991904aa1930fb71\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0var swiper=newSwiper(&#8220;.<strong>mySwiper<\/strong>&#8220;, {<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;speed:300,<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;loop:true,<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;spaceBetween:0,<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;centeredSlides:true,<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;autoplay:{<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;delay:2500,<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;disableOnInteraction:false,<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;pagination:{<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;el:&#8221;.swiper-pagination&#8221;,<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;clickable:true,<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;navigation:{<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;nextEl:&#8221;.swiper-button-next&#8221;,<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;prevEl:&#8221;.swiper-button-prev&#8221;,<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;\/script&gt;<\/p>\n\n\n\n<p>&nbsp; &nbsp;&lt;\/body&gt;<\/p>\n\n\n\n<p>&lt;\/html><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u5b98\u7f51\uff1ahttps:\/\/swiperjs.com\/swiper-api \u5b98\u7f51\u4f8b\u5b50\uff1ahttps:\/\/swiperj &hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[893,894,898,897,845,896,895],"class_list":["post-1158","post","type-post","status-publish","format-standard","hentry","category-13","tag-js","tag-swiper","tag-vue","tag-web","tag-845","tag-896","tag-895"],"views":843,"_links":{"self":[{"href":"http:\/\/www.max-shu.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1158","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.max-shu.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.max-shu.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.max-shu.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.max-shu.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1158"}],"version-history":[{"count":1,"href":"http:\/\/www.max-shu.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1158\/revisions"}],"predecessor-version":[{"id":1159,"href":"http:\/\/www.max-shu.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1158\/revisions\/1159"}],"wp:attachment":[{"href":"http:\/\/www.max-shu.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1158"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.max-shu.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1158"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.max-shu.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1158"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}