Scrollable Image Viewer<\/title>\n <style>\n .slider-container {\n width: 100%;\n max-width: 800px;\n height: 500px;\n overflow: hidden;\n position: relative;\n border: 2px solid #ccc;\n margin: auto;\n }\n\n .slider {\n display: flex;\n transition: transform 0.5s ease-in-out;\n height: 100%;\n }\n\n .image-wrapper {\n flex-shrink: 0;\n height=100%;\n width=100%;\n overflow: auto; \/* enables scrollbars for large images *\/\n display: flex;\n align-items: start;\n justify-content: start;\n }\n\n .image-wrapper img {\n width: auto;\n height: auto;\n max-width: none;\n max-height: none;\n display: block;\n }\n\n .arrow {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n background-color: rgba(0,0,0,0.5);\n color: white;\n border: none;\n padding: 10px;\n cursor: pointer;\n font-size: 20px;\n z-index: 1;\n }\n\n .arrow.left {\n left: 10px;\n }\n\n .arrow.right {\n right: 10px;\n }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"slider-container\" id=\"sliderContainer\">\n <button class=\"arrow left\" onclick=\"prevSlide()\">◀<\/button>\n <div class=\"slider\" id=\"slider\">\n <div class=\"image-wrapper\"><img src=\"achievements\/2404251.jpg\" alt=\"Achievement 1\"><\/div>\n <div class=\"image-wrapper\"><img src=\"achievements\/2404252.jpg\" alt=\"Achievement 2\"><\/div>\n <div class=\"image-wrapper\"><img src=\"achievements\/2404253.jpg\" alt=\"Achievement 3\"><\/div>\n <div class=\"image-wrapper\"><img src=\"https:\/\/uiet.puchd.ac.in\/wp-content\/uploads\/2025\/05\/02052025.png\" alt=\"Achievement 4\"><\/div>\n <\/div>\n <button class=\"arrow right\" onclick=\"nextSlide()\">▶<\/button>\n<\/div>\n\n<script>\n const slider = document.getElementById('slider');\n const container = document.getElementById('sliderContainer');\n let index = 0;\n const wrappers = slider.querySelectorAll('.image-wrapper');\n const total = wrappers.length;\n let interval;\n\n function showSlide(i) {\n index = (i + total) % total;\n slider.style.transform = `translateX(-${index * 100}%)`;\n }\n\n function nextSlide() {\n showSlide(index + 1);\n }\n\n function prevSlide() {\n showSlide(index - 1);\n }\n\n function startAutoScroll() {\n interval = setInterval(nextSlide, 5000);\n }\n\n function stopAutoScroll() {\n clearInterval(interval);\n }\n\n container.addEventListener('mouseenter', stopAutoScroll);\n container.addEventListener('mouseleave', startAutoScroll);\n\n \/\/ Swipe support\n let startX = 0;\n let endX = 0;\n\n container.addEventListener('touchstart', e => {\n startX = e.touches[0].clientX;\n });\n\n container.addEventListener('touchend', e => {\n endX = e.changedTouches[0].clientX;\n handleSwipe();\n });\n\n function handleSwipe() {\n const threshold = 50;\n const diff = endX - startX;\n if (Math.abs(diff) > threshold) {\n if (diff > 0) {\n prevSlide();\n } else {\n nextSlide();\n }\n }\n }\n\n \/\/ Start auto-scroll on load\n startAutoScroll();\n<\/script>\n\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Scrollable Image Viewer ◀ ▶<\/p>\n","protected":false},"author":15,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/uiet.puchd.ac.in\/index.php?rest_route=\/wp\/v2\/pages\/13763"}],"collection":[{"href":"https:\/\/uiet.puchd.ac.in\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/uiet.puchd.ac.in\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/uiet.puchd.ac.in\/index.php?rest_route=\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/uiet.puchd.ac.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=13763"}],"version-history":[{"count":37,"href":"https:\/\/uiet.puchd.ac.in\/index.php?rest_route=\/wp\/v2\/pages\/13763\/revisions"}],"predecessor-version":[{"id":13842,"href":"https:\/\/uiet.puchd.ac.in\/index.php?rest_route=\/wp\/v2\/pages\/13763\/revisions\/13842"}],"wp:attachment":[{"href":"https:\/\/uiet.puchd.ac.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=13763"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":13763,"date":"2025-04-21T12:26:59","date_gmt":"2025-04-21T12:26:59","guid":{"rendered":"https:\/\/uiet.puchd.ac.in\/?page_id=13763"},"modified":"2025-05-02T10:35:14","modified_gmt":"2025-05-02T10:35:14","slug":"achievements-2","status":"publish","type":"page","link":"https:\/\/uiet.puchd.ac.in\/?page_id=13763","title":{"rendered":"Achievements"},"content":{"rendered":"\n\n\n\n \n Scrollable Image Viewer<\/title>\n <style>\n .slider-container {\n width: 100%;\n max-width: 800px;\n height: 500px;\n overflow: hidden;\n position: relative;\n border: 2px solid #ccc;\n margin: auto;\n }\n\n .slider {\n display: flex;\n transition: transform 0.5s ease-in-out;\n height: 100%;\n }\n\n .image-wrapper {\n flex-shrink: 0;\n height=100%;\n width=100%;\n overflow: auto; \/* enables scrollbars for large images *\/\n display: flex;\n align-items: start;\n justify-content: start;\n }\n\n .image-wrapper img {\n width: auto;\n height: auto;\n max-width: none;\n max-height: none;\n display: block;\n }\n\n .arrow {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n background-color: rgba(0,0,0,0.5);\n color: white;\n border: none;\n padding: 10px;\n cursor: pointer;\n font-size: 20px;\n z-index: 1;\n }\n\n .arrow.left {\n left: 10px;\n }\n\n .arrow.right {\n right: 10px;\n }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"slider-container\" id=\"sliderContainer\">\n <button class=\"arrow left\" onclick=\"prevSlide()\">◀<\/button>\n <div class=\"slider\" id=\"slider\">\n <div class=\"image-wrapper\"><img src=\"achievements\/2404251.jpg\" alt=\"Achievement 1\"><\/div>\n <div class=\"image-wrapper\"><img src=\"achievements\/2404252.jpg\" alt=\"Achievement 2\"><\/div>\n <div class=\"image-wrapper\"><img src=\"achievements\/2404253.jpg\" alt=\"Achievement 3\"><\/div>\n <div class=\"image-wrapper\"><img src=\"https:\/\/uiet.puchd.ac.in\/wp-content\/uploads\/2025\/05\/02052025.png\" alt=\"Achievement 4\"><\/div>\n <\/div>\n <button class=\"arrow right\" onclick=\"nextSlide()\">▶<\/button>\n<\/div>\n\n<script>\n const slider = document.getElementById('slider');\n const container = document.getElementById('sliderContainer');\n let index = 0;\n const wrappers = slider.querySelectorAll('.image-wrapper');\n const total = wrappers.length;\n let interval;\n\n function showSlide(i) {\n index = (i + total) % total;\n slider.style.transform = `translateX(-${index * 100}%)`;\n }\n\n function nextSlide() {\n showSlide(index + 1);\n }\n\n function prevSlide() {\n showSlide(index - 1);\n }\n\n function startAutoScroll() {\n interval = setInterval(nextSlide, 5000);\n }\n\n function stopAutoScroll() {\n clearInterval(interval);\n }\n\n container.addEventListener('mouseenter', stopAutoScroll);\n container.addEventListener('mouseleave', startAutoScroll);\n\n \/\/ Swipe support\n let startX = 0;\n let endX = 0;\n\n container.addEventListener('touchstart', e => {\n startX = e.touches[0].clientX;\n });\n\n container.addEventListener('touchend', e => {\n endX = e.changedTouches[0].clientX;\n handleSwipe();\n });\n\n function handleSwipe() {\n const threshold = 50;\n const diff = endX - startX;\n if (Math.abs(diff) > threshold) {\n if (diff > 0) {\n prevSlide();\n } else {\n nextSlide();\n }\n }\n }\n\n \/\/ Start auto-scroll on load\n startAutoScroll();\n<\/script>\n\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Scrollable Image Viewer ◀ ▶<\/p>\n","protected":false},"author":15,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/uiet.puchd.ac.in\/index.php?rest_route=\/wp\/v2\/pages\/13763"}],"collection":[{"href":"https:\/\/uiet.puchd.ac.in\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/uiet.puchd.ac.in\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/uiet.puchd.ac.in\/index.php?rest_route=\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/uiet.puchd.ac.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=13763"}],"version-history":[{"count":37,"href":"https:\/\/uiet.puchd.ac.in\/index.php?rest_route=\/wp\/v2\/pages\/13763\/revisions"}],"predecessor-version":[{"id":13842,"href":"https:\/\/uiet.puchd.ac.in\/index.php?rest_route=\/wp\/v2\/pages\/13763\/revisions\/13842"}],"wp:attachment":[{"href":"https:\/\/uiet.puchd.ac.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=13763"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}