{"id":8817,"date":"2022-05-05T18:20:12","date_gmt":"2022-05-05T10:20:12","guid":{"rendered":"https:\/\/sdeno.com\/?p=8817"},"modified":"2022-09-27T17:11:48","modified_gmt":"2022-09-27T09:11:48","slug":"swiper-js%e4%b8%ad%e6%96%87%e6%96%87%e6%a1%a3","status":"publish","type":"post","link":"https:\/\/sdeno.com\/?p=8817","title":{"rendered":"swiper.js\u4e2d\u6587\u6587\u6863"},"content":{"rendered":"

swiper.js\u5df2\u7ecf\u66f4\u65b0\u52308.x\u4e86<\/p>\n

html<\/p>\n

<script src=\"https:\/\/cdn.bootcdn.net\/ajax\/libs\/Swiper\/8.1.4\/swiper-bundle.js\"><\/script>\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.bootcdn.net\/ajax\/libs\/Swiper\/8.1.4\/swiper-bundle.css\" \/>\r\n<style>\r\n.swiper{height: 300px}\r\n<\/style>\r\n<div class=\"swiper mySwiper\">\r\n    <!-- Additional required wrapper -->\r\n\r\n    <div class=\"swiper-wrapper\">\r\n        <div style=\"background: red;height: 50px\" class=\"swiper-slide\">Slide 1<\/div>\r\n        <div style=\"background: green;height: 150px\" class=\"swiper-slide\">Slide 2<\/div>\r\n        <div style=\"background: pink\" class=\"swiper-slide\">Slide 3<\/div>\r\n        <div class=\"swiper-slide\">Slide 4<\/div>\r\n        <div class=\"swiper-slide\">Slide 5<\/div>\r\n        <div class=\"swiper-slide\">Slide 6<\/div>\r\n        <div class=\"swiper-slide\">Slide 7<\/div>\r\n        <div class=\"swiper-slide\">Slide 8<\/div>\r\n        <div style=\"background: #000\" class=\"swiper-slide\">Slide 9<\/div>\r\n    <\/div>\r\n\r\n    <!-- If we need pagination -->\r\n    <div class=\"swiper-pagination\"><\/div>\r\n\r\n    <!-- If we need navigation buttons -->\r\n    <div class=\"swiper-button-prev\"><\/div>\r\n    <div class=\"swiper-button-next\"><\/div>\r\n\r\n    <!-- If we need scrollbar -->\r\n    <div class=\"swiper-scrollbar\"><\/div>\r\n<\/div><\/pre>\n
 <\/p>\n
 <\/p>\n
const swiper = new Swiper('.swiper', {\r\n        \/\/ Optional parameters\r\n        autoplay: {\r\n          disableOnInteraction: false, \/\/\u7528\u6237\u624b\u52a8\u8f6e\u64ad\u540e\uff0c\u7ee7\u7eed\u81ea\u52a8\u8f6e\u64ad\r\n          delay:2000,\r\n        },\r\n        slidesPerView: 2, \/\/1\u5c4f\u663e\u793a\u51e0\u4e2aslide\uff0c\u9ed8\u8ba4\u663e\u793a1\u4e2a,\u5168\u5c55\u793a\r\n        centeredSlides : false,\/\/\u914d\u5408slidesPerView\u624d\u80fd\u770b\u51fa\u6548\u679c\uff0ctrue\u65f6\uff0cactive slide\u4f1a\u5c45\u4e2d\uff0c\u5176\u4ed6\u4f1a\u88ab\u906e\u6321\r\n        centerInsufficientSlides:false, \/\/\u9ed8\u8ba4false\uff0c\u5982\u679c\u8bbe\u7f6etrue\uff0c\u5b9e\u9645slide\u6570\u91cf\u5c0f\u4e8eslidesPerView\u6570\u91cf\uff0cslide\u4f1a\u5c45\u4e2d\r\n        centeredSlidesBounds: false, \/\/true\u65f6\u8ba9\u7b2c\u4e00\u4e2aslide\u548c\u6700\u540e\u4e00\u4e2aslide\u8d34\u8fb9\r\n     \r\n        direction: 'horizontal', \/\/\u6c34\u5e73  'vertical' \u5782\u76f4\u6eda\u52a8\r\n        loop: false, \/\/\u65e0\u7f1d\u63a5\u65e0\u5faa\u73af\r\n        speed: 400,  \/\/\u6eda\u52a8\u901f\u5ea6\r\n        spaceBetween: 100, \/\/\u95f4\u8ddd\r\n        allowSlideNext:true, \/\/ false\u8868\u793a\u7981\u6b62\u5207\u6362\u4e0b\u4e00\u9875\r\n        allowSlidePrev:true, \/\/ false\u8868\u793a\u7981\u6b62\u5207\u6362\u4e0a\u4e00\u9875\r\n        allowTouchMove:true, \/\/false\u7981\u6b62\u7528\u624b\u52bf\u6ed1\u52a8\r\n        autoHeight:false, \/\/true\u81ea\u9002\u5e94\u9ad8\u5ea6\r\n \r\n        \/\/ breakpointsBase:'window', \/\/\u9ed8\u8ba4\u6839\u636e\u7a97\u53e3\u53d8\u5316\r\n        \/\/ breakpoints: {  \/\/\u6839\u636e\u7a97\u53e3\u5927\u5c0f\u6765\u6539\u53d8\u5c5e\u6027\r\n        \/\/     '@1.50': {   \/\/\u5927\u4e8e\u8be5\u6bd4\u4f8b\u65f6\u89e6\u53d1\r\n        \/\/         direction:'vertical'\r\n        \/\/     },\r\n        \/\/     320: {  \/\/\u5f53\u5c4f\u5e55\u5bbd\u5ea6\u5927\u4e8e\u7b49\u4e8e320px\u89e6\u53d1\r\n        \/\/\r\n        \/\/     },\r\n        \/\/ },\r\n        createElements: false,\/\/\u81ea\u52a8\u751f\u6210\u5143\u7d20,\u4e0d\u5b9e\u7528\r\n        containerModifierClass: 'swiper-', \/\/\u4fee\u6539\u5bb9\u5668\u524d\u7f00\r\n        cssMode: false, \/\/\u9760css\u9a71\u52a8swpier\u6ed1\u52a8\u6548\u679c\uff0c\u6027\u80fd\u63d0\u4f9b\uff0c\u4f46\u5f88\u591a\u529f\u80fd\u5c31\u4e22\u5931\u4e86\uff0c\u4e0d\u5b9e\u7528\r\n        edgeSwipeDetection:false, \/\/true\u65f6\u624b\u6307\u653e\u5728swpier\u6700\u8fb9\u7f18\u7684\u65f6\u5019\u65f6\u65e0\u6cd5\u6ed1\u52a8\u7684\uff0c\u8003\u8651\u4e00\u4e9b\u624b\u673a\u624b\u52bf\u5728\u6700\u8fb9\u7f18\u7684\u52a8\u4f5c\u662f\u5207\u6362\u4e0a\u4e00\u4e2aapp\u548c\u4e0b\u4e00\u4e2aapp\r\n        edgeSwipeThreshold : 20, \/\/\u5c4f\u5e55\u8fb9\u7f18\u63a2\u6d4b\u8ddd\u79bb\uff0c\u914d\u5408edgeSwipeDetection:true\u65f6\u4f7f\u7528\r\n        effect:'silde', \/\/\u5207\u6362\u6548\u679c\uff0c\u8fd8\u53ef\u8bbe\u7f6e\u4e3a\"fade\"\uff08\u6de1\u5165\uff09\u3001\"cube\"\uff08\u65b9\u5757\uff09\u3001\"coverflow\"\uff083d\u6d41\uff09\u3001\"flip\"\uff083d\u7ffb\u8f6c\uff09\u3001\"cards\"(\u5361\u7247\u5f0f)\u3001\"creative\"\uff08\u521b\u610f\u6027\uff09\r\n        enabled: true,\/\/false\uff0c\u7981\u7528swiper\r\n        focusableElements:'input,select, option, textarea, button, video, label',\/\/\u8fd9\u4e9b\u5143\u7d20\u653e\u5230slide\u91cc\u9762\u4f1a\u88abtouchStartPreventDefault\u963b\u6b62\uff0c\u89e6\u6478\u65e0\u6548\r\n        followFinger: true,\/\/false\u65f6\uff0c\u6ed1\u52a8\u9875\u9762\u65f6\uff0c\u53ea\u6709\u624b\u6307\u79bb\u5f00\u4e86\u624d\u4f1a\u89e6\u53d1\r\n        \/\/ If we need pagination\r\n        pagination: {\r\n            el: '.swiper-pagination',\r\n        },\r\n\r\n        \/\/ Navigation arrows\r\n        navigation: {\r\n            nextEl: '.swiper-button-next',\r\n            prevEl: '.swiper-button-prev',\r\n        },\r\n\r\n        \/\/ And if we need scrollbar\r\n        scrollbar: {\r\n            el: '.swiper-scrollbar',\r\n        },\r\n    });<\/pre>\n
 <\/p>\n
\u4e2d\u6587\uff1ahttps:\/\/sdeno.com\/wp-content\/uploads\/2022\/05\/swiper\/www.swiper.com.cn\/api\/index.html<\/a><\/p>\n
\u539f\u6587\u6863\uff1ahttps:\/\/swiperjs.com\/swiper-api#swiper-full-html-layout<\/a><\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
swiper.js\u5df2\u7ecf\u66f4\u65b0\u52308.x\u4e86 html <script src=”https:\/\/cdn.boo […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-8817","post","type-post","status-publish","format-standard","hentry","category-11"],"_links":{"self":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/8817","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8817"}],"version-history":[{"count":0,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/8817\/revisions"}],"wp:attachment":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8817"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=8817"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=8817"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}