{"id":4049,"date":"2024-09-06T17:05:14","date_gmt":"2024-09-06T17:05:14","guid":{"rendered":"https:\/\/hocoos.com\/?post_type=answer&#038;p=4049"},"modified":"2026-01-20T15:04:32","modified_gmt":"2026-01-20T15:04:32","slug":"%e4%bb%80%e4%b9%88%e6%98%af%e7%bd%91%e7%ab%99%e6%bb%91%e5%9d%97","status":"publish","type":"answer","link":"https:\/\/hocoos.com\/zh\/%e7%ad%94%e6%a1%88\/%e4%bb%80%e4%b9%88%e6%98%af%e7%bd%91%e7%ab%99%e6%bb%91%e5%9d%97\/","title":{"rendered":"\u4ec0\u4e48\u662f\u6ed1\u5757\/\u8f6e\u64ad\uff1f"},"content":{"rendered":"<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>\u76ee\u5f55<\/h2><nav><ul><li><a href=\"#whats-the-difference-between-a-slider-and-a-carousel\">\u7f51\u7ad9\u6ed1\u5757\u548c\u8f6e\u64ad\u56fe\u4e4b\u95f4\u6709\u4ec0\u4e48\u533a\u522b\uff1f<\/a><\/li><li><a href=\"#how-do-i-implement-a-carousel-on-my-website\">\u5982\u4f55\u5728\u7f51\u7ad9\u4e0a\u5b9e\u73b0\u8f6e\u64ad\uff1f<\/a><ul><li><a href=\"#how-can-i-create-a-header-for-the-carousel\">\u5982\u4f55\u4e3a\u8f6e\u64ad\u521b\u5efa\u4e00\u4e2a\u6807\u9898\uff1f<\/a><\/li><li><a href=\"#how-can-i-add-autoplay-functionality-to-a-carousel-or-a-slider\">\u5982\u4f55\u4e3a\u8f6e\u64ad\u6216\u6ed1\u5757\u6dfb\u52a0\u81ea\u52a8\u64ad\u653e\u529f\u80fd\uff1f<\/a><\/li><\/ul><\/li><li><a href=\"#how-can-i-make-a-carousel-slider-responsive\">\u5982\u4f55\u4f7f\u8f6e\u64ad\u6ed1\u5757\u5177\u6709\u54cd\u5e94\u6027\uff1f<\/a><\/li><li><a href=\"#how-can-i-optimize-a-carousel-slider-for-seo\">\u5982\u4f55\u9488\u5bf9SEO\u4f18\u5316\u8f6e\u64ad\u6ed1\u5757\uff1f<\/a><\/li><li><a href=\"#conclusion\">\u603b\u7ed3<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"whats-the-difference-between-a-slider-and-a-carousel\" style=\"font-size:32px\"><strong>\u6ed1\u5757\u548c\u8f6e\u64ad\u56fe\u4e4b\u95f4\u6709\u4ec0\u4e48\u533a\u522b\uff1f<\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">\u6ed1\u5757\u548c\u8f6e\u64ad\u56fe\u90fd\u88ab\u8ba4\u4e3a\u662f\u5185\u5bb9\u4f20\u9012\u683c\u5f0f\uff0c\u5176\u6838\u5fc3\u662f\u89c6\u89c9\u5143\u7d20\uff08\u56fe\u50cf\u3001\u89c6\u9891\u3001\u6587\u672c\u7b49\uff09\u7684\u5e7b\u706f\u7247\uff0c\u5c3d\u7ba1\u5b83\u4eec\u7684\u5448\u73b0\u65b9\u5f0f\u4e0d\u540c\u3002\u6ed1\u5757\u4e00\u6b21\u5448\u73b0\u4e00\u4e2a\u9879\u76ee\uff0c\u5e76\u80fd\u591f\u5728\u6a2a\u5411\u79fb\u52a8\u9879\u76ee\u3002\u53e6\u4e00\u65b9\u9762\uff0c\u8f6e\u64ad\u56fe\u5728\u5927\u591a\u6570\u60c5\u51b5\u4e0b\u4e00\u6b21\u5c55\u793a\u591a\u4e2a\u9879\u76ee\uff0c\u79fb\u52a8\u6216\u65cb\u8f6c\u5b83\u4eec\uff0c\u8ba9\u4eba\u65e0\u9700\u5207\u6362\u9879\u76ee\u5373\u53ef\u5feb\u901f\u9884\u89c8\u591a\u4e2a\u9879\u76ee\u3002<\/p>\n\n\n\n<p style=\"font-size:18px\">\u5b83\u4eec\u7684\u57fa\u672c\u76f8\u4f3c\u4e4b\u5904\u5728\u4e8e\uff0c\u4e24\u8005\u90fd\u5728\u6709\u9650\u7684\u7a7a\u95f4\u5185\u4ee5\u5faa\u73af\u6216\u7ebf\u6027\u987a\u5e8f\u5c55\u793a\u4e00\u7cfb\u5217\u5143\u7d20\u3002<\/p>\n\n\n\n<div class=\"answers-tip-box mt-8 mt-lg-10\">\n<div class=\"answers-small-title\">\n\t\t\t\t\t\t\t\n\u4e13\u5bb6\u63d0\u793a\uff1a\n\n<\/div>\n<div class=\"answers-small-description mt-4\">\n\n\u9009\u62e9\u9002\u5408\u7f51\u9875\u5185\u5bb9\u548c\u8bbe\u8ba1\u7684\u6ed1\u5757\u6216\u8f6e\u64ad\u56fe\u6837\u5f0f\u3002\n\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-do-i-implement-a-carousel-on-my-website\" style=\"font-size:32px\"><strong><strong>\u5982\u4f55\u5728\u7f51\u7ad9\u4e0a\u5b9e\u73b0\u8f6e\u64ad\uff1f<\/strong><\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">\u8bb8\u591a\u7f51\u7ad9\u5efa\u8bbe\u5668\u90fd\u63d0\u4f9b\u9884\u5148\u8bbe\u8ba1\u7684\u5e26\u6709\u5185\u7f6e\u6ed1\u5757\u529f\u80fd\u7684\u533a\u5757\u3002\u9009\u62e9\u4e00\u4e2a\u7b26\u5408\u60a8\u4e1a\u52a1\u9700\u6c42\u7684\u7f51\u7ad9\u5efa\u8bbe\u5668\uff0c\u5e76\u4f7f\u7528\u6ed1\u5757\u6765\u6253\u9020\u52a8\u6001\u7684\u5728\u7ebf\u5f62\u8c61\u3002<\/p>\n\n\n\n<div class=\"answers-tip-box mt-8 mt-lg-10\">\n<div class=\"answers-small-title\">\n\t\t\t\t\t\t\t\n\u6df1\u5165\u4e86\u89e3\uff1a \n\n<\/div>\n<div class=\"answers-small-description mt-4\">\n\n\u5229\u7528\u8fd9\u4e9b\u65e0\u4ee3\u7801\u7f51\u7ad9\u5efa\u8bbe\u5de5\u5177\u63d0\u4f9b\u7684\u9884\u5148\u8bbe\u8ba1\u7684\u6ed1\u5757\u548c\u8f6e\u64ad\u56fe\u5e93\u3002\n\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading has-text-color\" id=\"how-can-i-create-a-header-for-the-carousel\" style=\"color:#422b82;font-size:22px\"><strong><strong>\u5982\u4f55\u4e3a\u8f6e\u64ad\u521b\u5efa\u4e00\u4e2a\u6807\u9898\uff1f<\/strong><\/strong><\/h3>\n\n\n\n<p style=\"font-size:18px\">\u9009\u62e9\u60a8\u559c\u6b22\u7684\u6ed1\u5757\u6216\u8f6e\u64ad\u56fe\u540e\uff0c\u6807\u9898\u5e94\u663e\u793a\u5728\u6b64\u5c0f\u90e8\u4ef6\u7684\u9876\u90e8\u3002\u5355\u51fb\u5e76\u6839\u636e\u56fe\u5e93\u5185\u5bb9\u8c03\u6574\u6807\u9898\u3002\u6807\u9898\u7684\u8bbe\u8ba1\u65e8\u5728\u9192\u76ee\u4e14\u7f8e\u89c2\uff0c\u540c\u65f6\u786e\u4fdd\u4e0e\u8f6e\u64ad\u56fe\u5185\u5bb9\u76f8\u5f97\u76ca\u5f70\u3002<\/p>\n\n\n\n<div class=\"answers-tip-box mt-8 mt-lg-10\">\n<div class=\"answers-small-title\">\n\t\t\t\t\t\t\t\n\u4e13\u5bb6\u63d0\u793a\uff1a\n\n<\/div>\n<div class=\"answers-small-description mt-4\">\n\n\u6807\u9898\u5e94\u7b80\u6d01\uff0c\u4f46\u8981\u5c3d\u53ef\u80fd\u8d34\u5207\u5730\u6982\u62ec\u8f6e\u64ad\u56fe\u7684\u5185\u5bb9\u3002\n\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading has-text-color\" id=\"how-can-i-add-autoplay-functionality-to-a-carousel-or-a-slider\" style=\"color:#422b82;font-size:22px\"><strong><strong>\u5982\u4f55\u4e3a\u8f6e\u64ad\u6216\u6ed1\u5757\u6dfb\u52a0\u81ea\u52a8\u64ad\u653e\u529f\u80fd\uff1f<\/strong><\/strong><\/h3>\n\n\n\n<p style=\"font-size:18px\">\u65e0\u4ee3\u7801\u7f51\u7ad9\u6784\u5efa\u5668\u5141\u8bb8\u60a8\u9009\u62e9\u6ed1\u5757\u6216\u8f6e\u64ad\u7684\u901f\u5ea6\uff08\u4f8b\u5982\uff0c\u56fe\u50cf\u663e\u793a 3 \u79d2\u6216 4 \u79d2\uff09\u3002\u6b64\u5916\uff0c\u60a8\u53ef\u4ee5\u9009\u62e9\u4f7f\u7528\u81ea\u52a8\u64ad\u653e\u6309\u94ae\u4f7f\u5176\u81ea\u52a8\u64ad\u653e\uff0c\u6216\u8005\u8ba9\u8bbf\u5ba2\u624b\u52a8\u5207\u6362\u56fe\u5e93\u3002<\/p>\n\n\n\n<div class=\"answers-tip-box mt-8 mt-lg-10\">\n<div class=\"answers-small-title\">\n\t\t\t\t\t\t\t\n\u4e13\u5bb6\u63d0\u793a\uff1a\n\n<\/div>\n<div class=\"answers-small-description mt-4\">\n\n\u786e\u4fdd\u7528\u6237\u77e5\u9053\u8f6e\u64ad\u56fe\u5f53\u524d\u5904\u4e8e\u81ea\u52a8\u64ad\u653e\u6a21\u5f0f\uff0c\u4f8b\u5982\u901a\u8fc7\u63d0\u4f9b\u67d0\u79cd\u5f62\u5f0f\u7684\u89c6\u89c9\u63d0\u793a\u3002\n\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-can-i-make-a-carousel-slider-responsive\" style=\"font-size:32px\"><strong><strong>\u5982\u4f55\u4f7f\u8f6e\u64ad\u6ed1\u5757\u5177\u6709\u54cd\u5e94\u6027\uff1f<\/strong><\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">\u50cfHocoos\u8fd9\u6837\u7684\u65e0\u4ee3\u7801\u7f51\u7ad9\u6784\u5efa\u5668\u5c06\u54cd\u5e94\u6027\u4f5c\u4e3a\u4f18\u5148\u529f\u80fd\uff0c\u4ee5\u51cf\u5c11\u5bf9\u624b\u52a8\u7f16\u7801\u6216\u5b9e\u65bd\u6d41\u7a0b\u7684\u4f9d\u8d56\uff0c\u56e0\u4e3a\u8fd9\u4e9b\u6d41\u7a0b\u5bb9\u6613\u51fa\u9519\u3002\u8fd9\u6709\u52a9\u4e8e\u907f\u514d\u7c7b\u4f3c\u4e8e\u56e0\u63d2\u4ef6\u6fc0\u6d3b\u4e0d\u6b63\u786e\u800c\u5bfc\u81f4\u7684\u9519\u8bef\uff0c\u8fd9\u79cd\u60c5\u51b5\u5728\u50cfWordPress\u8fd9\u6837\u7684CMS\u7f51\u7ad9\u4e2d\u66f4\u4e3a\u5e38\u89c1\uff0c\u8fd9\u4e9b\u9519\u8bef\u4f1a\u5bf9\u7f51\u7ad9\u529f\u80fd\u4ea7\u751f\u4e0d\u5229\u5f71\u54cd\u3002<\/p>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-can-i-optimize-a-carousel-slider-for-seo\" style=\"font-size:32px\"><strong><strong>\u5982\u4f55\u9488\u5bf9SEO\u4f18\u5316\u8f6e\u64ad\u6ed1\u5757\uff1f<\/strong><\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">\u63d0\u9ad8\u8f6e\u64ad\u6ed1\u5757\u7684SEO\u6027\u80fd\u4e0d\u4ec5\u4ec5\u662f\u7b80\u5355\u7684\u673a\u5236\uff0c\u5b83\u9700\u8981\u6ce8\u610f\u7528\u6237\u4f53\u9a8c\u548c\u722c\u866b\u6293\u53d6\uff08SEO\uff09\u3002\u4ee5\u4e0b\u662f\u4e00\u4e9b\u65b9\u6cd5\uff1a<\/p>\n\n\n\n<p style=\"font-size:18px\">\u2022 <strong>\u4e3a\u56fe\u7247\u63d0\u4f9b\u63cf\u8ff0\u6027Alt\u6807\u7b7e\uff1a <\/strong>Alt\u6807\u7b7e\u65e8\u5728\u5e2e\u52a9\u641c\u7d22\u5f15\u64ce\u548c\u5c4f\u5e55\u9605\u8bfb\u5668\u589e\u5f3a\u53ef\u8bbf\u95ee\u6027\u3002\u5fc5\u8981\u65f6\uff0c\u8bf7\u4fdd\u6301alt\u6587\u672c\u4e0e\u5173\u952e\u8bcd\u76f8\u5173\uff0c\u4ee5\u5e2e\u52a9\u8bfb\u8005\u3002<\/p>\n\n\n\n<p>\u2022 <strong>\u5728\u5185\u5bb9\u4e2d\u4f7f\u7528\u5408\u9002\u7684\u5173\u952e\u8bcd\uff1a <\/strong>\u5173\u952e\u8bcd\u5e94\u653e\u7f6e\u5728\u5e7b\u706f\u7247\u5185\u5bb9\u548c\u5e7b\u706f\u7247\u6807\u9898\u4e2d\uff0c\u4ee5\u63d0\u5347\u5e7b\u706f\u7247\u7684SEO\uff0c\u4f46\u8981\u6ce8\u610f\u4e0d\u8981\u5728\u6587\u7ae0\u4e2d\u8fc7\u5ea6\u4f7f\u7528\u5173\u952e\u8bcd\u3002\u529b\u6c42\u63d0\u4f9b\u6ee1\u8db3\u7279\u5b9a\u5e02\u573a\u9700\u6c42\u7684\u72ec\u7279\u4fe1\u606f\u5185\u5bb9\u3002<\/p>\n\n\n\n<p>\u2022 <strong>\u9875\u9762\u5e94\u5feb\u901f\u52a0\u8f7d\uff1a <\/strong>\u672a\u4f18\u5316\u7684\u56fe\u50cf\u548c\u52a8\u753b\u5bf9\u8c61\u662f\u53ef\u80fd\u5bfc\u81f4\u9875\u9762\u52a0\u8f7d\u7f13\u6162\u7684\u4e00\u4e9b\u56e0\u7d20\uff0c\u8fd9\u5bf9SEO\u4e0d\u5229\uff0c\u4f46\u8fd9\u5f88\u5bb9\u6613\u89e3\u51b3\u3002\u4f7f\u7528\u4f18\u5316\u7684\u56fe\u50cf\u6216\u8f83\u5c0f\u5206\u8fa8\u7387\u7684\u56fe\u50cf\uff0c\u5c3d\u91cf\u51cf\u5c11\u52a8\u753b\uff0c\u5e76\u5229\u7528\u61d2\u52a0\u8f7d\u3002<\/p>\n\n\n\n<p>\u2022 <strong>\u5e94\u6dfb\u52a0\u7ed3\u6784\u5316\u6570\u636e\u6807\u8bb0\uff1a <\/strong>\u4f7f\u7528\u7ed3\u6784\u5316\u6570\u636e\uff0c\u4f8b\u5982\u4f7f\u7528Schema.org\u8f6e\u64ad\u6807\u8bb0\u5176\u4ed6\u8f6e\u64ad\u5185\u5bb9\uff0c\u4ee5\u589e\u5f3a\u641c\u7d22\u5f15\u64ce\u5bf9\u8f6e\u64ad\u7684\u7406\u89e3\uff0c\u5e76\u5728\u641c\u7d22\u7ed3\u679c\u9875\u9762\u4e0a\u8fdb\u884c\u6807\u8bb0\u663e\u793a\u3002<\/p>\n\n\n\n<p>\u2022 <strong>\u4f18\u5148\u8003\u8651\u53ef\u8bbf\u95ee\u6027\uff1a <\/strong>\u4e3a\u4e86\u786e\u4fdd\u6240\u6709\u7528\u6237\uff08\u5305\u62ec\u6b8b\u969c\u4eba\u58eb\uff09\u90fd\u80fd\u5408\u89c4\u5730\u4f7f\u7528\u8f6e\u64ad\u56fe\uff0c\u5b83\u5e94\u5f53\u6613\u4e8e\u4f7f\u7528\u3001\u5bfc\u822a\u548c\u8bbf\u95ee\u3002\u8fd9\u6d89\u53ca\u7cbe\u51c6\u7684\u5bfc\u822a\u63a7\u4ef6\u3001\u952e\u76d8\u5bfc\u822a\u548c\u5408\u9002\u7684 ARIA \u5c5e\u6027\u3002<\/p>\n\n\n\n<div class=\"answers-tip-box mt-8 mt-lg-10\">\n<div class=\"answers-small-title\">\n\t\t\t\t\t\t\t\n\u4e13\u5bb6\u63d0\u793a\uff1a \n\n<\/div>\n<div class=\"answers-small-description mt-4\">\n\n\u4f7f\u7528\u6d4b\u91cf\u5de5\u5177\uff0c\u4f8b\u5982 Google PageSpeed Insights \u548c Lighthouse\uff0c\u8bc4\u4f30\u8f6e\u64ad\u56fe\u7684\u6548\u679c\u548c\u6027\u80fd\u3002\u4fee\u590d\u4efb\u4f55\u95ee\u9898\uff0c\u4ee5\u4f18\u5316\u7f51\u7ad9\u7684\u53ef\u7528\u6027\u548c SEO\u3002\n\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusion\" style=\"font-size:32px\"><strong>\u603b\u7ed3<\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">\u6ed1\u5757\u548c\u8f6e\u64ad\u56fe\u5728\u89c6\u89c9\u4e0a\u662f\u5c55\u793a\u5185\u5bb9\u7684\u6700\u5177\u5438\u5f15\u529b\u7684\u65b9\u5f0f\uff0c\u7136\u800c\uff0c\u53ef\u7528\u6027\u3001\u53ef\u8bbf\u95ee\u6027\u548c SEO \u5fc5\u987b\u5de7\u5999\u5730\u5e73\u8861\u624d\u80fd\u53d6\u5f97\u6210\u529f\u3002\u5982\u679c\u60a8\u4e86\u89e3\u6ed1\u5757\u7684\u4f18\u70b9\u548c\u5c40\u9650\u6027\uff0c\u5c31\u53ef\u4ee5\u6b63\u786e\u5730\u4f7f\u7528\u5b83\u4eec\u6765\u63d0\u9ad8\u60a8\u7f51\u7ad9\u7684\u6027\u80fd\u3002<\/p>","protected":false},"excerpt":{"rendered":"<p>What&#8217;s the difference between a slider and a carousel? Sliders and carousels are both considered content delivery formats that have at their core a slideshow of visual elements (images, videos, text, etc), although they are presented differently. Sliders present one item at a time with the ability to move across the items in lateral directions. [&hellip;]<\/p>","protected":false},"author":39,"featured_media":4093,"template":"","answers_category":[28],"class_list":["post-4049","answer","type-answer","status-publish","has-post-thumbnail","hentry","answers_category-website-design"],"acf":{"image":7825,"card_image":4093,"content":[{"acf_fc_layout":"header_section","title":"\u4ec0\u4e48\u662f\u6ed1\u5757\/\u8f6e\u64ad\uff1f","descriptions":"A carousel or a slider is an online component that contains animation that allows the display of several pieces of particular content (images, videos, or text, for instance) in one area for users to browse through.\r\n\r\nTo strike a balance between clarity and visual appeal without sacrificing valuable webpage space, you might opt for this method of data presentation.\r\n\r\n<strong>Alternatives<\/strong>: If you have limited content, consider a simple image gallery or grid layout.\r\n\r\n<strong>Tip<\/strong>: It\u2019s effective to keep the slides loaded with images and write in a few descriptive words.\r\n\r\n<strong>Example<\/strong>: A fair number of e-commerce sites incorporate a carousel on their pages to promote some product or event on the home page of the site.","tip_label":"Pro Tip","tip":"Implement A\/B testing of different types of carousels so that you can identify which transforms the visitors into customers effectively.","additional_tips":null,"key_takeaways_label":"Key Takeaways:","key_takeaways":[{"label":"Display content attractively using carousels\/sliders. Opt for the best images and write concise texts only","body":""},{"label":"Code or make use of libraries to create carousels. Make sure that they are both optimized for user experience and SEO","body":""}]}]},"_links":{"self":[{"href":"https:\/\/hocoos.com\/zh\/wp-json\/wp\/v2\/answer\/4049","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hocoos.com\/zh\/wp-json\/wp\/v2\/answer"}],"about":[{"href":"https:\/\/hocoos.com\/zh\/wp-json\/wp\/v2\/types\/answer"}],"author":[{"embeddable":true,"href":"https:\/\/hocoos.com\/zh\/wp-json\/wp\/v2\/users\/39"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hocoos.com\/zh\/wp-json\/wp\/v2\/media\/4093"}],"wp:attachment":[{"href":"https:\/\/hocoos.com\/zh\/wp-json\/wp\/v2\/media?parent=4049"}],"wp:term":[{"taxonomy":"answers_category","embeddable":true,"href":"https:\/\/hocoos.com\/zh\/wp-json\/wp\/v2\/answers_category?post=4049"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}