Transform Lives<\/strong><\/mark> with Love by Supporting Bandos Komar\u2019s<\/mark><\/strong> Dedicated Efforts in Child Welfare, Equitable Education, and Sustainable Community Development Across Cambodia for Over Three Decades!<\/p>\n\n\n\n
\n\n\n\n \n \n Full Screen Width Auto-Sliding Carousel with Arrows & Dots<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600&display=swap\" rel=\"stylesheet\">\n <style>\n\n .carousel-container {\n overflow: hidden;\n padding: 20px;\n position: relative;\n box-sizing: border-box;\n background: white;\n border-radius: 0;\n box-shadow: none;\n }\n @media (min-width: 640px) {\n .carousel-container {\n padding-left: 40px;\n padding-right: 40px;\n }\n }\n .carousel {\n display: flex;\n gap: 20px;\n overflow-x: auto;\n scroll-behavior: smooth;\n padding-bottom: 10px;\n scroll-snap-type: x mandatory;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: none; \/* Firefox *\/\n }\n .carousel::-webkit-scrollbar {\n display: none;\n }\n .card {\n background: white;\n min-width: 320px;\n max-width: 320px;\n border-radius: 20px;\n box-shadow: rgba(50, 50, 93, 0.15) 0px 4px 12px;\n padding: 20px;\n flex-shrink: 0;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n margin: 5px;\n scroll-snap-align: start;\n transition: transform 0.3s ease;\n }\n .card:hover {\n transform: translateY(-6px);\n box-shadow: rgba(50, 50, 93, 0.25) 0px 8px 18px;\n }\n .image-box {\n width: 100%;\n height: 180px;\n background-size: cover;\n background-position: center;\n border-radius: 12px;\n margin-bottom: 15px;\n filter: drop-shadow(0 2px 5px rgba(0,0,0,0.1));\n transition: filter 0.3s ease;\n }\n .card:hover .image-box {\n filter: drop-shadow(0 6px 10px rgba(0,0,0,0.15));\n }\n .card-title {\n font-size: 20px;\n font-weight: 700;\n margin-bottom: 12px;\n color: #222;\n text-align: center;\n }\n .card-description {\n font-size: 15px;\n color: #555;\n line-height: 1.4;\n flex-grow: 1;\n margin-bottom: 10px;\n }\n\n \/* Navigation buttons *\/\n .nav-btn {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n background-color: rgba(0,0,0,0.65);\n color: white;\n border: none;\n padding: 14px 18px;\n cursor: pointer;\n border-radius: 50%;\n z-index: 10;\n font-size: 24px;\n transition: background-color 0.25s ease;\n user-select: none;\n box-shadow: 0 4px 10px rgba(0,0,0,0.3);\n }\n .nav-btn:hover,\n .nav-btn:focus {\n background-color: rgba(0,0,0,0.85);\n outline: none;\n box-shadow: 0 6px 15px rgba(0,0,0,0.5);\n }\n .prev-btn {\n left: 20px;\n }\n .next-btn {\n right: 20px;\n }\n\n \/* Dots navigation *\/\n .dots {\n text-align: center;\n margin-top: 20px;\n user-select: none;\n }\n .dot {\n height: 12px;\n width: 12px;\n margin: 0 7px;\n background-color: #bbb;\n border-radius: 50%;\n display: inline-block;\n cursor: pointer;\n transition: background-color 0.3s ease;\n }\n .dot.active {\n background-color: #444;\n }\n\n \/* Improved mobile responsiveness *\/\n \/* Mobile phones (up to 480px) *\/\n @media (max-width: 480px) {\n .carousel-container {\n padding: 15px 10px 40px;\n }\n .carousel {\n gap: 15px;\n padding-bottom: 15px;\n }\n .card {\n min-width: calc(100vw - 60px);\n max-width: calc(100vw - 60px);\n padding: 15px;\n margin: 2px;\n }\n .image-box {\n height: 160px;\n margin-bottom: 12px;\n }\n .card-title {\n font-size: 18px;\n margin-bottom: 10px;\n text-align: center;\n }\n .card-description {\n font-size: 14px;\n line-height: 1.5;\n }\n .nav-btn {\n padding: 8px 12px;\n font-size: 18px;\n }\n .prev-btn {\n left: 5px;\n }\n .next-btn {\n right: 5px;\n }\n .dot {\n height: 10px;\n width: 10px;\n margin: 0 5px;\n }\n }\n\n \/* Small mobile phones (up to 360px) *\/\n @media (max-width: 360px) {\n .carousel-container {\n padding: 10px 5px 35px;\n }\n .card {\n min-width: calc(100vw - 40px);\n max-width: calc(100vw - 40px);\n padding: 12px;\n }\n .image-box {\n height: 140px;\n }\n .card-title {\n font-size: 16px;\n }\n .card-description {\n font-size: 13px;\n }\n .nav-btn {\n padding: 6px 10px;\n font-size: 16px;\n }\n .prev-btn {\n left: 2px;\n }\n .next-btn {\n right: 2px;\n }\n }\n\n \/* Tablets and larger phones (481px to 640px) *\/\n @media (min-width: 481px) and (max-width: 640px) {\n .card {\n min-width: 280px;\n max-width: 280px;\n }\n .nav-btn {\n padding: 12px 16px;\n font-size: 22px;\n }\n .carousel-container {\n padding: 20px 15px 45px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"carousel-container\" aria-label=\"Donation programs carousel\" role=\"region\">\n <button class=\"nav-btn prev-btn\" id=\"prev\" aria-label=\"Previous slide\">❮<\/button>\n <button class=\"nav-btn next-btn\" id=\"next\" aria-label=\"Next slide\">❯<\/button>\n\n <div class=\"carousel\" id=\"carousel\" tabindex=\"0\">\n <div class=\"card\" tabindex=\"0\">\n <div class=\"image-box\" style=\"background-image: url('https:\/\/www.bandoskomar.org\/wp-content\/uploads\/2025\/10\/7777.jpg');\" alt=\"Support Early Childhood Education\"><\/div>\n <div class=\"card-title\">Support Early Childhood Education<\/div>\n <div class=\"card-description\">Help Bandos Komar provide access to quality preschool programs in rural Cambodian communities.<\/div>\n <\/div>\n <div class=\"card\" tabindex=\"0\">\n <div class=\"image-box\" style=\"background-image: url('https:\/\/www.bandoskomar.org\/wp-content\/uploads\/2025\/10\/Library.jpg');\" alt=\"Improve Primary Education\"><\/div>\n <div class=\"card-title\">Improve Primary Education<\/div>\n <div class=\"card-description\">Support teacher training, school materials, and better learning environments for Cambodian children.<\/div>\n <\/div>\n <div class=\"card\" tabindex=\"0\">\n <div class=\"image-box\" style=\"background-image: url('https:\/\/www.bandoskomar.org\/wp-content\/uploads\/2025\/10\/file_590FB0EE-4D17-41EC-A313-341AB827C20B.png');\" alt=\"Promote Child Health & Nutrition\"><\/div>\n <div class=\"card-title\">Promote Child Health & Nutrition<\/div>\n <div class=\"card-description\">Contribute to programs that raise awareness on hygiene, nutrition, and healthcare access for students.<\/div>\n <\/div>\n <div class=\"card\" tabindex=\"0\">\n <div class=\"image-box\" style=\"background-image: url('https:\/\/www.bandoskomar.org\/wp-content\/uploads\/2025\/10\/photo_2025-07-25_09-08-15-1.png');\" alt=\"Empower Local Communities\"><\/div>\n <div class=\"card-title\">Empower Local Communities<\/div>\n <div class=\"card-description\">Bandos Komar works with families and local leaders to create sustainable child-friendly communities.<\/div>\n <\/div>\n <div class=\"card\" tabindex=\"0\">\n <div class=\"image-box\" style=\"background-image: url('https:\/\/www.bandoskomar.org\/wp-content\/uploads\/2025\/10\/file_11ABA6A4-2F6F-48DA-A0AE-FF7FB524DC17-1.png');\" alt=\"Make Donations\"><\/div>\n <div class=\"card-title\">Make Donations<\/div>\n <div class=\"card-description\">Help us fund vital programs for food, education, and healthcare.<\/div>\n <\/div>\n <div class=\"card\" tabindex=\"0\">\n <div class=\"image-box\" style=\"background-image: url('https:\/\/www.bandoskomar.org\/wp-content\/uploads\/2025\/10\/Bandos-Komar-org_2-1.jpg');\" alt=\"We Need Volunteers\"><\/div>\n <div class=\"card-title\">We Need Volunteers<\/div>\n <div class=\"card-description\">Contribute your time and skills to support our missions.<\/div>\n <\/div>\n <\/div>\n\n <div class=\"dots\" id=\"dots\" aria-label=\"Slide navigation\"><\/div>\n <\/div>\n\n <script>\n const carousel = document.getElementById('carousel');\n const prevBtn = document.getElementById('prev');\n const nextBtn = document.getElementById('next');\n const dotsContainer = document.getElementById('dots');\n\n const cards = carousel.querySelectorAll('.card');\n const cardCount = cards.length;\n let currentIndex = 0;\n\n \/\/ Calculate slideStep dynamically for responsiveness\n function getSlideStep() {\n return cards[0].offsetWidth + 20; \/\/ card width + gap\n }\n\n \/\/ Create dots based on number of cards\n for (let i = 0; i < cardCount; i++) {\n const dot = document.createElement('span');\n dot.classList.add('dot');\n if (i === 0) dot.classList.add('active');\n dot.setAttribute('data-index', i);\n dot.setAttribute('tabindex', 0);\n dot.setAttribute('role', 'button');\n dot.setAttribute('aria-label', `Go to slide ${i + 1}`);\n dotsContainer.appendChild(dot);\n\n dot.addEventListener('click', () => {\n currentIndex = i;\n scrollToIndex(currentIndex);\n resetAutoSlide();\n });\n dot.addEventListener('keydown', (e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n dot.click();\n }\n });\n }\n\n \/\/ Scroll carousel to specific card index\n function scrollToIndex(index) {\n const step = getSlideStep();\n const scrollPos = step * index;\n carousel.scrollTo({ left: scrollPos, behavior: 'smooth' });\n updateDots(index);\n }\n\n \/\/ Update dots active class\n function updateDots(activeIndex) {\n const dots = dotsContainer.querySelectorAll('.dot');\n dots.forEach(dot => dot.classList.remove('active'));\n if (dots[activeIndex]) dots[activeIndex].classList.add('active');\n }\n\n \/\/ Handle next slide\n function nextSlide() {\n currentIndex++;\n if (currentIndex >= cardCount) currentIndex = 0;\n scrollToIndex(currentIndex);\n }\n\n \/\/ Handle previous slide\n function prevSlide() {\n currentIndex--;\n if (currentIndex < 0) currentIndex = cardCount - 1;\n scrollToIndex(currentIndex);\n }\n\n prevBtn.addEventListener('click', () => {\n prevSlide();\n resetAutoSlide();\n });\n nextBtn.addEventListener('click', () => {\n nextSlide();\n resetAutoSlide();\n });\n\n \/\/ Keyboard navigation for carousel container\n carousel.addEventListener('keydown', (e) => {\n if (e.key === 'ArrowRight') {\n nextSlide();\n resetAutoSlide();\n } else if (e.key === 'ArrowLeft') {\n prevSlide();\n resetAutoSlide();\n }\n });\n\n \/\/ Auto-slide with pause on hover\/focus\n let autoSlideInterval;\n let isPaused = false;\n\n function startAutoSlide() {\n autoSlideInterval = setInterval(() => {\n if (!isPaused) nextSlide();\n }, 3000);\n }\n function stopAutoSlide() {\n clearInterval(autoSlideInterval);\n }\n function resetAutoSlide() {\n stopAutoSlide();\n startAutoSlide();\n }\n\n carousel.addEventListener('mouseenter', () => isPaused = true);\n carousel.addEventListener('mouseleave', () => isPaused = false);\n prevBtn.addEventListener('mouseenter', () => isPaused = true);\n prevBtn.addEventListener('mouseleave', () => isPaused = false);\n nextBtn.addEventListener('mouseenter', () => isPaused = true);\n nextBtn.addEventListener('mouseleave', () => isPaused = false);\n\n carousel.addEventListener('focusin', () => isPaused = true);\n carousel.addEventListener('focusout', () => isPaused = false);\n\n \/\/ Touch\/swipe support\n let startX = 0;\n let endX = 0;\n carousel.addEventListener('touchstart', (e) => {\n startX = e.touches[0].clientX;\n isPaused = true;\n });\n carousel.addEventListener('touchmove', (e) => {\n endX = e.touches[0].clientX;\n });\n carousel.addEventListener('touchend', () => {\n const threshold = 50; \/\/ min swipe distance\n if (startX - endX > threshold) {\n nextSlide();\n } else if (endX - startX > threshold) {\n prevSlide();\n }\n isPaused = false;\n });\n\n \/\/ Sync dots on manual scroll (optional)\n carousel.addEventListener('scroll', () => {\n \/\/ Calculate approximate index\n const step = getSlideStep();\n const scrolledIndex = Math.round(carousel.scrollLeft \/ step);\n if (scrolledIndex !== currentIndex && scrolledIndex >= 0 && scrolledIndex < cardCount) {\n currentIndex = scrolledIndex;\n updateDots(currentIndex);\n }\n });\n\n \/\/ Initialize auto-slide\n startAutoSlide();\n <\/script>\n<\/body>\n<\/html>\n<\/div><\/div>\n\n\n<div class='root-data-givewp-embed' data-form-locale='en_US' data-form-url='https:\/\/www.bandoskomar.org\/?post_type=give_forms&p=217' data-form-view-url='https:\/\/www.bandoskomar.org\/en\/?givewp-route=donation-form-view&form-id=217' data-src='https:\/\/www.bandoskomar.org\/en\/?givewp-route=donation-form-view&form-id=217' data-givewp-embed-id='give-form-shortcode-1' data-form-format='onpage' data-open-form-button='Donate now'><\/div>","protected":false},"excerpt":{"rendered":"<p>Contribute Today Transform Lives with Love by Supporting Bandos Komar\u2019s Dedicated Efforts in Child Welfare, Equitable Education, and Sustainable Community Development Across Cambodia for Over Three Decades! Full Screen Width Auto-Sliding Carousel with Arrows & Dots ❮ ❯ Support Early Childhood Education Help Bandos Komar provide access to quality preschool programs in rural Cambodian communities. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"give_campaign_id":0,"_uag_custom_page_level_css":"","ub_ctt_via":"","footnotes":""},"class_list":["post-219","page","type-page","status-publish","hentry"],"featured_image_src":null,"campaignId":"","uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"rpg_gallery_admin_thumb":false,"rpg_gallery_thumb":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false},"uagb_author_info":{"display_name":"admin","author_link":"https:\/\/www.bandoskomar.org\/en\/?author=1"},"uagb_comment_info":0,"uagb_excerpt":"Contribute Today Transform Lives with Love by Supporting Bandos Komar\u2019s Dedicated Efforts in Child Welfare, Equitable Education, and Sustainable Community Development Across Cambodia for Over Three Decades! Full Screen Width Auto-Sliding Carousel with Arrows & Dots ❮ ❯ Support Early Childhood Education Help Bandos Komar provide access to quality preschool programs in rural Cambodian communities.…","_links":{"self":[{"href":"https:\/\/www.bandoskomar.org\/en\/index.php?rest_route=\/wp\/v2\/pages\/219","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bandoskomar.org\/en\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.bandoskomar.org\/en\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.bandoskomar.org\/en\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bandoskomar.org\/en\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=219"}],"version-history":[{"count":31,"href":"https:\/\/www.bandoskomar.org\/en\/index.php?rest_route=\/wp\/v2\/pages\/219\/revisions"}],"predecessor-version":[{"id":1463,"href":"https:\/\/www.bandoskomar.org\/en\/index.php?rest_route=\/wp\/v2\/pages\/219\/revisions\/1463"}],"wp:attachment":[{"href":"https:\/\/www.bandoskomar.org\/en\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=219"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}