{"id":90882,"date":"2025-09-01T19:42:06","date_gmt":"2025-09-01T12:42:06","guid":{"rendered":"https:\/\/itviec.com\/blog\/?p=90882"},"modified":"2025-09-01T19:42:09","modified_gmt":"2025-09-01T12:42:09","slug":"huong-dan-su-dung-carousel-bootstrap","status":"publish","type":"post","link":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-carousel-bootstrap\/","title":{"rendered":"H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng Carousel Bootstrap chi ti\u1ebft k\u00e8m v\u00ed d\u1ee5"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">N\u1ed9i dung b\u00e0i vi\u1ebft<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-carousel-bootstrap\/#Carousel_la_gi_trong_thiet_ke_web\" >Carousel l\u00e0 g\u00ec trong thi\u1ebft k\u1ebf web?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-carousel-bootstrap\/#Vai_tro_cua_Carousel_trong_giao_dien_va_trai_nghiem_nguoi_dung_UXUI\" >Vai tr\u00f2 c\u1ee7a Carousel trong giao di\u1ec7n v\u00e0 tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng (UX\/UI)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-carousel-bootstrap\/#Tai_sao_nen_su_dung_Carousel_cua_Bootstrap\" >T\u1ea1i sao n\u00ean s\u1eed d\u1ee5ng Carousel c\u1ee7a Bootstrap?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-carousel-bootstrap\/#Nhung_truong_hop_nao_nen_su_dung_Carousel\" >Nh\u1eefng tr\u01b0\u1eddng h\u1ee3p n\u00e0o n\u00ean s\u1eed d\u1ee5ng Carousel?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-carousel-bootstrap\/#Cau_truc_co_ban_va_cac_thanh_phan_chinh_cua_Carousel\" >C\u1ea5u tr\u00fac c\u01a1 b\u1ea3n v\u00e0 c\u00e1c th\u00e0nh ph\u1ea7n ch\u00ednh c\u1ee7a Carousel<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-carousel-bootstrap\/#Tuy_chinh_Carousel_trong_Bootstrap\" >T\u00f9y ch\u1ec9nh Carousel trong Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-carousel-bootstrap\/#Cac_phuong_thuc_thao_tac_voi_Bootstrap_Carousel_trong_JavaScript\" >C\u00e1c ph\u01b0\u01a1ng th\u1ee9c thao t\u00e1c v\u1edbi Bootstrap Carousel trong JavaScript<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-carousel-bootstrap\/#Nhung_luu_y_khi_su_dung_Carousel_trong_Bootstrap\" >Nh\u1eefng l\u01b0u \u00fd khi s\u1eed d\u1ee5ng Carousel trong Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-carousel-bootstrap\/#Bai_tap_luyen_tap_su_dung_Carousel_3_cap_do\" >B\u00e0i t\u1eadp luy\u1ec7n t\u1eadp s\u1eed d\u1ee5ng Carousel (3 c\u1ea5p \u0111\u1ed9)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-carousel-bootstrap\/#Cac_cau_hoi_thuong_gap_ve_Carousel_Bootstrap\" >C\u00e1c c\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 Carousel Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-carousel-bootstrap\/#Tong_Ket\" >T\u1ed5ng K\u1ebft<\/a><\/li><\/ul><\/nav><\/div>\n\n<p><strong><em>Carousel, ho\u1eb7c Slider, l\u00e0 c\u00f4ng c\u1ee5 gi\u00fap tr\u00ecnh b\u00e0y nhi\u1ec1u n\u1ed9i dung theo d\u1ea1ng tr\u01b0\u1ee3t b\u1eaft m\u1eaft, th\u01b0\u1eddng d\u00f9ng \u0111\u1ec3 hi\u1ec3n th\u1ecb \u1ea3nh, banner ho\u1eb7c th\u00f4ng \u0111i\u1ec7p n\u1ed5i b\u1eadt. Th\u00e0nh ph\u1ea7n Carousel Bootstrap cung c\u1ea5p s\u1eb5n th\u00e0nh ph\u1ea7n v\u1edbi \u0111\u1ea7y \u0111\u1ee7 hi\u1ec7u \u1ee9ng, \u0111i\u1ec1u h\u01b0\u1edbng v\u00e0 t\u00f9y ch\u1ecdn m\u1edf r\u1ed9ng, gi\u00fap b\u1ea1n t\u00edch h\u1ee3p d\u1ec5 d\u00e0ng v\u00e0o giao di\u1ec7n web.\u00a0<\/em><\/strong><\/p>\n\n\n\n<p>\u0110\u1ecdc b\u00e0i vi\u1ebft n\u00e0y \u0111\u1ec3 n\u1eafm r\u00f5 v\u1ec1:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Carousel Bootstrap l\u00e0 g\u00ec v\u00e0 khi n\u00e0o n\u00ean s\u1eed d\u1ee5ng?<\/li>\n\n\n\n<li>C\u1ea5u tr\u00fac HTML chu\u1ea9n v\u00e0 c\u00e1c th\u00e0nh ph\u1ea7n ph\u1ee5<\/li>\n\n\n\n<li>T\u00f9y ch\u1ec9nh hi\u1ec7u \u1ee9ng, th\u1eddi gian chuy\u1ec3n slide, t\u1eaft t\u1ef1 \u0111\u1ed9ng ch\u1ea1y<\/li>\n\n\n\n<li>B\u00e0i t\u1eadp th\u1ef1c h\u00e0nh carousel t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-carousel-la-gi-trong-thi\u1ebft-k\u1ebf-web\"><span class=\"ez-toc-section\" id=\"Carousel_la_gi_trong_thiet_ke_web\"><\/span><strong>Carousel l\u00e0 g\u00ec trong thi\u1ebft k\u1ebf web?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Carousel l\u00e0 m\u1ed9t th\u00e0nh ph\u1ea7n giao di\u1ec7n cho ph\u00e9p hi\u1ec3n th\u1ecb nhi\u1ec1u h\u00ecnh \u1ea3nh ho\u1eb7c n\u1ed9i dung trong c\u00f9ng m\u1ed9t v\u1ecb tr\u00ed, d\u01b0\u1edbi d\u1ea1ng tr\u00ecnh chi\u1ebfu (slideshow) lu\u00e2n phi\u00ean. Thay v\u00ec x\u1ebfp t\u1ea5t c\u1ea3 n\u1ed9i dung xu\u1ed1ng d\u01b0\u1edbi d\u1ea1ng danh s\u00e1ch d\u00e0i, carousel gi\u00fap g\u00f3i g\u1ecdn th\u00f4ng tin v\u00e0o m\u1ed9t khu v\u1ef1c duy nh\u1ea5t, cho ph\u00e9p ng\u01b0\u1eddi d\u00f9ng xem l\u1ea7n l\u01b0\u1ee3t t\u1eebng m\u1ee5c b\u1eb1ng thao t\u00e1c chuy\u1ec3n slide ho\u1eb7c \u0111\u1ec3 n\u00f3 t\u1ef1 \u0111\u1ed9ng ch\u1ea1y.<\/p>\n\n\n\n<p>Nh\u1edd hi\u1ec7u \u1ee9ng chuy\u1ec3n c\u1ea3nh m\u01b0\u1ee3t m\u00e0 v\u00e0 kh\u1ea3 n\u0103ng k\u1ebft h\u1ee3p n\u1ed9i dung \u0111a d\u1ea1ng (\u1ea3nh, v\u0103n b\u1ea3n, n\u00fat b\u1ea5m\u2026), carousel \u0111\u00e3 tr\u1edf th\u00e0nh m\u1ed9t y\u1ebfu t\u1ed1 quen thu\u1ed9c trong thi\u1ebft k\u1ebf web hi\u1ec7n \u0111\u1ea1i, \u0111\u1eb7c bi\u1ec7t \u1edf c\u00e1c trang gi\u1edbi thi\u1ec7u s\u1ea3n ph\u1ea9m, portfolio hay landing page qu\u1ea3ng c\u00e1o.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-vai-tro-c\u1ee7a-carousel-trong-giao-di\u1ec7n-va-tr\u1ea3i-nghi\u1ec7m-ng\u01b0\u1eddi-dung-ux-ui\"><span class=\"ez-toc-section\" id=\"Vai_tro_cua_Carousel_trong_giao_dien_va_trai_nghiem_nguoi_dung_UXUI\"><\/span><strong>Vai tr\u00f2 c\u1ee7a Carousel trong giao di\u1ec7n v\u00e0 tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng (UX\/UI)<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>V\u1ec1 m\u1eb7t giao di\u1ec7n, carousel gi\u00fap ti\u1ebft ki\u1ec7m \u0111\u00e1ng k\u1ec3 kh\u00f4ng gian hi\u1ec3n th\u1ecb, t\u1ea1o b\u1ed1 c\u1ee5c g\u1ecdn g\u00e0ng nh\u01b0ng v\u1eabn truy\u1ec1n t\u1ea3i \u0111\u01b0\u1ee3c nhi\u1ec1u th\u00f4ng tin. N\u00f3 c\u0169ng l\u00e0 m\u1ed9t \u0111i\u1ec3m nh\u1ea5n tr\u1ef1c quan, d\u1ec5 thu h\u00fat \u00e1nh nh\u00ecn c\u1ee7a ng\u01b0\u1eddi d\u00f9ng ngay khi h\u1ecd v\u1eeba truy c\u1eadp trang.<\/p>\n\n\n\n<p>V\u1ec1 tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng, carousel mang l\u1ea1i c\u1ea3m gi\u00e1c sinh \u0111\u1ed9ng nh\u1edd chuy\u1ec3n \u0111\u1ed9ng li\u00ean t\u1ee5c, d\u1eabn d\u1eaft ng\u01b0\u1eddi xem theo m\u1ed9t m\u1ea1ch n\u1ed9i dung nh\u1ea5t \u0111\u1ecbnh. C\u00e1c n\u00fat \u0111i\u1ec1u h\u01b0\u1edbng v\u00e0 ch\u1ea5m tr\u00f2n ch\u1ecdn slide gi\u00fap ng\u01b0\u1eddi d\u00f9ng ki\u1ec3m so\u00e1t tr\u1ea3i nghi\u1ec7m c\u1ee7a m\u00ecnh, trong khi ch\u1ebf \u0111\u1ed9 t\u1ef1 \u0111\u1ed9ng chuy\u1ec3n slide \u0111\u1ea3m b\u1ea3o h\u1ecd kh\u00f4ng b\u1ecf l\u1ee1 th\u00f4ng tin quan tr\u1ecdng.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-t\u1ea1i-sao-nen-s\u1eed-d\u1ee5ng-carousel-c\u1ee7a-bootstrap\"><span class=\"ez-toc-section\" id=\"Tai_sao_nen_su_dung_Carousel_cua_Bootstrap\"><\/span><strong>T\u1ea1i sao n\u00ean s\u1eed d\u1ee5ng Carousel c\u1ee7a Bootstrap?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Carousel trong <strong><a href=\"https:\/\/itviec.com\/blog\/bootstrap-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">Bootstrap<\/a><\/strong> l\u00e0 component c\u00f3 s\u1eb5n, cho ph\u00e9p ng\u01b0\u1eddi d\u00f9ng t\u1ea1o carousel nhanh ch\u00f3ng m\u00e0 kh\u00f4ng c\u1ea7n vi\u1ebft l\u1ea1i to\u00e0n b\u1ed9 t\u1eeb \u0111\u1ea7u. Carousel component t\u00edch h\u1ee3p \u0111\u1ea7y \u0111\u1ee7 c\u00e1c t\u00ednh n\u0103ng c\u01a1 b\u1ea3n c\u1ee7a m\u1ed9t carousel hi\u1ec7n \u0111\u1ea1i nh\u01b0 chuy\u1ec3n slide t\u1ef1 \u0111\u1ed9ng, \u0111i\u1ec1u h\u01b0\u1edbng tr\u00e1i\/ph\u1ea3i, ch\u1ea5m tr\u00f2n ch\u1ec9 \u0111\u1ecbnh slide, v\u00e0 c\u1ea3 ch\u00e8n ti\u00eau \u0111\u1ec1 (caption) cho m\u1ed7i \u1ea3nh.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"441\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image.png\" alt=\"slider bootstrap - itviec blog\" class=\"wp-image-90883\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-300x165.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-640x353.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-200x110.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-768x423.png 768w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-1536x846.png 1536w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\"><em>H\u00ecnh \u1ea3nh minh h\u1ecda carousel trong Bootstrap<\/em><\/p>\n\n\n\n<p>Vi\u1ec7c d\u00f9ng Carousel c\u1ee7a Bootstrap v\u1eeba ti\u1ebft ki\u1ec7m th\u1eddi gian ph\u00e1t tri\u1ec3n, v\u1eeba \u0111\u1ea3m b\u1ea3o t\u00ednh t\u01b0\u01a1ng th\u00edch tr\u00ean nhi\u1ec1u thi\u1ebft b\u1ecb nh\u1edd thi\u1ebft k\u1ebf responsive. Ch\u1ec9 c\u1ea7n m\u1ed9t v\u00e0i class v\u00e0 thu\u1ed9c t\u00ednh \u0111\u01a1n gi\u1ea3n, b\u1ea1n \u0111\u00e3 c\u00f3 th\u1ec3 t\u00f9y ch\u1ec9nh t\u1ed1c \u0111\u1ed9, hi\u1ec7u \u1ee9ng ho\u1eb7c giao di\u1ec7n \u0111\u1ec3 ph\u00f9 h\u1ee3p v\u1edbi phong c\u00e1ch c\u1ee7a d\u1ef1 \u00e1n, m\u00e0 v\u1eabn gi\u1eef \u0111\u01b0\u1ee3c tr\u1ea3i nghi\u1ec7m m\u01b0\u1ee3t m\u00e0 v\u00e0 \u0111\u1ed3ng nh\u1ea5t tr\u00ean desktop, tablet v\u00e0 mobile.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-nh\u1eefng-tr\u01b0\u1eddng-h\u1ee3p-nao-nen-s\u1eed-d\u1ee5ng-carousel\"><span class=\"ez-toc-section\" id=\"Nhung_truong_hop_nao_nen_su_dung_Carousel\"><\/span><strong>Nh\u1eefng tr\u01b0\u1eddng h\u1ee3p n\u00e0o n\u00ean s\u1eed d\u1ee5ng Carousel?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Carousel \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng r\u1ed9ng r\u00e3i trong nhi\u1ec1u lo\u1ea1i giao di\u1ec7n website kh\u00e1c nhau, \u0111\u1eb7c bi\u1ec7t l\u00e0:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Trang ch\u1ee7 c\u1ee7a website c\u00f4ng ty, startup: \u0111\u1ec3 hi\u1ec3n th\u1ecb h\u00ecnh \u1ea3nh n\u1ed5i b\u1eadt, slogan ho\u1eb7c th\u00f4ng \u0111i\u1ec7p gi\u1edbi thi\u1ec7u s\u1ea3n ph\u1ea9m, d\u1ecbch v\u1ee5.<\/li>\n\n\n\n<li>Website th\u01b0\u01a1ng m\u1ea1i \u0111i\u1ec7n t\u1eed: d\u00f9ng \u0111\u1ec3 tr\u00ecnh b\u00e0y c\u00e1c s\u1ea3n ph\u1ea9m n\u1ed5i b\u1eadt, ch\u01b0\u01a1ng tr\u00ecnh khuy\u1ebfn m\u00e3i theo d\u1ea1ng \u1ea3nh chuy\u1ec3n \u0111\u1ed9ng.<\/li>\n\n\n\n<li>Landing page: gi\u00fap t\u1ea1o \u1ea5n t\u01b0\u1ee3ng th\u1ecb gi\u00e1c ban \u0111\u1ea7u v\u1edbi kh\u00e1ch truy c\u1eadp b\u1eb1ng m\u1ed9t carousel b\u1eaft m\u1eaft.<\/li>\n\n\n\n<li>Portfolio c\u00e1 nh\u00e2n ho\u1eb7c agency thi\u1ebft k\u1ebf: th\u1ec3 hi\u1ec7n c\u00e1c d\u1ef1 \u00e1n ho\u1eb7c s\u1ea3n ph\u1ea9m n\u1ed5i b\u1eadt m\u1ed9t c\u00e1ch tr\u1ef1c quan.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-c\u1ea5u-truc-c\u01a1-b\u1ea3n-va-cac-thanh-ph\u1ea7n-chinh-c\u1ee7a-carousel\"><span class=\"ez-toc-section\" id=\"Cau_truc_co_ban_va_cac_thanh_phan_chinh_cua_Carousel\"><\/span><strong>C\u1ea5u tr\u00fac c\u01a1 b\u1ea3n v\u00e0 c\u00e1c th\u00e0nh ph\u1ea7n ch\u00ednh c\u1ee7a Carousel<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-c\u1ea5u-truc-html-c\u01a1-b\u1ea3n-c\u1ee7a-carousel\"><strong>C\u1ea5u tr\u00fac HTML c\u01a1 b\u1ea3n c\u1ee7a Carousel<\/strong><\/h3>\n\n\n\n<p>Carousel trong Bootstrap \u0111\u01b0\u1ee3c x\u00e2y d\u1ef1ng t\u1eeb m\u1ed9t c\u1ea5u tr\u00fac HTML r\u00f5 r\u00e0ng v\u00e0 c\u00f3 t\u00ednh ph\u00e2n t\u1ea7ng bao g\u1ed3m m\u1ed9t th\u1ebb m\u1ed9t th\u1ebb <strong>&lt;div&gt;<\/strong> bao b\u1ecdc b\u00ean ngo\u00e0i v\u1edbi class \u201c<strong>carousel slide<\/strong>\u201d, \u0111i k\u00e8m <strong>data-bs-ride=\u201ccarousel\u201d<\/strong> \u0111\u1ec3 k\u00edch ho\u1ea1t t\u00ednh n\u0103ng t\u1ef1 \u0111\u1ed9ng ch\u1ea1y.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&lt;div class=\"carousel slide\" data-bs-ride=\"carousel\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...\n&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>B\u00ean trong s\u1ebd bao g\u1ed3m c\u00e1c slide \u1ea3nh n\u1eb1m trong <strong>carousel-inner<\/strong>, m\u1ed7i slide l\u00e0 m\u1ed9t <strong>carousel-item<\/strong>. Slide \u0111\u1ea7u ti\u00ean c\u1ea7n th\u00eam class <strong>.active<\/strong> \u0111\u1ec3 hi\u1ec3n th\u1ecb m\u1eb7c \u0111\u1ecbnh.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"carousel-inner\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"carousel-item active\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"carousel-item\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&lt;div id=\"carouselExample\" class=\"carousel slide\" data-bs-ride=\"carousel\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"carousel-inner\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"carousel-item active\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=\"slide1.jpg\" class=\"d-block w-100\" alt=\"...\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"carousel-item\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=\"slide2.jpg\" class=\"d-block w-100\" alt=\"...\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-carousel-indicators-ch\u1ea5m-tron-di\u1ec1u-h\u01b0\u1edbng\"><strong>Carousel Indicators (Ch\u1ea5m tr\u00f2n \u0111i\u1ec1u h\u01b0\u1edbng)<\/strong><\/h3>\n\n\n\n<p>Indicators l\u00e0 nh\u1eefng ch\u1ea5m tr\u00f2n nh\u1ecf n\u1eb1m d\u01b0\u1edbi carousel, gi\u00fap ng\u01b0\u1eddi d\u00f9ng bi\u1ebft \u0111ang xem slide th\u1ee9 m\u1ea5y v\u00e0 cho ph\u00e9p chuy\u1ec3n nhanh \u0111\u1ebfn slide b\u1ea5t k\u1ef3.&nbsp;<\/p>\n\n\n\n<p>Minh h\u1ecda:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"761\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-5.png\" alt=\"slider bootstrap - itviec blog\" class=\"wp-image-90888\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-5.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-5-300x285.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-5-640x609.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-5-200x190.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-5-768x731.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>C\u00e1c ch\u1ea5m n\u00e0y \u0111\u01b0\u1ee3c \u0111\u1eb7t trong th\u1ebb <strong>&lt;div&gt;<\/strong> v\u1edbi class <strong>carousel-indicators<\/strong>, m\u1ed7i ch\u1ea5m t\u01b0\u01a1ng \u1ee9ng v\u1edbi m\u1ed9t slide th\u00f4ng qua thu\u1ed9c t\u00ednh <strong>data-bs-slide-to<\/strong>.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5 c\u00e1ch t\u1ea1o indicators trong h\u00ecnh minh h\u1ecda tr\u00ean:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&lt;div id=\"carouselExampleIndicators\" class=\"carousel slide\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"carousel-indicators\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button type=\"button\" data-bs-target=\"#carouselExampleIndicators\" data-bs-slide-to=\"0\" class=\"active\" aria-current=\"true\" aria-label=\"Slide 1\"&gt;&lt;\/button&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button type=\"button\" data-bs-target=\"#carouselExampleIndicators\" data-bs-slide-to=\"1\" aria-label=\"Slide 2\"&gt;&lt;\/button&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button type=\"button\" data-bs-target=\"#carouselExampleIndicators\" data-bs-slide-to=\"2\" aria-label=\"Slide 3\"&gt;&lt;\/button&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"carousel-inner\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"carousel-item active\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=\"https:\/\/yt3.googleusercontent.com\/FbuUhhAlubdj_2xPymAvufoEQWFaIIoEa0gPlWUP05nh-WGN628FkXaMDpl6Y03g46n6ZUQXeQ=s900-c-k-c0x00ffffff-no-rj\" class=\"d-block w-100\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"carousel-item\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=\"https:\/\/yt3.googleusercontent.com\/FbuUhhAlubdj_2xPymAvufoEQWFaIIoEa0gPlWUP05nh-WGN628FkXaMDpl6Y03g46n6ZUQXeQ=s900-c-k-c0x00ffffff-no-rj\" class=\"d-block w-100\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"carousel-item\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=\"https:\/\/yt3.googleusercontent.com\/FbuUhhAlubdj_2xPymAvufoEQWFaIIoEa0gPlWUP05nh-WGN628FkXaMDpl6Y03g46n6ZUQXeQ=s900-c-k-c0x00ffffff-no-rj\" class=\"d-block w-100\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Trong \u0111\u00f3: C\u1ea7n \u0111\u1ea3m b\u1ea3o thu\u1ed9c t\u00ednh <strong>data-bs-target<\/strong> c\u00f3 gi\u00e1 tr\u1ecb l\u00e0 id c\u1ee7a carousel.<\/p>\n\n\n\n<p>M\u1eb7c \u0111\u1ecbnh, indicators l\u00e0 c\u00e1c h\u00ecnh ch\u1eef nh\u1eadt nh\u1ecf. Nh\u01b0ng b\u1ea1n c\u00f3 th\u1ec3 thay \u0111\u1ed5i ki\u1ec3u d\u00e1ng c\u1ee7a ch\u00fang th\u00f4ng qua CSS. V\u00ed d\u1ee5 \u1edf code ph\u00eda tr\u00ean, b\u1ea1n c\u00f3 th\u00eam \u0111o\u1ea1n CSS sau:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style&gt;\n&nbsp;#carouselExampleIndicators .carousel-indicators &#91;data-bs-target] {\n&nbsp;&nbsp;&nbsp;width: 12px;\n&nbsp;&nbsp;&nbsp;height: 12px;\n&nbsp;&nbsp;&nbsp;border-radius: 50%;\n&nbsp;&nbsp;&nbsp;background-color: rgba(255, 255, 255, 0.5);\n&nbsp;&nbsp;&nbsp;margin: 0 6px;\n&nbsp;&nbsp;&nbsp;transition: background-color 0.3s ease;\n&nbsp;}\n&nbsp;#carouselExampleIndicators .carousel-indicators .active {\n&nbsp;&nbsp;&nbsp;background-color: #fff;\n&nbsp;}\n&lt;\/style&gt;<\/code><\/pre>\n\n\n\n<p>L\u00fac n\u00e0y, ph\u1ea7n indicators s\u1ebd c\u00f3 d\u1ea1ng ch\u1ea5m tr\u00f2n:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"733\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-6.png\" alt=\"slider bootstrap - itviec blog\" class=\"wp-image-90889\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-6.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-6-300x275.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-6-640x587.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-6-200x183.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-6-768x704.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>Ho\u1eb7c b\u1ea1n c\u0169ng c\u00f3 th\u1ec3 t\u1ea1o c\u00e1c thumbnail c\u1ee7a t\u1eebng slide \u0111\u1ec3 l\u00e0m indicators. V\u00ed d\u1ee5 \u1edf code tr\u00ean, b\u1ea1n c\u00f3 th\u1ec3 c\u1eadp nh\u1eadt nh\u01b0 sau:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=\"carouselThumbnails\" class=\"carousel slide\" data-bs-ride=\"carousel\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"carousel-inner\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"carousel-item active\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=\"https:\/\/yt3.googleusercontent.com\/FbuUhhAlubdj_2xPymAvufoEQWFaIIoEa0gPlWUP05nh-WGN628FkXaMDpl6Y03g46n6ZUQXeQ=s900-c-k-c0x00ffffff-no-rj\" class=\"d-block w-100\" alt=\"Slide 1\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"carousel-item\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=\"https:\/\/yt3.googleusercontent.com\/FbuUhhAlubdj_2xPymAvufoEQWFaIIoEa0gPlWUP05nh-WGN628FkXaMDpl6Y03g46n6ZUQXeQ=s900-c-k-c0x00ffffff-no-rj\" class=\"d-block w-100\" alt=\"Slide 2\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"carousel-item\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=\"https:\/\/yt3.googleusercontent.com\/FbuUhhAlubdj_2xPymAvufoEQWFaIIoEa0gPlWUP05nh-WGN628FkXaMDpl6Y03g46n6ZUQXeQ=s900-c-k-c0x00ffffff-no-rj\" class=\"d-block w-100\" alt=\"Slide 3\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!-- Thumbnail indicators --&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"d-flex justify-content-center mt-3 gap-2\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=\"https:\/\/yt3.googleusercontent.com\/FbuUhhAlubdj_2xPymAvufoEQWFaIIoEa0gPlWUP05nh-WGN628FkXaMDpl6Y03g46n6ZUQXeQ=s900-c-k-c0x00ffffff-no-rj\" class=\"thumb\" data-bs-target=\"#carouselThumbnails\" data-bs-slide-to=\"0\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=\"https:\/\/yt3.googleusercontent.com\/FbuUhhAlubdj_2xPymAvufoEQWFaIIoEa0gPlWUP05nh-WGN628FkXaMDpl6Y03g46n6ZUQXeQ=s900-c-k-c0x00ffffff-no-rj\" class=\"thumb\" data-bs-target=\"#carouselThumbnails\" data-bs-slide-to=\"1\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=\"https:\/\/yt3.googleusercontent.com\/FbuUhhAlubdj_2xPymAvufoEQWFaIIoEa0gPlWUP05nh-WGN628FkXaMDpl6Y03g46n6ZUQXeQ=s900-c-k-c0x00ffffff-no-rj\" class=\"thumb\" data-bs-target=\"#carouselThumbnails\" data-bs-slide-to=\"2\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Sau \u0111\u00f3 b\u1ed5 sung th\u00eam CSS v\u00e0 Javascript \u0111\u1ec3 \u0111\u1ecbnh d\u1ea1ng thumbnail v\u00e0 k\u00edch ho\u1ea1t s\u1ef1 ki\u1ec7n khi click v\u00e0o \u1ea3nh thumbnail:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style&gt;\n&nbsp;.thumb {\n&nbsp;width: 100px;\n&nbsp;height: 60px;\n&nbsp;object-fit: cover;\n&nbsp;cursor: pointer;\n&nbsp;opacity: 0.6;\n&nbsp;border: 2px solid transparent;\n&nbsp;transition: all 0.3s ease;\n}\n.thumb:hover,\n.thumb.active-thumb {\n&nbsp;opacity: 1;\n&nbsp;border-color: #0d6efd;\n}\n&lt;\/style&gt;\n\n&lt;script&gt;\n&nbsp;const thumbs = document.querySelectorAll('.thumb');\n&nbsp;thumbs.forEach((thumb, idx) =&gt; {\n&nbsp;&nbsp;&nbsp;thumb.addEventListener('click', () =&gt; {\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;thumbs.forEach(t =&gt; t.classList.remove('active-thumb'));\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;thumb.classList.add('active-thumb');\n&nbsp;&nbsp;&nbsp;});\n&nbsp;});\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"747\" height=\"800\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-8.png\" alt=\"slider bootstrap - itviec blog\" class=\"wp-image-90891\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-8.png 747w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-8-280x300.png 280w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-8-598x640.png 598w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-8-187x200.png 187w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-8-768x822.png 768w\" sizes=\"auto, (max-width: 747px) 100vw, 747px\" \/><\/figure>\n\n\n\n<p>T\u00f3m l\u1ea1i: Vi\u1ec7c s\u1eed d\u1ee5ng indicators gi\u00fap n\u00e2ng cao tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng, \u0111\u1eb7c bi\u1ec7t khi carousel c\u00f3 nhi\u1ec1u n\u1ed9i dung c\u1ea7n ph\u00e2n trang r\u00f5 r\u00e0ng.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-carousel-controls-nut-di\u1ec1u-h\u01b0\u1edbng-trai-ph\u1ea3i\"><strong>Carousel Controls (N\u00fat \u0111i\u1ec1u h\u01b0\u1edbng tr\u00e1i\/ph\u1ea3i)<\/strong><\/h3>\n\n\n\n<p>\u0110\u1ec3 ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 di chuy\u1ec3n th\u1ee7 c\u00f4ng gi\u1eefa c\u00e1c slide, Bootstrap cung c\u1ea5p hai n\u00fat \u0111i\u1ec1u h\u01b0\u1edbng: tr\u00e1i (<strong>.carousel-control-prev<\/strong>) v\u00e0 ph\u1ea3i (<strong>.carousel-control-next<\/strong>). M\u1ed7i n\u00fat bao g\u1ed3m m\u1ed9t bi\u1ec3u t\u01b0\u1ee3ng m\u0169i t\u00ean v\u00e0 \u0111o\u1ea1n v\u0103n b\u1ea3n h\u1ed7 tr\u1ee3 screen reader (<strong>visually-hidden<\/strong>).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"437\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-1.png\" alt=\"slider bootstrap - itviec blog\" class=\"wp-image-90884\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-1.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-1-300x164.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-1-640x349.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-1-200x109.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-1-768x419.png 768w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-1-1536x839.png 1536w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>V\u00ed d\u1ee5 c\u00e1ch t\u1ea1o n\u00fat \u0111i\u1ec1u h\u01b0\u1edbng nh\u01b0 h\u00ecnh minh h\u1ecda tr\u00ean:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div id=\"carouselExampleFade\" class=\"carousel slide carousel-fade\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"carousel-inner\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"carousel-item active\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=\"...\" class=\"d-block w-100\" alt=\"...\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"carousel-item\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=\"...\" class=\"d-block w-100\" alt=\"...\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"carousel-item\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=\"...\" class=\"d-block w-100\" alt=\"...\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button class=\"carousel-control-prev\" type=\"button\" data-bs-target=\"#carouselExampleFade\" data-bs-slide=\"prev\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"&gt;&lt;\/span&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span class=\"visually-hidden\"&gt;Previous&lt;\/span&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/button&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button class=\"carousel-control-next\" type=\"button\" data-bs-target=\"#carouselExampleFade\" data-bs-slide=\"next\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span class=\"carousel-control-next-icon\" aria-hidden=\"true\"&gt;&lt;\/span&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span class=\"visually-hidden\"&gt;Next&lt;\/span&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/button&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>M\u1eb7c \u0111\u1ecbnh, Carousel Bootstrap cung c\u1ea5p hai n\u00fat \u0111i\u1ec1u h\u01b0\u1edbng n\u1eb1m hai b\u00ean tr\u00e1i\/ph\u1ea3i slide v\u1edbi icon m\u0169i t\u00ean. Tuy nhi\u00ean, b\u1ea1n ho\u00e0n to\u00e0n c\u00f3 th\u1ec3 thay \u0111\u1ed5i giao di\u1ec7n c\u1ee7a c\u00e1c n\u00fat \u0111i\u1ec1u h\u01b0\u1edbng theo phong c\u00e1ch ri\u00eang b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng CSS ho\u1eb7c thay th\u1ebf icon m\u1eb7c \u0111\u1ecbnh b\u1eb1ng text, SVG ho\u1eb7c b\u1ea5t k\u1ef3 ph\u1ea7n t\u1eed HTML n\u00e0o kh\u00e1c.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5 thay \u0111\u1ed5i icon \u0111i\u1ec1u h\u01b0\u1edbng th\u00e0nh v\u0103n b\u1ea3n:<\/p>\n\n\n\n<p>Hi\u1ec3n th\u1ecb ch\u1eef \u201cTr\u01b0\u1edbc\u201d v\u00e0 \u201cSau\u201d thay v\u00ec m\u0169i t\u00ean m\u1eb7c \u0111\u1ecbnh b\u1eb1ng c\u00e1ch:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Gi\u1eef nguy\u00ean .<strong>carousel-control-prev<\/strong> v\u00e0 <strong>.carousel-control-next<\/strong> \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o ch\u1ee9c n\u0103ng \u0111i\u1ec1u h\u01b0\u1edbng.<\/li>\n\n\n\n<li>G\u1ee1 b\u1ecf <strong>carousel-control-prev-icon<\/strong> v\u00e0 <strong>carousel-control-next-icon<\/strong>, thay v\u00e0o \u0111\u00f3 d\u00f9ng span ch\u1ee9a ch\u1eef.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>}\n&nbsp;.custom-prev {\n&nbsp;&nbsp;&nbsp;left: 10px;\n&nbsp;}\n&nbsp;.custom-next {\n&nbsp;&nbsp;&nbsp;right: 10px;\n&nbsp;}\n\n&nbsp;&lt;\/style&gt;&lt;div id=\"carouselTextControls\" class=\"carousel slide\" data-bs-ride=\"carousel\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"carousel-inner\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"carousel-item active\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=\"https:\/\/yt3.googleusercontent.com\/FbuUhhAlubdj_2xPymAvufoEQWFaIIoEa0gPlWUP05nh-WGN628FkXaMDpl6Y03g46n6ZUQXeQ=s900-c-k-c0x00ffffff-no-rj\" class=\"d-block w-100\"&gt;\n&lt;\/div&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"carousel-item\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=\"https:\/\/yt3.googleusercontent.com\/FbuUhhAlubdj_2xPymAvufoEQWFaIIoEa0gPlWUP05nh-WGN628FkXaMDpl6Y03g46n6ZUQXeQ=s900-c-k-c0x00ffffff-no-rj\" class=\"d-block w-100\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n\n&lt;!-- Custom Text Controls --&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button class=\"carousel-control-prev custom-prev\" type=\"button\" data-bs-target=\"#carouselTextControls\" data-bs-slide=\"prev\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span class=\"custom-arrow\"&gt;\u2190 Tr\u01b0\u1edbc&lt;\/span&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/button&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button class=\"carousel-control-next custom-next\" type=\"button\" data-bs-target=\"#carouselTextControls\" data-bs-slide=\"next\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span class=\"custom-arrow\"&gt;\u2192 Sau&lt;\/span&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/button&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n\n&lt;style&gt;\n&nbsp;.custom-arrow {\n&nbsp;&nbsp;&nbsp;font-size: 16px;\n&nbsp;&nbsp;&nbsp;font-weight: bold;\n&nbsp;&nbsp;&nbsp;color: white;\n&nbsp;&nbsp;&nbsp;background-color: rgba(0,0,0,0.6);\n&nbsp;&nbsp;&nbsp;padding: 8px 12px;\n&nbsp;&nbsp;&nbsp;border-radius: 6px;\n}\n&nbsp;.custom-prev {\n&nbsp;&nbsp;&nbsp;left: 10px;\n&nbsp;}\n&nbsp;.custom-next {\n&nbsp;&nbsp;&nbsp;right: 10px;\n&nbsp;}\n&nbsp;&lt;\/style&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"723\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-7.png\" alt=\"slider bootstrap - itviec blog\" class=\"wp-image-90890\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-7.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-7-300x271.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-7-640x579.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-7-200x181.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-7-768x694.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>T\u00f3m l\u1ea1i: Controls gi\u00fap ng\u01b0\u1eddi d\u00f9ng c\u00f3 to\u00e0n quy\u1ec1n ki\u1ec3m so\u00e1t vi\u1ec7c chuy\u1ec3n slide, \u0111\u1eb7c bi\u1ec7t h\u1eefu \u00edch khi mu\u1ed1n xem l\u1ea1i n\u1ed9i dung tr\u01b0\u1edbc \u0111\u00f3 ho\u1eb7c b\u1ecf qua nhanh slide hi\u1ec7n t\u1ea1i.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-carousel-caption-tieu-d\u1ec1-tren-\u1ea3nh\"><strong>Carousel Caption (Ti\u00eau \u0111\u1ec1 tr\u00ean \u1ea3nh)<\/strong><\/h3>\n\n\n\n<p>Carousel Caption l\u00e0 ph\u1ea7n v\u0103n b\u1ea3n hi\u1ec3n th\u1ecb tr\u1ef1c ti\u1ebfp tr\u00ean \u1ea3nh c\u1ee7a m\u1ed7i slide. Th\u01b0\u1eddng d\u00f9ng \u0111\u1ec3 hi\u1ec3n th\u1ecb ti\u00eau \u0111\u1ec1, m\u00f4 t\u1ea3 ho\u1eb7c l\u1eddi k\u00eau g\u1ecdi h\u00e0nh \u0111\u1ed9ng (CTA).&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"548\" height=\"512\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-3.png\" alt=\"slider bootstrap - itviec blog\" class=\"wp-image-90886\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-3.png 548w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-3-300x280.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-3-200x187.png 200w\" sizes=\"auto, (max-width: 548px) 100vw, 548px\" \/><\/figure>\n\n\n\n<p>\u0110\u1ec3 s\u1eed d\u1ee5ng caption, ta th\u00eam ph\u1ea7n t\u1eed <strong>&lt;div class=\u201ccarousel-caption\u201d&gt;<\/strong> b\u00ean trong m\u1ed7i <strong>carousel-item<\/strong>. N\u1ed9i dung trong caption c\u00f3 th\u1ec3 l\u00e0 ti\u00eau \u0111\u1ec1 (&lt;h5&gt;), \u0111o\u1ea1n v\u0103n m\u00f4 t\u1ea3 (&lt;p&gt;) ho\u1eb7c b\u1ea5t k\u1ef3 HTML n\u00e0o kh\u00e1c.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5 c\u00e1ch t\u1ea1o caption nh\u01b0 h\u00ecnh minh h\u1ecda tr\u00ean:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div id=\"carouselCaptionExample\" class=\"carousel slide\" data-bs-ride=\"carousel\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"carousel-inner\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"carousel-item active\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=\"https:\/\/yt3.googleusercontent.com\/FbuUhhAlubdj_2xPymAvufoEQWFaIIoEa0gPlWUP05nh-WGN628FkXaMDpl6Y03g46n6ZUQXeQ=s900-c-k-c0x00ffffff-no-rj\" class=\"d-block w-100\"&gt;\n&lt;div class=\"carousel-caption d-none d-md-block\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h5&gt;Ti\u00eau \u0111\u1ec1 Slide 1&lt;\/h5&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Th\u00f4ng tin chi ti\u1ebft d\u00e0nh cho ng\u01b0\u1eddi d\u00f9ng.&lt;\/p&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"carousel-item\"&gt;\n&lt;img src=\"https:\/\/yt3.googleusercontent.com\/FbuUhhAlubdj_2xPymAvufoEQWFaIIoEa0gPlWUP05nh-WGN628FkXaMDpl6Y03g46n6ZUQXeQ=s900-c-k-c0x00ffffff-no-rj\" class=\"d-block w-100\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"carousel-caption d-none d-md-block\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h5&gt;Ti\u00eau \u0111\u1ec1 Slide 2&lt;\/h5&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Th\u00f4ng tin chi ti\u1ebft d\u00e0nh cho ng\u01b0\u1eddi d\u00f9ng.&lt;\/p&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n&lt;button class=\"carousel-control-prev\" type=\"button\" data-bs-target=\"#carouselCaptionExample\" data-bs-slide=\"prev\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span class=\"carousel-control-prev-icon\"&gt;&lt;\/span&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/button&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button class=\"carousel-control-next\" type=\"button\" data-bs-target=\"#carouselCaptionExample\" data-bs-slide=\"next\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span class=\"carousel-control-next-icon\"&gt;&lt;\/span&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/button&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Trong \u0111\u00f3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>.carousel-caption<\/strong> gi\u00fap \u0111\u1ecbnh v\u1ecb ph\u1ea7n caption ngay b\u00ean trong \u1ea3nh.<\/li>\n\n\n\n<li>Class <strong>d-none d-md-block<\/strong> d\u00f9ng \u0111\u1ec3 \u1ea9n caption tr\u00ean thi\u1ebft b\u1ecb nh\u1ecf, ch\u1ec9 hi\u1ec3n th\u1ecb t\u1eeb m\u00e0n h\u00ecnh md tr\u1edf l\u00ean.<\/li>\n<\/ul>\n\n\n\n<p>T\u00f3m l\u1ea1i: N\u1ed9i dung c\u1ee7a caption nh\u1eb1m thu h\u00fat s\u1ef1 ch\u00fa \u00fd c\u1ee7a ng\u01b0\u1eddi d\u00f9ng, gi\u00fap cho n\u1ed9i dung carousel tr\u1edf n\u00ean sinh \u0111\u1ed9ng, c\u00f3 chi\u1ec1u s\u00e2u v\u00e0 truy\u1ec1n t\u1ea3i th\u00f4ng \u0111i\u1ec7p r\u00f5 r\u00e0ng h\u01a1n.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-tuy-ch\u1ec9nh-carousel-trong-bootstrap\"><span class=\"ez-toc-section\" id=\"Tuy_chinh_Carousel_trong_Bootstrap\"><\/span><strong>T\u00f9y ch\u1ec9nh Carousel trong Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Bootstrap Carousel kh\u00f4ng ch\u1ec9 m\u1ea1nh m\u1ebd \u1edf ph\u1ea7n c\u1ea5u tr\u00fac m\u00e0 c\u00f2n r\u1ea5t linh ho\u1ea1t khi t\u00f9y ch\u1ec9nh. Ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 d\u1ec5 d\u00e0ng thay \u0111\u1ed5i hi\u1ec7u \u1ee9ng chuy\u1ec3n \u0111\u1ed9ng, \u0111i\u1ec1u ch\u1ec9nh th\u1eddi gian gi\u1eefa c\u00e1c slide ho\u1eb7c b\u1eadt\/t\u1eaft t\u00ednh n\u0103ng t\u1ef1 \u0111\u1ed9ng ch\u1ea1y m\u00e0 kh\u00f4ng c\u1ea7n vi\u1ebft nhi\u1ec1u JavaScript.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-them-hi\u1ec7u-\u1ee9ng-chuy\u1ec3n-d\u1ed9ng-slide-vs-fade\"><strong>Th\u00eam hi\u1ec7u \u1ee9ng chuy\u1ec3n \u0111\u1ed9ng (Slide vs Fade)<\/strong><\/h3>\n\n\n\n<p>M\u1eb7c \u0111\u1ecbnh, Carousel s\u1eed d\u1ee5ng hi\u1ec7u \u1ee9ng tr\u01b0\u1ee3t ngang (slide) khi chuy\u1ec3n \u0111\u1ed5i gi\u1eefa c\u00e1c slide. Tuy nhi\u00ean, b\u1ea1n c\u0169ng c\u00f3 th\u1ec3 chuy\u1ec3n sang hi\u1ec7u \u1ee9ng m\u1edd d\u1ea7n (fade) \u0111\u1ec3 t\u1ea1o c\u1ea3m gi\u00e1c nh\u1eb9 nh\u00e0ng, tinh t\u1ebf h\u01a1n b\u1eb1ng vi\u1ec7c th\u00eam class <strong>carousel-fade<\/strong> v\u00e0o ph\u1ea7n t\u1eed <strong>.carousel<\/strong>.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&lt;div id=\"carouselFadeExample\" class=\"carousel slide carousel-fade\" data-bs-ride=\"carousel\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"carousel-inner\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"carousel-item active\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=\"...\" class=\"d-block w-100\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"carousel-item\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=\"...\" class=\"d-block w-100\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-tuy-ch\u1ec9nh-th\u1eddi-gian-chuy\u1ec3n-slide-data-bs-interval\"><strong>T\u00f9y ch\u1ec9nh th\u1eddi gian chuy\u1ec3n slide (data-bs-interval)<\/strong><\/h3>\n\n\n\n<p>Bootstrap cho ph\u00e9p thi\u1ebft l\u1eadp kho\u1ea3ng th\u1eddi gian hi\u1ec3n th\u1ecb m\u1ed7i slide th\u00f4ng qua thu\u1ed9c t\u00ednh <strong>data-bs-interval<\/strong>, m\u1eb7c \u0111\u1ecbnh l\u00e0 5000 (t\u1ee9c 5 gi\u00e2y). B\u1ea1n c\u00f3 th\u1ec3 khai b\u00e1o <strong>data-bs-interval<\/strong> tr\u1ef1c ti\u1ebfp cho <strong>carousel<\/strong> \u0111\u1ec3 \u00e1p d\u1ee5ng th\u1eddi gian cho to\u00e0n b\u1ed9 slides ho\u1eb7c t\u1eebng <strong>carousel-item<\/strong> ri\u00eang l\u1ebb.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&lt;div id=\"carouselIntervalExample\" class=\"carousel slide\" data-bs-ride=\"carousel\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"carousel-inner\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"carousel-item active\" data-bs-interval=\"2000\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=\"...\" class=\"d-block w-100\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"carousel-item\" data-bs-interval=\"4000\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=\"...\" class=\"d-block w-100\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Trong \u0111\u00f3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Slide \u0111\u1ea7u hi\u1ec3n th\u1ecb 2 gi\u00e2y<\/li>\n\n\n\n<li>Slide ti\u1ebfp theo hi\u1ec3n th\u1ecb 4 gi\u00e2y tr\u01b0\u1edbc khi t\u1ef1 \u0111\u1ed9ng chuy\u1ec3n<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-b\u1eadt-t\u1eaft-tinh-nang-t\u1ef1-d\u1ed9ng-ch\u1ea1y-slide\"><strong>B\u1eadt\/T\u1eaft t\u00ednh n\u0103ng t\u1ef1 \u0111\u1ed9ng ch\u1ea1y slide<\/strong><\/h3>\n\n\n\n<p>Theo m\u1eb7c \u0111\u1ecbnh, Carousel s\u1ebd t\u1ef1 \u0111\u1ed9ng chuy\u1ec3n slide sau khi h\u1ebft th\u1eddi gian hi\u1ec3n th\u1ecb. Tuy nhi\u00ean, b\u1ea1n ho\u00e0n to\u00e0n c\u00f3 th\u1ec3 t\u1eaft t\u00ednh n\u0103ng n\u00e0y b\u1eb1ng c\u00e1ch kh\u00f4ng th\u00eam <strong>data-bs-ride=\u201ccarousel\u201d <\/strong>\u1edf th\u1ebb <strong>&lt;div class=\u201ccarousel slide\u201d&gt;<\/strong>, ho\u1eb7c s\u1eed d\u1ee5ng <strong>ride: false<\/strong> trong JavaScript.<\/p>\n\n\n\n<p>C\u00e1ch 1: T\u1eaft t\u1ef1 \u0111\u1ed9ng ch\u1ea1y qua HTML<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&lt;div id=\"carouselManual\" class=\"carousel slide\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!-- Kh\u00f4ng c\u00f3 data-bs-ride --&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...\n&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>C\u00e1ch 2: T\u1eaft b\u1eb1ng JavaScript (\u0111\u1ed1i v\u1edbi carousel \u0111\u01b0\u1ee3c kh\u1edfi t\u1ea1o b\u1eb1ng JavaScript)<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script&gt;\n&nbsp;&nbsp;&nbsp;const myCarousel = document.querySelector('#carouselManual');\n&nbsp;&nbsp;&nbsp;const carousel = new bootstrap.Carousel(myCarousel, {\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;interval: false,\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ride: false\n&nbsp;&nbsp;&nbsp;});\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>C\u00e1ch 3: T\u1eaft b\u1eb1ng JavaScript (\u0111\u1ed1i v\u1edbi carousel \u0111\u00e3 \u0111\u01b0\u1ee3c kh\u1edfi t\u1ea1o t\u1ef1 \u0111\u1ed9ng)<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script&gt;\n&nbsp;\/\/ t\u00ecm \u0111\u1ebfn carousel c\u1ea7n thao t\u00e1c\n&nbsp;const el = document.querySelector('#myCarousel');\n&nbsp;const carousel = bootstrap.Carousel.getInstance(el);\n&nbsp;\/\/ Sau \u0111\u00f3 c\u00f3 th\u1ec3 d\u00f9ng c\u00e1c ph\u01b0\u01a1ng th\u1ee9c:\n&nbsp;carousel.pause();\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>N\u1ebfu kh\u00f4ng ch\u1eafc Carousel \u0111\u00e3 \u0111\u01b0\u1ee3c kh\u1edfi t\u1ea1o hay ch\u01b0a, h\u00e3y d\u00f9ng <strong>getOrCreateInstance<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script&gt;\n&nbsp;&nbsp;&nbsp;const carousel = bootstrap.Carousel.getOrCreateInstance('#myCarousel', {\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;interval: false,\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ride: false,\n&nbsp;&nbsp;&nbsp;});\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cac-ph\u01b0\u01a1ng-th\u1ee9c-thao-tac-v\u1edbi-bootstrap-carousel-trong-javascript\"><span class=\"ez-toc-section\" id=\"Cac_phuong_thuc_thao_tac_voi_Bootstrap_Carousel_trong_JavaScript\"><\/span><strong>C\u00e1c ph\u01b0\u01a1ng th\u1ee9c thao t\u00e1c v\u1edbi Bootstrap Carousel trong JavaScript<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Sau khi Carousel \u0111\u00e3 \u0111\u01b0\u1ee3c kh\u1edfi t\u1ea1o, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng c\u00e1c ph\u01b0\u01a1ng th\u1ee9c sau \u0111\u1ec3 \u0111i\u1ec1u khi\u1ec3n th\u1ee7 c\u00f4ng qu\u00e1 tr\u00ecnh chuy\u1ec3n slide b\u1eb1ng JavaScript. C\u00e1c ph\u01b0\u01a1ng th\u1ee9c n\u00e0y ch\u1ec9 d\u00f9ng \u0111\u01b0\u1ee3c sau khi b\u1ea1n \u0111\u00e3 c\u00f3 m\u1ed9t <strong>instance<\/strong> (phi\u00ean b\u1ea3n c\u1ee5 th\u1ec3) c\u1ee7a <strong>bootstrap.Carousel<\/strong>.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const el = document.getElementById('myCarousel')\n\nconst instance_carousel = new bootstrap.Carousel(el)<\/code><\/pre>\n\n\n\n<p>L\u00fac n\u00e0y, <strong>instance_carousel<\/strong> l\u00e0 m\u1ed9t \u0111\u1ed1i t\u01b0\u1ee3ng \u0111\u1ea1i di\u1ec7n cho Carousel c\u1ee7a ph\u1ea7n t\u1eed <strong>#myCarousel<\/strong>, v\u00e0 b\u1ea1n c\u00f3 th\u1ec3 thao t\u00e1c v\u1edbi n\u00f3 th\u00f4ng qua c\u00e1c ph\u01b0\u01a1ng th\u1ee9c sau:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Ph\u01b0\u01a1ng th\u1ee9c<\/strong><\/td><td><strong>M\u00f4 t\u1ea3<\/strong><\/td><\/tr><tr><td><code>next()<\/code><\/td><td>Chuy\u1ec3n \u0111\u1ebfn slide k\u1ebf ti\u1ebfp<\/td><\/tr><tr><td><code>prev()<\/code><\/td><td>Quay v\u1ec1 slide tr\u01b0\u1edbc \u0111\u00f3<\/td><\/tr><tr><td><code>to(index)<\/code><\/td><td>Chuy\u1ec3n \u0111\u1ebfn slide theo ch\u1ec9 s\u1ed1 (b\u1eaft \u0111\u1ea7u t\u1eeb 0)<\/td><\/tr><tr><td><code>pause()<\/code><\/td><td>T\u1ea1m d\u1eebng chuy\u1ec3n \u0111\u1ed9ng t\u1ef1 \u0111\u1ed9ng c\u1ee7a Carousel<\/td><\/tr><tr><td><code>cycle()<\/code><\/td><td>Ti\u1ebfp t\u1ee5c ch\u1ea1y t\u1ef1 \u0111\u1ed9ng sau khi \u0111\u00e3 pause()<\/td><\/tr><tr><td><code>dispose()<\/code><\/td><td>H\u1ee7y instance v\u00e0 lo\u1ea1i b\u1ecf c\u00e1c s\u1ef1 ki\u1ec7n g\u1eafn v\u1edbi Carousel<\/td><\/tr><tr><td><code>getInstance(element)<\/code><\/td><td>Tr\u1ea3 v\u1ec1 instance \u0111\u00e3 \u0111\u01b0\u1ee3c kh\u1edfi t\u1ea1o c\u1ee7a ph\u1ea7n t\u1eed (n\u1ebfu c\u00f3)<\/td><\/tr><tr><td><code>getOrCreateInstance(element, options)<\/code><\/td><td>Tr\u1ea3 v\u1ec1 instance hi\u1ec7n c\u00f3, ho\u1eb7c t\u1ef1 \u0111\u1ed9ng kh\u1edfi t\u1ea1o n\u1ebfu ch\u01b0a c\u00f3<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>V\u00ed d\u1ee5: T\u1ea1m d\u1eebng v\u00e0 chuy\u1ec3n \u0111\u1ebfn slide s\u1ed1 2:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script&gt;\n&nbsp;&nbsp;&nbsp;const el = document.getElementById('myCarousel')\n&nbsp;&nbsp;&nbsp;const instance_carousel = new bootstrap.Carousel(el)\n&nbsp;&nbsp;&nbsp;instance_carousel.pause()\n&nbsp;&nbsp;&nbsp;instance_carousel.to(2)\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>Vi\u1ec7c s\u1eed d\u1ee5ng JavaScript \u0111\u1ec3 \u0111i\u1ec1u khi\u1ec3n Carousel r\u1ea5t h\u1eefu \u00edch khi b\u1ea1n c\u1ea7n th\u00eam c\u00e1c n\u00fat \u201cPlay\u201d, \u201cPause\u201d, ho\u1eb7c k\u1ebft h\u1ee3p v\u1edbi c\u00e1c \u0111i\u1ec1u ki\u1ec7n n\u00e2ng cao nh\u01b0 scroll \u0111\u1ebfn v\u00f9ng nh\u00ecn th\u1ea5y, ho\u1eb7c l\u1ea5y d\u1eef li\u1ec7u t\u1eeb API.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-nh\u1eefng-l\u01b0u-y-khi-s\u1eed-d\u1ee5ng-carousel-trong-bootstrap\"><span class=\"ez-toc-section\" id=\"Nhung_luu_y_khi_su_dung_Carousel_trong_Bootstrap\"><\/span><strong>Nh\u1eefng l\u01b0u \u00fd khi s\u1eed d\u1ee5ng Carousel trong Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Khi tri\u1ec3n khai Carousel v\u00e0o giao di\u1ec7n website, c\u00f3 m\u1ed9t s\u1ed1 \u0111i\u1ec3m quan tr\u1ecdng b\u1ea1n c\u1ea7n ch\u00fa \u00fd \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o t\u00ednh t\u01b0\u01a1ng th\u00edch, hi\u1ec7u n\u0103ng v\u00e0 tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u1ea2nh n\u00ean \u0111\u01b0\u1ee3c t\u1ed1i \u01b0u k\u00edch th\u01b0\u1edbc:<\/strong> Carousel th\u01b0\u1eddng ch\u1ee9a h\u00ecnh \u1ea3nh ch\u1ea5t l\u01b0\u1ee3ng cao \u0111\u1ec3 hi\u1ec3n th\u1ecb n\u1ed5i b\u1eadt. Tuy nhi\u00ean, vi\u1ec7c d\u00f9ng \u1ea3nh qu\u00e1 n\u1eb7ng s\u1ebd l\u00e0m ch\u1eadm th\u1eddi gian t\u1ea3i trang, \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn SEO v\u00e0 tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng. H\u00e3y n\u00e9n \u1ea3nh v\u00e0 s\u1eed d\u1ee5ng k\u00edch th\u01b0\u1edbc ph\u00f9 h\u1ee3p v\u1edbi khung hi\u1ec3n th\u1ecb.<\/li>\n\n\n\n<li><strong>\u0110\u1ea3m b\u1ea3o kh\u1ea3 n\u0103ng truy c\u1eadp (accessibility):<\/strong> M\u1ed7i n\u00fat \u0111i\u1ec1u h\u01b0\u1edbng v\u00e0 ch\u1ea5m tr\u00f2n <strong>indicators<\/strong> c\u1ea7n c\u00f3 thu\u1ed9c t\u00ednh <strong>aria-label<\/strong>, <strong>aria-current<\/strong> \u0111\u1ec3 h\u1ed7 tr\u1ee3 tr\u00ecnh \u0111\u1ecdc m\u00e0n h\u00ecnh. Ngo\u00e0i ra, \u1ea3nh trong Carousel n\u00ean c\u00f3 alt m\u00f4 t\u1ea3 n\u1ed9i dung r\u00f5 r\u00e0ng.<\/li>\n\n\n\n<li><strong>Tr\u00e1nh l\u1ea1m d\u1ee5ng hi\u1ec7u \u1ee9ng t\u1ef1 \u0111\u1ed9ng: <\/strong>T\u00ednh n\u0103ng auto-slide (<strong>data-bs-ride=\u201ccarousel\u201d<\/strong>) gi\u00fap n\u1ed9i dung lu\u00f4n chuy\u1ec3n \u0111\u1ed9ng, nh\u01b0ng n\u1ebfu ng\u01b0\u1eddi d\u00f9ng ch\u01b0a \u0111\u1ecdc xong ho\u1eb7c b\u1ecb thay \u0111\u1ed5i qu\u00e1 nhanh s\u1ebd g\u00e2y kh\u00f3 ch\u1ecbu. N\u00ean \u0111i\u1ec1u ch\u1ec9nh <strong>data-bs-interval<\/strong> h\u1ee3p l\u00fd (v\u00ed d\u1ee5 5000ms), ho\u1eb7c cho ph\u00e9p ng\u01b0\u1eddi d\u00f9ng t\u1ea1m d\u1eebng carousel b\u1eb1ng thao t\u00e1c t\u01b0\u01a1ng t\u00e1c (hover, click, ho\u1eb7c c\u00f3 n\u00fat \u201cPause\u201d).<\/li>\n\n\n\n<li><strong>Kh\u00f4ng n\u00ean nh\u00fang qu\u00e1 nhi\u1ec1u n\u1ed9i dung ph\u1ee9c t\u1ea1p v\u00e0o slide: <\/strong>M\u1ed7i slide n\u00ean \u0111\u01a1n gi\u1ea3n, g\u1ecdn g\u00e0ng, ch\u1eb3ng h\u1ea1n nh\u01b0 h\u00ecnh, ti\u00eau \u0111\u1ec1 v\u00e0 m\u00f4 t\u1ea3 ng\u1eafn. Tr\u00e1nh nh\u00fang form, video, ho\u1eb7c n\u1ed9i dung \u0111\u1ed9ng qu\u00e1 nhi\u1ec1u v\u00ec s\u1ebd g\u00e2y xung \u0111\u1ed9t, kh\u00f3 ki\u1ec3m so\u00e1t v\u00e0 l\u00e0m t\u0103ng t\u1ea3i cho tr\u00ecnh duy\u1ec7t.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-bai-t\u1eadp-luy\u1ec7n-t\u1eadp-s\u1eed-d\u1ee5ng-carousel-3-c\u1ea5p-d\u1ed9\"><span class=\"ez-toc-section\" id=\"Bai_tap_luyen_tap_su_dung_Carousel_3_cap_do\"><\/span><strong>B\u00e0i t\u1eadp luy\u1ec7n t\u1eadp s\u1eed d\u1ee5ng Carousel (3 c\u1ea5p \u0111\u1ed9)<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-bai-t\u1eadp-c\u01a1-b\u1ea3n\"><strong>B\u00e0i t\u1eadp c\u01a1 b\u1ea3n<\/strong><\/h3>\n\n\n\n<p>T\u1ea1o m\u1ed9t Carousel hi\u1ec3n th\u1ecb 3 \u1ea3nh v\u1edbi hi\u1ec7u \u1ee9ng chuy\u1ec3n slide m\u1eb7c \u0111\u1ecbnh, m\u1ed7i t\u1ef1 \u0111\u1ed9ng chuy\u1ec3n \u1ea3nh sau m\u1ed7i 3 gi\u00e2y.<\/p>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>L\u1eddi gi\u1ea3i B\u00e0i t\u1eadp 1<\/summary>\n<p>S\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh data-bs-ride=\u201ccarousel\u201d \u0111\u1ec3 b\u1eadt t\u00ednh n\u0103ng t\u1ef1 \u0111\u1ed9ng ch\u1ea1y, v\u00e0 d\u00f9ng class <strong>carousel-item<\/strong> \u0111\u1ec3 \u0111\u1ecbnh ngh\u0129a t\u1eebng slide, \u1ea3nh \u0111\u1ea7u ti\u00ean c\u1ea7n th\u00eam class <strong>active<\/strong>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div id=\"carouselBasic\" class=\"carousel slide\" data-bs-ride=\"carousel\" data-bs-interval=\"3000\">\n\u00a0\u00a0\u00a0&lt;div class=\"carousel-inner\">\n\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"carousel-item active\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;img src=\"https:\/\/via.placeholder.com\/800x400?text=Slide+1\" class=\"d-block w-100\" alt=\"Slide 1\">\n\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"carousel-item\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;img src=\"https:\/\/via.placeholder.com\/800x400?text=Slide+2\" class=\"d-block w-100\" alt=\"Slide 2\">\n\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"carousel-item\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;img src=\"https:\/\/via.placeholder.com\/800x400?text=Slide+3\" class=\"d-block w-100\" alt=\"Slide 3\">\n\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0&lt;\/div>\n&lt;\/div><\/code><\/pre>\n<\/details>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-bai-t\u1eadp-trung-binh\"><strong>B\u00e0i t\u1eadp trung b\u00ecnh<\/strong><\/h3>\n\n\n\n<p>T\u1ea1o carousel c\u00f3 n\u00fat \u0111i\u1ec1u h\u01b0\u1edbng tr\u00e1i\/ph\u1ea3i v\u00e0 ch\u1ea5m tr\u00f2n ch\u1ec9 s\u1ed1 slide, slide \u0111\u1ea7u hi\u1ec3n th\u1ecb 5 gi\u00e2y, slide th\u1ee9 2 hi\u1ec3n th\u1ecb 3 gi\u00e2y.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"538\" height=\"496\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-2.png\" alt=\"slider bootstrap - itviec blog\" class=\"wp-image-90885\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-2.png 538w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-2-300x277.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-2-200x184.png 200w\" sizes=\"auto, (max-width: 538px) 100vw, 538px\" \/><\/figure>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>L\u1eddi gi\u1ea3i B\u00e0i t\u1eadp 2<\/summary>\n<p>S\u1eed d\u1ee5ng <strong>carousel-indicators<\/strong> \u0111\u1ec3 t\u1ea1o c\u00e1c ch\u1ea5m \u0111i\u1ec1u h\u01b0\u1edbng v\u00e0 <strong>carousel-control<\/strong> \u0111\u1ec3 th\u00eam n\u00fat tr\u00e1i\/ph\u1ea3i. \u0110\u1eb7t <strong>data-bs-interval<\/strong> tr\u1ef1c ti\u1ebfp cho t\u1eebng <strong>carousel-item <\/strong>\u0111\u1ec3 quy \u0111\u1ecbnh th\u1eddi gian ri\u00eang cho m\u1ed7i slide.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div id=\"carouselIntermediate\" class=\"carousel slide\" data-bs-ride=\"carousel\">\n\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"carousel-indicators\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;button type=\"button\" data-bs-target=\"#carouselIntermediate\" data-bs-slide-to=\"0\" class=\"active\" aria-label=\"Slide 1\">&lt;\/button>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;button type=\"button\" data-bs-target=\"#carouselIntermediate\" data-bs-slide-to=\"1\" aria-label=\"Slide 2\">&lt;\/button>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;button type=\"button\" data-bs-target=\"#carouselIntermediate\" data-bs-slide-to=\"2\" aria-label=\"Slide 3\">&lt;\/button>\n\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"carousel-inner\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"carousel-item active\" data-bs-interval=\"5000\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;img src=\"https:\/\/yt3.googleusercontent.com\/FbuUhhAlubdj_2xPymAvufoEQWFaIIoEa0gPlWUP05nh-WGN628FkXaMDpl6Y03g46n6ZUQXeQ=s900-c-k-c0x00ffffff-no-rj\" class=\"d-block w-100\" alt=\"Slide 1\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"carousel-item\" data-bs-interval=\"3000\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;img src=\"https:\/\/yt3.googleusercontent.com\/FbuUhhAlubdj_2xPymAvufoEQWFaIIoEa0gPlWUP05nh-WGN628FkXaMDpl6Y03g46n6ZUQXeQ=s900-c-k-c0x00ffffff-no-rj\" class=\"d-block w-100\" alt=\"Slide 2\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"carousel-item\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;img src=\"https:\/\/yt3.googleusercontent.com\/FbuUhhAlubdj_2xPymAvufoEQWFaIIoEa0gPlWUP05nh-WGN628FkXaMDpl6Y03g46n6ZUQXeQ=s900-c-k-c0x00ffffff-no-rj\" class=\"d-block w-100\" alt=\"Slide 3\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0&lt;button class=\"carousel-control-prev\" type=\"button\" data-bs-target=\"#carouselIntermediate\" data-bs-slide=\"prev\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;span class=\"carousel-control-prev-icon\">&lt;\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/button>\n\u00a0\u00a0\u00a0\u00a0\u00a0&lt;button class=\"carousel-control-next\" type=\"button\" data-bs-target=\"#carouselIntermediate\" data-bs-slide=\"next\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;span class=\"carousel-control-next-icon\">&lt;\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/button>\n\u00a0\u00a0\u00a0&lt;\/div><\/code><\/pre>\n<\/details>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-bai-t\u1eadp-nang-cao\"><strong>B\u00e0i t\u1eadp n\u00e2ng cao<\/strong><\/h3>\n\n\n\n<p>T\u1ea1o carousel c\u00f3 th\u00eam caption v\u00e0 \u0111\u1ed5i hi\u1ec7u \u1ee9ng chuy\u1ec3n slide sang fade.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"532\" height=\"507\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-4.png\" alt=\"slider bootstrap - itviec blog\" class=\"wp-image-90887\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-4.png 532w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-4-300x286.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-4-200x191.png 200w\" sizes=\"auto, (max-width: 532px) 100vw, 532px\" \/><\/figure>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>L\u1eddi gi\u1ea3i B\u00e0i t\u1eadp 3<\/summary>\n<p>Th\u00eam class <strong>carousel-fade<\/strong> \u0111\u1ec3 chuy\u1ec3n hi\u1ec7u \u1ee9ng slide th\u00e0nh m\u1edd d\u1ea7n. D\u00f9ng <strong>carousel-caption<\/strong> \u0111\u1ec3 hi\u1ec3n th\u1ecb ti\u00eau \u0111\u1ec1 v\u00e0 m\u00f4 t\u1ea3 n\u1eb1m \u0111\u00e8 tr\u00ean \u1ea3nh, n\u00ean th\u00eam class <strong>d-none d-md-block<\/strong> \u0111\u1ec3 \u1ea9n caption \u1edf thi\u1ebft b\u1ecb nh\u1ecf.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div id=\"carouselAdvanced\" class=\"carousel slide carousel-fade\" data-bs-ride=\"carousel\">\n\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"carousel-indicators\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;button type=\"button\" data-bs-target=\"#carouselAdvanced\" data-bs-slide-to=\"0\" class=\"active\" aria-label=\"Slide 1\">&lt;\/button>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;button type=\"button\" data-bs-target=\"#carouselAdvanced\" data-bs-slide-to=\"1\" aria-label=\"Slide 2\">&lt;\/button>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;button type=\"button\" data-bs-target=\"#carouselAdvanced\" data-bs-slide-to=\"2\" aria-label=\"Slide 3\">&lt;\/button>\n\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"carousel-inner\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"carousel-item active\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;img src=\"https:\/\/yt3.googleusercontent.com\/FbuUhhAlubdj_2xPymAvufoEQWFaIIoEa0gPlWUP05nh-WGN628FkXaMDpl6Y03g46n6ZUQXeQ=s900-c-k-c0x00ffffff-no-rj\" class=\"d-block w-100\" alt=\"Slide 1\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"carousel-caption d-none d-md-block\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;h5>Ti\u00eau \u0111\u1ec1 Slide 1&lt;\/h5>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;p>M\u00f4 t\u1ea3 ng\u1eafn g\u1ecdn cho slide \u0111\u1ea7u ti\u00ean.&lt;\/p>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"carousel-item\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;img src=\"https:\/\/yt3.googleusercontent.com\/FbuUhhAlubdj_2xPymAvufoEQWFaIIoEa0gPlWUP05nh-WGN628FkXaMDpl6Y03g46n6ZUQXeQ=s900-c-k-c0x00ffffff-no-rj\" class=\"d-block w-100\" alt=\"Slide 2\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"carousel-caption d-none d-md-block\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;h5>Ti\u00eau \u0111\u1ec1 Slide 2&lt;\/h5>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;p>Th\u00f4ng tin m\u00f4 t\u1ea3 cho slide th\u1ee9 hai.&lt;\/p>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"carousel-item\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;img src=\"https:\/\/yt3.googleusercontent.com\/FbuUhhAlubdj_2xPymAvufoEQWFaIIoEa0gPlWUP05nh-WGN628FkXaMDpl6Y03g46n6ZUQXeQ=s900-c-k-c0x00ffffff-no-rj\" class=\"d-block w-100\" alt=\"Slide 3\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"carousel-caption d-none d-md-block\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;h5>Ti\u00eau \u0111\u1ec1 Slide 3&lt;\/h5>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;p>Slide cu\u1ed1i c\u00f9ng v\u1edbi n\u1ed9i dung r\u00f5 r\u00e0ng.&lt;\/p>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0&lt;button class=\"carousel-control-prev\" type=\"button\" data-bs-target=\"#carouselAdvanced\" data-bs-slide=\"prev\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;span class=\"carousel-control-prev-icon\">&lt;\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/button>\n\u00a0\u00a0\u00a0\u00a0\u00a0&lt;button class=\"carousel-control-next\" type=\"button\" data-bs-target=\"#carouselAdvanced\" data-bs-slide=\"next\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;span class=\"carousel-control-next-icon\">&lt;\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/button>\n\u00a0\u00a0\u00a0&lt;\/div><\/code><\/pre>\n<\/details>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cac-cau-h\u1ecfi-th\u01b0\u1eddng-g\u1eb7p-v\u1ec1-carousel-bootstrap\"><span class=\"ez-toc-section\" id=\"Cac_cau_hoi_thuong_gap_ve_Carousel_Bootstrap\"><\/span><strong>C\u00e1c c\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 Carousel Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-carousel-co-h\u1ed7-tr\u1ee3-lazy-loading-\u1ea3nh-khong\"><strong>Carousel c\u00f3 h\u1ed7 tr\u1ee3 lazy-loading \u1ea3nh kh\u00f4ng?<\/strong><\/h3>\n\n\n\n<p>T\u1eeb Bootstrap 5 tr\u1edf \u0111i, b\u1ea1n c\u00f3 th\u1ec3 k\u1ebft h\u1ee3p thu\u1ed9c t\u00ednh loading=\u201clazy\u201d c\u1ee7a HTML cho th\u1ebb &lt;img&gt; \u0111\u1ec3 tr\u00ec ho\u00e3n vi\u1ec7c t\u1ea3i \u1ea3nh cho \u0111\u1ebfn khi ch\u00fang g\u1ea7n hi\u1ec3n th\u1ecb tr\u00ean m\u00e0n h\u00ecnh. \u0110i\u1ec1u n\u00e0y gi\u00fap c\u1ea3i thi\u1ec7n hi\u1ec7u su\u1ea5t t\u1ea3i trang, \u0111\u1eb7c bi\u1ec7t n\u1ebfu carousel ch\u1ee9a nhi\u1ec1u \u1ea3nh n\u1eb7ng.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div id=\"carouselExample\" class=\"carousel slide\" data-bs-ride=\"carousel\">\n\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"carousel-inner\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"carousel-item active\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;img src=\"slide1.jpg\" class=\"d-block w-100\" alt=\"...\" loading=\"lazy\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"carousel-item\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;img src=\"slide2.jpg\" class=\"d-block w-100\" alt=\"...\" loading=\"lazy\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0&lt;\/div><\/code><\/pre>\n\n\n\n<p>L\u01b0u \u00fd: Tr\u00ecnh duy\u1ec7t s\u1ebd ch\u1ec9 \u00e1p d\u1ee5ng lazy-load \u1ea3nh kh\u00f4ng n\u1eb1m trong khung hi\u1ec3n th\u1ecb ban \u0111\u1ea7u (viewport), v\u00ec v\u1eady slide 1 s\u1ebd lu\u00f4n t\u1ea3i ngay (d\u00f9 c\u00f3 loading=\u201clazy\u201d hay kh\u00f4ng), slide 2 tr\u1edf \u0111i n\u1ebfu ch\u01b0a \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb, v\u00e0 c\u00f3 loading=\u201clazy\u201d, th\u00ec s\u1ebd \u0111\u01b0\u1ee3c tr\u00ec ho\u00e3n cho \u0111\u1ebfn khi g\u1ea7n \u0111\u01b0\u1ee3c xem.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-lam-sao-d\u1ec3-carousel-t\u1ef1-d\u1eebng-sau-m\u1ed9t-s\u1ed1-vong-l\u1eb7p\"><strong>L\u00e0m sao \u0111\u1ec3 Carousel t\u1ef1 d\u1eebng sau m\u1ed9t s\u1ed1 v\u00f2ng l\u1eb7p?<\/strong><\/h3>\n\n\n\n<p>Bootstrap m\u1eb7c \u0111\u1ecbnh kh\u00f4ng h\u1ed7 tr\u1ee3 tr\u1ef1c ti\u1ebfp gi\u1edbi h\u1ea1n s\u1ed1 v\u00f2ng l\u1eb7p, tuy nhi\u00ean, b\u1ea1n c\u00f3 th\u1ec3 t\u1ef1 th\u00eam JavaScript \u0111\u1ec3 theo d\u00f5i s\u1ed1 l\u1ea7n chuy\u1ec3n slide, sau \u0111\u00f3 d\u00f9ng <strong>.pause()<\/strong> \u0111\u1ec3 d\u1eebng carousel.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\n\u00a0const carousel = document.querySelector('#myCarousel');\n\u00a0const carouselInstance = bootstrap.Carousel.getOrCreateInstance(carousel);\n\u00a0let count = 0;\n\u00a0const maxCycles = 2;\n\u00a0let totalSlides = carousel.querySelectorAll('.carousel-item').length;\n\u00a0carousel.addEventListener('slid.bs.carousel', function () {\n\u00a0\u00a0\u00a0count++;\n\u00a0\u00a0\u00a0if (count >= maxCycles * totalSlides) {\n\u00a0\u00a0\u00a0\u00a0\u00a0carouselInstance.pause();\n\u00a0\u00a0\u00a0}\n\u00a0});\n&lt;\/script><\/code><\/pre>\n\n\n\n<p>Trong \u0111\u00f3, g\u00e1n bi\u1ebfn <strong>maxCycles<\/strong> \u0111\u1ec3 \u0111i\u1ec1u ch\u1ec9nh s\u1ed1 v\u00f2ng ch\u1ea1y t\u1ed1i \u0111a c\u1ee7a carousel.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-co-th\u1ec3-them-nut-play-pause-di\u1ec1u-khi\u1ec3n-carousel-khong\"><strong>C\u00f3 th\u1ec3 th\u00eam n\u00fat \u201cPlay\/Pause\u201d \u0111i\u1ec1u khi\u1ec3n Carousel kh\u00f4ng?<\/strong><\/h3>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 th\u00eam m\u1ed9t n\u00fat (button) \u0111\u1ec3 \u0111\u00f3ng vai tr\u00f2 l\u00e0 \u201cplay\/pause\u201d. Sau \u0111\u00f3 t\u00f9y ch\u1ec9nh cho ph\u00e9p ng\u01b0\u1eddi d\u00f9ng b\u1eadt\/t\u1eaft t\u1ef1 \u0111\u1ed9ng chuy\u1ec3n slide b\u1eb1ng c\u00e1ch d\u00f9ng <strong>.pause()<\/strong> v\u00e0 <strong>.cycle()<\/strong> c\u1ee7a Bootstrap Carousel. V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;button id=\"toggleCarousel\" class=\"btn btn-secondary\">T\u1ea1m d\u1eebng&lt;\/button>\n&lt;script>\n\u00a0const carouselEl = document.querySelector('#myCarousel');\n\u00a0const instance = bootstrap.Carousel.getOrCreateInstance(carouselEl);\n\u00a0const toggleBtn = document.getElementById('toggleCarousel');\n\u00a0let isPlaying = true;\n\u00a0toggleBtn.addEventListener('click', () => {\n\u00a0\u00a0\u00a0if (isPlaying) {\n\u00a0\u00a0\u00a0\u00a0\u00a0instance.pause();\n\u00a0\u00a0\u00a0\u00a0\u00a0toggleBtn.textContent = 'Ti\u1ebfp t\u1ee5c';\n\u00a0\u00a0\u00a0} else {\n\u00a0\u00a0\u00a0\u00a0\u00a0instance.cycle();\n\u00a0\u00a0\u00a0\u00a0\u00a0toggleBtn.textContent = 'T\u1ea1m d\u1eebng';\n\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0isPlaying = !isPlaying;\n\u00a0});\n&lt;\/script><\/code><\/pre>\n\n\n\n<p>Trong \u0111\u00f3, <strong>#myCarousel<\/strong> l\u00e0 id c\u1ee7a carousel c\u1ea7n t\u01b0\u01a1ng t\u00e1c.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-t\u1ed5ng-k\u1ebft\"><span class=\"ez-toc-section\" id=\"Tong_Ket\"><\/span><strong>T\u1ed5ng K\u1ebft<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Carousel trong Bootstrap l\u00e0 m\u1ed9t th\u00e0nh ph\u1ea7n tr\u1ef1c quan v\u00e0 linh ho\u1ea1t, gi\u00fap tr\u00ecnh b\u00e0y n\u1ed9i dung theo d\u1ea1ng tr\u00ecnh chi\u1ebfu sinh \u0111\u1ed9ng, thu h\u00fat ng\u01b0\u1eddi d\u00f9ng v\u00e0 t\u1ed1i \u01b0u kh\u00f4ng gian hi\u1ec3n th\u1ecb. V\u1edbi c\u00fa ph\u00e1p HTML \u0111\u01a1n gi\u1ea3n, \u0111i k\u00e8m c\u00e1c t\u00ednh n\u0103ng t\u00f9y ch\u1ec9nh nh\u01b0 hi\u1ec7u \u1ee9ng chuy\u1ec3n slide, th\u1eddi gian hi\u1ec3n th\u1ecb, caption, controls v\u00e0 indicators, carousel ho\u00e0n to\u00e0n c\u00f3 th\u1ec3 \u0111\u00e1p \u1ee9ng c\u00e1c y\u00eau c\u1ea7u \u0111a d\u1ea1ng trong giao di\u1ec7n hi\u1ec7n \u0111\u1ea1i.<\/p>\n\n\n\n<p>Qua b\u00e0i vi\u1ebft n\u00e0y, ITviec hy v\u1ecdng b\u1ea1n \u0111\u00e3 n\u1eafm r\u00f5 c\u00e1ch s\u1eed d\u1ee5ng, t\u00f9y bi\u1ebfn v\u00e0 x\u1eed l\u00fd c\u00e1c t\u00ecnh hu\u1ed1ng th\u1ef1c t\u1ebf v\u1edbi carousel trong Bootstrap, t\u1eeb \u0111\u00f3 \u00e1p d\u1ee5ng hi\u1ec7u qu\u1ea3 v\u00e0o c\u00e1c d\u1ef1 \u00e1n web c\u1ee7a m\u00ecnh.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Carousel, ho\u1eb7c Slider, l\u00e0 c\u00f4ng c\u1ee5 gi\u00fap tr\u00ecnh b\u00e0y nhi\u1ec1u n\u1ed9i dung theo d\u1ea1ng tr\u01b0\u1ee3t b\u1eaft m\u1eaft, th\u01b0\u1eddng d\u00f9ng \u0111\u1ec3 hi\u1ec3n th\u1ecb \u1ea3nh, banner ho\u1eb7c th\u00f4ng \u0111i\u1ec7p n\u1ed5i b\u1eadt. Th\u00e0nh ph\u1ea7n Carousel Bootstrap cung c\u1ea5p s\u1eb5n th\u00e0nh ph\u1ea7n v\u1edbi \u0111\u1ea7y \u0111\u1ee7 hi\u1ec7u \u1ee9ng, \u0111i\u1ec1u h\u01b0\u1edbng v\u00e0 t\u00f9y ch\u1ecdn m\u1edf r\u1ed9ng, gi\u00fap b\u1ea1n t\u00edch h\u1ee3p d\u1ec5 [&hellip;]<\/p>\n","protected":false},"author":235,"featured_media":90897,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_gspb_post_css":"","footnotes":""},"categories":[10352,109],"tags":[],"class_list":["post-90882","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bootstrap-chuyen-mon-it","category-chuyen-mon-it"],"blocksy_meta":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.8 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng Carousel Bootstrap chi ti\u1ebft k\u00e8m v\u00ed d\u1ee5 - ITviec Blog<\/title>\n<meta name=\"description\" content=\"T\u00ecm hi\u1ec3u c\u00e1ch s\u1eed d\u1ee5ng Carousel Bootstrap \u0111\u1ec3 t\u1ea1o carousel, \u0111\u1ea7y \u0111\u1ee7 t\u1eeb c\u1ea5u tr\u00fac HTML, hi\u1ec7u \u1ee9ng, \u0111i\u1ec1u khi\u1ec3n, t\u00f9y bi\u1ebfn v\u00e0 c\u00e1c b\u00e0i t\u1eadp.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-carousel-bootstrap\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng Carousel Bootstrap chi ti\u1ebft k\u00e8m v\u00ed d\u1ee5\" \/>\n<meta property=\"og:description\" content=\"Carousel, ho\u1eb7c Slider, l\u00e0 c\u00f4ng c\u1ee5 gi\u00fap tr\u00ecnh b\u00e0y nhi\u1ec1u n\u1ed9i dung theo d\u1ea1ng tr\u01b0\u1ee3t b\u1eaft m\u1eaft, th\u01b0\u1eddng d\u00f9ng \u0111\u1ec3 hi\u1ec3n th\u1ecb \u1ea3nh, banner ho\u1eb7c th\u00f4ng \u0111i\u1ec7p n\u1ed5i b\u1eadt.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-carousel-bootstrap\/\" \/>\n<meta property=\"og:site_name\" content=\"ITviec Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ITviec\" \/>\n<meta property=\"article:published_time\" content=\"2025-09-01T12:42:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-01T12:42:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/slider-bootstrap-scaled.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1347\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ph\u1ea1m H\u1eefu Ng\u1ecdc\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ITviec\" \/>\n<meta name=\"twitter:site\" content=\"@ITviec\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ph\u1ea1m H\u1eefu Ng\u1ecdc\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"17 ph\u00fat\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng Carousel Bootstrap chi ti\u1ebft k\u00e8m v\u00ed d\u1ee5 - ITviec Blog","description":"T\u00ecm hi\u1ec3u c\u00e1ch s\u1eed d\u1ee5ng Carousel Bootstrap \u0111\u1ec3 t\u1ea1o carousel, \u0111\u1ea7y \u0111\u1ee7 t\u1eeb c\u1ea5u tr\u00fac HTML, hi\u1ec7u \u1ee9ng, \u0111i\u1ec1u khi\u1ec3n, t\u00f9y bi\u1ebfn v\u00e0 c\u00e1c b\u00e0i t\u1eadp.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-carousel-bootstrap\/","og_locale":"vi_VN","og_type":"article","og_title":"H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng Carousel Bootstrap chi ti\u1ebft k\u00e8m v\u00ed d\u1ee5","og_description":"Carousel, ho\u1eb7c Slider, l\u00e0 c\u00f4ng c\u1ee5 gi\u00fap tr\u00ecnh b\u00e0y nhi\u1ec1u n\u1ed9i dung theo d\u1ea1ng tr\u01b0\u1ee3t b\u1eaft m\u1eaft, th\u01b0\u1eddng d\u00f9ng \u0111\u1ec3 hi\u1ec3n th\u1ecb \u1ea3nh, banner ho\u1eb7c th\u00f4ng \u0111i\u1ec7p n\u1ed5i b\u1eadt.","og_url":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-carousel-bootstrap\/","og_site_name":"ITviec Blog","article_publisher":"https:\/\/www.facebook.com\/ITviec","article_published_time":"2025-09-01T12:42:06+00:00","article_modified_time":"2025-09-01T12:42:09+00:00","og_image":[{"width":2560,"height":1347,"url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/slider-bootstrap-scaled.png","type":"image\/png"}],"author":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","twitter_card":"summary_large_image","twitter_creator":"@ITviec","twitter_site":"@ITviec","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"17 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-carousel-bootstrap\/#article","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-carousel-bootstrap\/"},"author":{"name":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/407769a7625b7f955cef615f7a99abad"},"headline":"H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng Carousel Bootstrap chi ti\u1ebft k\u00e8m v\u00ed d\u1ee5","datePublished":"2025-09-01T12:42:06+00:00","dateModified":"2025-09-01T12:42:09+00:00","mainEntityOfPage":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-carousel-bootstrap\/"},"wordCount":3865,"publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"image":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-carousel-bootstrap\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/slider-bootstrap-scaled.png","articleSection":["Bootstrap","Chuy\u00ean m\u00f4n IT"],"inLanguage":"vi"},{"@type":"WebPage","@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-carousel-bootstrap\/","url":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-carousel-bootstrap\/","name":"H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng Carousel Bootstrap chi ti\u1ebft k\u00e8m v\u00ed d\u1ee5 - ITviec Blog","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-carousel-bootstrap\/#primaryimage"},"image":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-carousel-bootstrap\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/slider-bootstrap-scaled.png","datePublished":"2025-09-01T12:42:06+00:00","dateModified":"2025-09-01T12:42:09+00:00","description":"T\u00ecm hi\u1ec3u c\u00e1ch s\u1eed d\u1ee5ng Carousel Bootstrap \u0111\u1ec3 t\u1ea1o carousel, \u0111\u1ea7y \u0111\u1ee7 t\u1eeb c\u1ea5u tr\u00fac HTML, hi\u1ec7u \u1ee9ng, \u0111i\u1ec1u khi\u1ec3n, t\u00f9y bi\u1ebfn v\u00e0 c\u00e1c b\u00e0i t\u1eadp.","breadcrumb":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-carousel-bootstrap\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/itviec.com\/blog\/huong-dan-su-dung-carousel-bootstrap\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-carousel-bootstrap\/#primaryimage","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/slider-bootstrap-scaled.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/slider-bootstrap-scaled.png","width":800,"height":421,"caption":"carousel bootstrap - itviec blog"},{"@type":"BreadcrumbList","@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-carousel-bootstrap\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Chuy\u00ean m\u00f4n IT","item":"https:\/\/itviec.com\/blog\/chuyen-mon-it\/"},{"@type":"ListItem","position":2,"name":"H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng Carousel Bootstrap chi ti\u1ebft k\u00e8m v\u00ed d\u1ee5"}]},{"@type":"WebSite","@id":"https:\/\/itviec.com\/blog\/#website","url":"https:\/\/itviec.com\/blog\/","name":"ITviec Blog","description":"IT Jobs &amp; People in Vietnam","publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/itviec.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"vi"},{"@type":"Organization","@id":"https:\/\/itviec.com\/blog\/#organization","name":"ITviec","url":"https:\/\/itviec.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","width":1800,"height":1800,"caption":"ITviec"},"image":{"@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/ITviec","https:\/\/x.com\/ITviec","https:\/\/www.linkedin.com\/company\/itviec","https:\/\/www.youtube.com\/channel\/UCYthAQ3bcGr57M_ag5gHDvQ"]},{"@type":"Person","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/407769a7625b7f955cef615f7a99abad","name":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/Pham-Huu-Ngoc-technical-content-reviewer-e1712135841473-100x100.jpg","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/Pham-Huu-Ngoc-technical-content-reviewer-e1712135841473-100x100.jpg","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/Pham-Huu-Ngoc-technical-content-reviewer-e1712135841473-100x100.jpg","caption":"Ph\u1ea1m H\u1eefu Ng\u1ecdc"},"url":"https:\/\/itviec.com\/blog\/author\/pham-huu-ngoc-2\/"}]}},"_links":{"self":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/90882","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/users\/235"}],"replies":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/comments?post=90882"}],"version-history":[{"count":5,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/90882\/revisions"}],"predecessor-version":[{"id":90898,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/90882\/revisions\/90898"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media\/90897"}],"wp:attachment":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media?parent=90882"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/categories?post=90882"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/tags?post=90882"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}