Full-Size Image Slider (No Footer)<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;\n background: #111;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 100vh;\n padding: 2rem 1rem;\n }\n\n .slider-container {\n max-width: 1200px;\n width: 100%;\n position: relative;\n background: #000;\n border-radius: 24px;\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);\n overflow: hidden;\n }\n\n \/* Main slider area *\/\n .slider {\n position: relative;\n width: 100%;\n background: #1a1a1a;\n }\n\n .slides {\n display: flex;\n transition: transform 0.5s ease-in-out;\n }\n\n .slide {\n min-width: 100%;\n display: flex;\n flex-direction: column;\n }\n\n .slide img {\n width: 100%;\n height: auto;\n max-height: 90vh; \/* slightly taller now that footer is gone *\/\n object-fit: contain;\n background: #1a1a1a;\n display: block;\n }\n\n \/* Navigation buttons *\/\n .nav-btn {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n background: rgba(0, 0, 0, 0.6);\n color: white;\n border: none;\n width: 56px;\n height: 56px;\n border-radius: 50%;\n font-size: 2rem;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n z-index: 20;\n backdrop-filter: blur(4px);\n border: 1px solid rgba(255, 255, 255, 0.2);\n transition: all 0.2s ease;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);\n }\n\n .nav-btn:hover {\n background: rgba(0, 0, 0, 0.9);\n border-color: rgba(255, 255, 255, 0.4);\n transform: translateY(-50%) scale(1.05);\n }\n\n .nav-btn:active {\n transform: translateY(-50%) scale(0.95);\n }\n\n .prev {\n left: 20px;\n }\n\n .next {\n right: 20px;\n }\n\n \/* Dots\/indicators *\/\n .dots-container {\n display: flex;\n justify-content: center;\n gap: 12px;\n padding: 1.2rem 1rem;\n background: #0a0a0a;\n }\n\n .dot {\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: #444;\n cursor: pointer;\n transition: all 0.2s ease;\n border: none;\n }\n\n .dot.active {\n background: #00bcd4;\n transform: scale(1.3);\n box-shadow: 0 0 10px #00bcd4;\n }\n\n \/* slide index (tiny badge) *\/\n .slide-index {\n position: absolute;\n bottom: 20px;\n right: 20px;\n background: rgba(0, 0, 0, 0.7);\n color: white;\n padding: 0.4rem 1rem;\n border-radius: 40px;\n font-size: 0.9rem;\n z-index: 15;\n backdrop-filter: blur(4px);\n border: 1px solid #333;\n }\n\n \/* responsive *\/\n @media (max-width: 640px) {\n .nav-btn { width: 44px; height: 44px; font-size: 1.5rem; }\n }\n <\/style>\n<\/head>\n<body>\n<div class=\"slider-container\">\n <div class=\"slider\">\n <div class=\"slides\" id=\"slides\">\n \n <div class=\"slide\">\n <img decoding=\"async\" src=\"https:\/\/fbs.vau.ac.lk\/pm\/wp-content\/uploads\/2026\/03\/1.png\" alt=\"R.I Ranasinghe\" loading=\"lazy\">\n <\/div>\n \n <div class=\"slide\">\n <img decoding=\"async\" src=\"https:\/\/fbs.vau.ac.lk\/pm\/wp-content\/uploads\/2026\/03\/2.png\" alt=\"M. Musmir\" loading=\"lazy\">\n <\/div>\n \n <div class=\"slide\">\n <img decoding=\"async\" src=\"https:\/\/fbs.vau.ac.lk\/pm\/wp-content\/uploads\/2026\/03\/3.png\" alt=\"L.S.C. Amarasinghe\" loading=\"lazy\">\n <\/div>\n \n <div class=\"slide\">\n <img decoding=\"async\" src=\"https:\/\/fbs.vau.ac.lk\/pm\/wp-content\/uploads\/2026\/03\/4.png\" alt=\"P. Jinoshanth\" loading=\"lazy\">\n <\/div>\n \n <div class=\"slide\">\n <img decoding=\"async\" src=\"https:\/\/fbs.vau.ac.lk\/pm\/wp-content\/uploads\/2026\/03\/5.png\" alt=\"R. C.I. Rajapaksha\" loading=\"lazy\">\n <\/div>\n \n <div class=\"slide\">\n <img decoding=\"async\" src=\"https:\/\/fbs.vau.ac.lk\/pm\/wp-content\/uploads\/2026\/03\/6.png\" alt=\"S.P. Shanika Lakmali\" loading=\"lazy\">\n <\/div>\n \n <div class=\"slide\">\n <img decoding=\"async\" src=\"https:\/\/fbs.vau.ac.lk\/pm\/wp-content\/uploads\/2026\/03\/7.png\" alt=\"N.S. Gunawardhana\" loading=\"lazy\">\n <\/div>\n \n <div class=\"slide\">\n <img decoding=\"async\" src=\"https:\/\/fbs.vau.ac.lk\/pm\/wp-content\/uploads\/2026\/03\/8.png\" alt=\"Group - University of Vavuniya & Halo Trust\" loading=\"lazy\">\n <\/div>\n <\/div>\n\n \n <button class=\"nav-btn prev\" id=\"prevBtn\" aria-label=\"Previous slide\">\u2039<\/button>\n <button class=\"nav-btn next\" id=\"nextBtn\" aria-label=\"Next slide\">\u203a<\/button>\n\n \n <div class=\"slide-index\" id=\"slideIndex\">1 \/ 8<\/div>\n <\/div>\n\n \n <div class=\"dots-container\" id=\"dotsContainer\"><\/div>\n<\/div>\n\n<script>\n (function() {\n const slides = document.getElementById('slides');\n const slidesArray = document.querySelectorAll('.slide');\n const prevBtn = document.getElementById('prevBtn');\n const nextBtn = document.getElementById('nextBtn');\n const slideIndexSpan = document.getElementById('slideIndex');\n const dotsContainer = document.getElementById('dotsContainer');\n \n let currentIndex = 0;\n const totalSlides = slidesArray.length;\n\n \/\/ Create dots\n function createDots() {\n dotsContainer.innerHTML = '';\n for (let i = 0; i < totalSlides; i++) {\n const dot = document.createElement('button');\n dot.classList.add('dot');\n dot.dataset.index = i;\n dot.setAttribute('aria-label', `Go to slide ${i+1}`);\n dot.addEventListener('click', function() {\n goToSlide(parseInt(this.dataset.index));\n });\n dotsContainer.appendChild(dot);\n }\n }\n\n \/\/ Update active states\n function updateUI() {\n \/\/ Update slide transform\n slides.style.transform = `translateX(-${currentIndex * 100}%)`;\n \n \/\/ Update active dot\n document.querySelectorAll('.dot').forEach((dot, idx) => {\n if (idx === currentIndex) {\n dot.classList.add('active');\n } else {\n dot.classList.remove('active');\n }\n });\n \n \/\/ Update counter\n slideIndexSpan.textContent = `${currentIndex + 1} \/ ${totalSlides}`;\n }\n\n \/\/ Go to specific slide\n function goToSlide(index) {\n if (index < 0) {\n currentIndex = totalSlides - 1;\n } else if (index >= totalSlides) {\n currentIndex = 0;\n } else {\n currentIndex = index;\n }\n updateUI();\n }\n\n \/\/ Next slide\n function nextSlide() {\n goToSlide(currentIndex + 1);\n }\n\n \/\/ Previous slide\n function prevSlide() {\n goToSlide(currentIndex - 1);\n }\n\n \/\/ Initialize dots\n createDots();\n updateUI();\n\n \/\/ Event listeners\n prevBtn.addEventListener('click', prevSlide);\n nextBtn.addEventListener('click', nextSlide);\n\n \/\/ Keyboard navigation\n document.addEventListener('keydown', (e) => {\n if (e.key === 'ArrowLeft') {\n e.preventDefault();\n prevSlide();\n } else if (e.key === 'ArrowRight') {\n e.preventDefault();\n nextSlide();\n }\n });\n\n \/\/ Basic swipe support\n let touchStartX = 0;\n slides.addEventListener('touchstart', (e) => {\n touchStartX = e.changedTouches[0].screenX;\n }, { passive: true });\n\n slides.addEventListener('touchend', (e) => {\n let touchEndX = e.changedTouches[0].screenX;\n if (touchEndX < touchStartX - 50) {\n nextSlide();\n } else if (touchEndX > touchStartX + 50) {\n prevSlide();\n }\n }, { passive: true });\n\n })();\n<\/script>\n\n\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Full-Size Image Slider (No Footer) \u2039 \u203a 1 \/ 8<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1931","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/fbs.vau.ac.lk\/pm\/wp-json\/wp\/v2\/pages\/1931","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fbs.vau.ac.lk\/pm\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fbs.vau.ac.lk\/pm\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fbs.vau.ac.lk\/pm\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/fbs.vau.ac.lk\/pm\/wp-json\/wp\/v2\/comments?post=1931"}],"version-history":[{"count":1,"href":"https:\/\/fbs.vau.ac.lk\/pm\/wp-json\/wp\/v2\/pages\/1931\/revisions"}],"predecessor-version":[{"id":1932,"href":"https:\/\/fbs.vau.ac.lk\/pm\/wp-json\/wp\/v2\/pages\/1931\/revisions\/1932"}],"wp:attachment":[{"href":"https:\/\/fbs.vau.ac.lk\/pm\/wp-json\/wp\/v2\/media?parent=1931"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1931,"date":"2026-03-17T05:04:54","date_gmt":"2026-03-17T05:04:54","guid":{"rendered":"https:\/\/fbs.vau.ac.lk\/pm\/?page_id=1931"},"modified":"2026-03-17T05:04:55","modified_gmt":"2026-03-17T05:04:55","slug":"alumni-details","status":"publish","type":"page","link":"https:\/\/fbs.vau.ac.lk\/pm\/alumni-details\/","title":{"rendered":"Alumni Details"},"content":{"rendered":"\n\n\n\n \n \n Full-Size Image Slider (No Footer)<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;\n background: #111;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 100vh;\n padding: 2rem 1rem;\n }\n\n .slider-container {\n max-width: 1200px;\n width: 100%;\n position: relative;\n background: #000;\n border-radius: 24px;\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);\n overflow: hidden;\n }\n\n \/* Main slider area *\/\n .slider {\n position: relative;\n width: 100%;\n background: #1a1a1a;\n }\n\n .slides {\n display: flex;\n transition: transform 0.5s ease-in-out;\n }\n\n .slide {\n min-width: 100%;\n display: flex;\n flex-direction: column;\n }\n\n .slide img {\n width: 100%;\n height: auto;\n max-height: 90vh; \/* slightly taller now that footer is gone *\/\n object-fit: contain;\n background: #1a1a1a;\n display: block;\n }\n\n \/* Navigation buttons *\/\n .nav-btn {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n background: rgba(0, 0, 0, 0.6);\n color: white;\n border: none;\n width: 56px;\n height: 56px;\n border-radius: 50%;\n font-size: 2rem;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n z-index: 20;\n backdrop-filter: blur(4px);\n border: 1px solid rgba(255, 255, 255, 0.2);\n transition: all 0.2s ease;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);\n }\n\n .nav-btn:hover {\n background: rgba(0, 0, 0, 0.9);\n border-color: rgba(255, 255, 255, 0.4);\n transform: translateY(-50%) scale(1.05);\n }\n\n .nav-btn:active {\n transform: translateY(-50%) scale(0.95);\n }\n\n .prev {\n left: 20px;\n }\n\n .next {\n right: 20px;\n }\n\n \/* Dots\/indicators *\/\n .dots-container {\n display: flex;\n justify-content: center;\n gap: 12px;\n padding: 1.2rem 1rem;\n background: #0a0a0a;\n }\n\n .dot {\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: #444;\n cursor: pointer;\n transition: all 0.2s ease;\n border: none;\n }\n\n .dot.active {\n background: #00bcd4;\n transform: scale(1.3);\n box-shadow: 0 0 10px #00bcd4;\n }\n\n \/* slide index (tiny badge) *\/\n .slide-index {\n position: absolute;\n bottom: 20px;\n right: 20px;\n background: rgba(0, 0, 0, 0.7);\n color: white;\n padding: 0.4rem 1rem;\n border-radius: 40px;\n font-size: 0.9rem;\n z-index: 15;\n backdrop-filter: blur(4px);\n border: 1px solid #333;\n }\n\n \/* responsive *\/\n @media (max-width: 640px) {\n .nav-btn { width: 44px; height: 44px; font-size: 1.5rem; }\n }\n <\/style>\n<\/head>\n<body>\n<div class=\"slider-container\">\n <div class=\"slider\">\n <div class=\"slides\" id=\"slides\">\n \n <div class=\"slide\">\n <img decoding=\"async\" src=\"https:\/\/fbs.vau.ac.lk\/pm\/wp-content\/uploads\/2026\/03\/1.png\" alt=\"R.I Ranasinghe\" loading=\"lazy\">\n <\/div>\n \n <div class=\"slide\">\n <img decoding=\"async\" src=\"https:\/\/fbs.vau.ac.lk\/pm\/wp-content\/uploads\/2026\/03\/2.png\" alt=\"M. Musmir\" loading=\"lazy\">\n <\/div>\n \n <div class=\"slide\">\n <img decoding=\"async\" src=\"https:\/\/fbs.vau.ac.lk\/pm\/wp-content\/uploads\/2026\/03\/3.png\" alt=\"L.S.C. Amarasinghe\" loading=\"lazy\">\n <\/div>\n \n <div class=\"slide\">\n <img decoding=\"async\" src=\"https:\/\/fbs.vau.ac.lk\/pm\/wp-content\/uploads\/2026\/03\/4.png\" alt=\"P. Jinoshanth\" loading=\"lazy\">\n <\/div>\n \n <div class=\"slide\">\n <img decoding=\"async\" src=\"https:\/\/fbs.vau.ac.lk\/pm\/wp-content\/uploads\/2026\/03\/5.png\" alt=\"R. C.I. Rajapaksha\" loading=\"lazy\">\n <\/div>\n \n <div class=\"slide\">\n <img decoding=\"async\" src=\"https:\/\/fbs.vau.ac.lk\/pm\/wp-content\/uploads\/2026\/03\/6.png\" alt=\"S.P. Shanika Lakmali\" loading=\"lazy\">\n <\/div>\n \n <div class=\"slide\">\n <img decoding=\"async\" src=\"https:\/\/fbs.vau.ac.lk\/pm\/wp-content\/uploads\/2026\/03\/7.png\" alt=\"N.S. Gunawardhana\" loading=\"lazy\">\n <\/div>\n \n <div class=\"slide\">\n <img decoding=\"async\" src=\"https:\/\/fbs.vau.ac.lk\/pm\/wp-content\/uploads\/2026\/03\/8.png\" alt=\"Group - University of Vavuniya & Halo Trust\" loading=\"lazy\">\n <\/div>\n <\/div>\n\n \n <button class=\"nav-btn prev\" id=\"prevBtn\" aria-label=\"Previous slide\">\u2039<\/button>\n <button class=\"nav-btn next\" id=\"nextBtn\" aria-label=\"Next slide\">\u203a<\/button>\n\n \n <div class=\"slide-index\" id=\"slideIndex\">1 \/ 8<\/div>\n <\/div>\n\n \n <div class=\"dots-container\" id=\"dotsContainer\"><\/div>\n<\/div>\n\n<script>\n (function() {\n const slides = document.getElementById('slides');\n const slidesArray = document.querySelectorAll('.slide');\n const prevBtn = document.getElementById('prevBtn');\n const nextBtn = document.getElementById('nextBtn');\n const slideIndexSpan = document.getElementById('slideIndex');\n const dotsContainer = document.getElementById('dotsContainer');\n \n let currentIndex = 0;\n const totalSlides = slidesArray.length;\n\n \/\/ Create dots\n function createDots() {\n dotsContainer.innerHTML = '';\n for (let i = 0; i < totalSlides; i++) {\n const dot = document.createElement('button');\n dot.classList.add('dot');\n dot.dataset.index = i;\n dot.setAttribute('aria-label', `Go to slide ${i+1}`);\n dot.addEventListener('click', function() {\n goToSlide(parseInt(this.dataset.index));\n });\n dotsContainer.appendChild(dot);\n }\n }\n\n \/\/ Update active states\n function updateUI() {\n \/\/ Update slide transform\n slides.style.transform = `translateX(-${currentIndex * 100}%)`;\n \n \/\/ Update active dot\n document.querySelectorAll('.dot').forEach((dot, idx) => {\n if (idx === currentIndex) {\n dot.classList.add('active');\n } else {\n dot.classList.remove('active');\n }\n });\n \n \/\/ Update counter\n slideIndexSpan.textContent = `${currentIndex + 1} \/ ${totalSlides}`;\n }\n\n \/\/ Go to specific slide\n function goToSlide(index) {\n if (index < 0) {\n currentIndex = totalSlides - 1;\n } else if (index >= totalSlides) {\n currentIndex = 0;\n } else {\n currentIndex = index;\n }\n updateUI();\n }\n\n \/\/ Next slide\n function nextSlide() {\n goToSlide(currentIndex + 1);\n }\n\n \/\/ Previous slide\n function prevSlide() {\n goToSlide(currentIndex - 1);\n }\n\n \/\/ Initialize dots\n createDots();\n updateUI();\n\n \/\/ Event listeners\n prevBtn.addEventListener('click', prevSlide);\n nextBtn.addEventListener('click', nextSlide);\n\n \/\/ Keyboard navigation\n document.addEventListener('keydown', (e) => {\n if (e.key === 'ArrowLeft') {\n e.preventDefault();\n prevSlide();\n } else if (e.key === 'ArrowRight') {\n e.preventDefault();\n nextSlide();\n }\n });\n\n \/\/ Basic swipe support\n let touchStartX = 0;\n slides.addEventListener('touchstart', (e) => {\n touchStartX = e.changedTouches[0].screenX;\n }, { passive: true });\n\n slides.addEventListener('touchend', (e) => {\n let touchEndX = e.changedTouches[0].screenX;\n if (touchEndX < touchStartX - 50) {\n nextSlide();\n } else if (touchEndX > touchStartX + 50) {\n prevSlide();\n }\n }, { passive: true });\n\n })();\n<\/script>\n\n\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Full-Size Image Slider (No Footer) \u2039 \u203a 1 \/ 8<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1931","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/fbs.vau.ac.lk\/pm\/wp-json\/wp\/v2\/pages\/1931","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fbs.vau.ac.lk\/pm\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fbs.vau.ac.lk\/pm\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fbs.vau.ac.lk\/pm\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/fbs.vau.ac.lk\/pm\/wp-json\/wp\/v2\/comments?post=1931"}],"version-history":[{"count":1,"href":"https:\/\/fbs.vau.ac.lk\/pm\/wp-json\/wp\/v2\/pages\/1931\/revisions"}],"predecessor-version":[{"id":1932,"href":"https:\/\/fbs.vau.ac.lk\/pm\/wp-json\/wp\/v2\/pages\/1931\/revisions\/1932"}],"wp:attachment":[{"href":"https:\/\/fbs.vau.ac.lk\/pm\/wp-json\/wp\/v2\/media?parent=1931"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}