Carousel \u0395\u03b9\u03ba\u03cc\u03bd\u03c9\u03bd<\/title>\r\n<title>\u039a\u03b9\u03bd\u03bf\u03cd\u03bc\u03b5\u03bd\u03b7 \u03a0\u03b1\u03c1\u03ac\u03b3\u03c1\u03b1\u03c6\u03bf\u03c2<\/title>\r\n<style>\r\n\r\n\r\n\r\n*{\r\n margin:0;\r\n padding:0;\r\n box-sizing:border-box;\r\n}\r\n\r\nbody{\r\n background:#111827;\r\n display:flex;\r\n margin-top:220px;\r\n justify-content:center;\r\n align-items:center;\r\n height:100vh;\r\n font-family:Arial, sans-serif;\r\n}\r\n\r\n.carousel{\r\n position:relative;\r\n width:700px;\r\n height:600px;\r\n overflow:hidden;\r\n border-radius:8px;\r\n box-shadow:0 10px 30px rgba(0,0,0,0.4);\r\n top:10px;\r\n margin-left:70px;\r\n}\r\n\r\n.slides{\r\n \r\n display:flex;\r\n width:100%;\r\n height:100%;\r\n transition:transform 0.6s ease;\r\n}\r\n\r\n.slide{\r\n \r\n width:100%;\r\n flex-shrink:0;\r\n}\r\n\r\n.slide img{\r\n \r\n \r\n position:relative;\r\n width:100%;\r\n height:100%;\r\n object-fit:cover;\r\n}\r\n\r\nbutton{\r\n position:absolute;\r\n top:50%;\r\n transform:translateY(-50%);\r\n background:rgba(0,0,0,0.5);\r\n color:white;\r\n border:none;\r\n padding:14px 18px;\r\n cursor:pointer;\r\n font-size:24px;\r\n border-radius:50%;\r\n transition:0.3s;\r\n}\r\n\r\nbutton:hover{\r\n background:rgba(0,0,0,0.8);\r\n}\r\n\r\n.prev{\r\n left:15px;\r\n}\r\n\r\n.next{\r\n right:15px;\r\n}\r\n\r\n.dots{\r\n position:absolute;\r\n bottom:20px;\r\n width:100%;\r\n display:flex;\r\n justify-content:center;\r\n gap:10px;\r\n}\r\n\r\n.dot{\r\n width:14px;\r\n height:14px;\r\n border-radius:50%;\r\n background:white;\r\n opacity:0.5;\r\n cursor:pointer;\r\n}\r\n\r\n.dot.active{\r\n opacity:1;\r\n background:#60a5fa;\r\n}\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<div class=\"carousel\">\r\n\r\n <div class=\"slides\" id=\"slides\">\r\n\r\n <div class=\"slide\">\r\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/1015\/1200\/700\" alt=\"\">\r\n <\/div>\r\n\r\n <div class=\"slide\">\r\n <img decoding=\"async\" src=\"https:\/\/encrypted-tbn0.gstatic.com\/images?q=tbn:ANd9GcSy2hyx9uxM-ze8HxToKKHWMpTL2m3N5m0OBriZfXpDSKCJ74E-VWbaAkgHMfv-gRyjE9ZVOn1rHfnRf0T7aMVF_plKz5O3xWl7cfflMKI&s=10\" alt=\"\">\r\n <\/div>\r\n\r\n <div class=\"slide\">\r\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/1018\/1200\/700\" alt=\"\">\r\n <\/div>\r\n\r\n <div class=\"slide\">\r\n <img decoding=\"async\" src=\"https:\/\/encrypted-tbn0.gstatic.com\/images?q=tbn:ANd9GcSacfZzoW2c-cn3396CFRu-FJ14WZoAOS-oyVG7mQHtpJUZ-BKTbTdPP-Gu6NQFA0Ae6RjMoXSqmhJtBDyoRMvoYG7pFlIAO86q0a6SBIsLmA&s=10\" alt=\"\">\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <button class=\"prev\" onclick=\"prevSlide()\">\u276e<\/button>\r\n <button class=\"next\" onclick=\"nextSlide()\">\u276f<\/button>\r\n\r\n <div class=\"dots\" id=\"dots\"><\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<script>\r\nconst slides = document.getElementById(\"slides\");\r\nconst totalSlides = document.querySelectorAll(\".slide\").length;\r\nconst dotsContainer = document.getElementById(\"dots\");\r\n\r\nlet index = 0;\r\n\r\n\/\/ \u03b4\u03b7\u03bc\u03b9\u03bf\u03c5\u03c1\u03b3\u03af\u03b1 dots\r\nfor(let i=0;i<totalSlides;i++){\r\n const dot = document.createElement(\"div\");\r\n dot.classList.add(\"dot\");\r\n\r\n if(i===0) dot.classList.add(\"active\");\r\n\r\n dot.addEventListener(\"click\", ()=>{\r\n index = i;\r\n updateCarousel();\r\n });\r\n\r\n dotsContainer.appendChild(dot);\r\n}\r\n\r\nfunction updateCarousel(){\r\n slides.style.transform = `translateX(-${index * 100}%)`;\r\n\r\n document.querySelectorAll(\".dot\").forEach(dot=>{\r\n dot.classList.remove(\"active\");\r\n });\r\n\r\n document.querySelectorAll(\".dot\")[index].classList.add(\"active\");\r\n}\r\n\r\nfunction nextSlide(){\r\n index++;\r\n\r\n if(index >= totalSlides){\r\n index = 0;\r\n }\r\n\r\n updateCarousel();\r\n}\r\n\r\nfunction prevSlide(){\r\n index--;\r\n\r\n if(index < 0){\r\n index = totalSlides - 1;\r\n }\r\n\r\n updateCarousel();\r\n}\r\n\r\n\/\/ auto slide\r\nsetInterval(()=>{\r\n nextSlide();\r\n},4000);\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ffb305f e-flex e-con-boxed e-con e-parent\" data-id=\"ffb305f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-237ac1c e-flex e-con-boxed e-con e-parent\" data-id=\"237ac1c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-18e2e92 e-flex e-con-boxed e-con e-parent\" data-id=\"18e2e92\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Carousel \u0395\u03b9\u03ba\u03cc\u03bd\u03c9\u03bd \u039a\u03b9\u03bd\u03bf\u03cd\u03bc\u03b5\u03bd\u03b7 \u03a0\u03b1\u03c1\u03ac\u03b3\u03c1\u03b1\u03c6\u03bf\u03c2 \u276e \u276f<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-14","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/informatics.val-edu.gr\/index.php?rest_route=\/wp\/v2\/pages\/14","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/informatics.val-edu.gr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/informatics.val-edu.gr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/informatics.val-edu.gr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/informatics.val-edu.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=14"}],"version-history":[{"count":61,"href":"https:\/\/informatics.val-edu.gr\/index.php?rest_route=\/wp\/v2\/pages\/14\/revisions"}],"predecessor-version":[{"id":518,"href":"https:\/\/informatics.val-edu.gr\/index.php?rest_route=\/wp\/v2\/pages\/14\/revisions\/518"}],"wp:attachment":[{"href":"https:\/\/informatics.val-edu.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=14"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nCarousel \u0395\u03b9\u03ba\u03cc\u03bd\u03c9\u03bd<\/title>\r\n<title>\u039a\u03b9\u03bd\u03bf\u03cd\u03bc\u03b5\u03bd\u03b7 \u03a0\u03b1\u03c1\u03ac\u03b3\u03c1\u03b1\u03c6\u03bf\u03c2<\/title>\r\n<style>\r\n\r\n\r\n\r\n*{\r\n margin:0;\r\n padding:0;\r\n box-sizing:border-box;\r\n}\r\n\r\nbody{\r\n background:#111827;\r\n display:flex;\r\n margin-top:220px;\r\n justify-content:center;\r\n align-items:center;\r\n height:100vh;\r\n font-family:Arial, sans-serif;\r\n}\r\n\r\n.carousel{\r\n position:relative;\r\n width:700px;\r\n height:600px;\r\n overflow:hidden;\r\n border-radius:8px;\r\n box-shadow:0 10px 30px rgba(0,0,0,0.4);\r\n top:10px;\r\n margin-left:70px;\r\n}\r\n\r\n.slides{\r\n \r\n display:flex;\r\n width:100%;\r\n height:100%;\r\n transition:transform 0.6s ease;\r\n}\r\n\r\n.slide{\r\n \r\n width:100%;\r\n flex-shrink:0;\r\n}\r\n\r\n.slide img{\r\n \r\n \r\n position:relative;\r\n width:100%;\r\n height:100%;\r\n object-fit:cover;\r\n}\r\n\r\nbutton{\r\n position:absolute;\r\n top:50%;\r\n transform:translateY(-50%);\r\n background:rgba(0,0,0,0.5);\r\n color:white;\r\n border:none;\r\n padding:14px 18px;\r\n cursor:pointer;\r\n font-size:24px;\r\n border-radius:50%;\r\n transition:0.3s;\r\n}\r\n\r\nbutton:hover{\r\n background:rgba(0,0,0,0.8);\r\n}\r\n\r\n.prev{\r\n left:15px;\r\n}\r\n\r\n.next{\r\n right:15px;\r\n}\r\n\r\n.dots{\r\n position:absolute;\r\n bottom:20px;\r\n width:100%;\r\n display:flex;\r\n justify-content:center;\r\n gap:10px;\r\n}\r\n\r\n.dot{\r\n width:14px;\r\n height:14px;\r\n border-radius:50%;\r\n background:white;\r\n opacity:0.5;\r\n cursor:pointer;\r\n}\r\n\r\n.dot.active{\r\n opacity:1;\r\n background:#60a5fa;\r\n}\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<div class=\"carousel\">\r\n\r\n <div class=\"slides\" id=\"slides\">\r\n\r\n <div class=\"slide\">\r\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/1015\/1200\/700\" alt=\"\">\r\n <\/div>\r\n\r\n <div class=\"slide\">\r\n <img decoding=\"async\" src=\"https:\/\/encrypted-tbn0.gstatic.com\/images?q=tbn:ANd9GcSy2hyx9uxM-ze8HxToKKHWMpTL2m3N5m0OBriZfXpDSKCJ74E-VWbaAkgHMfv-gRyjE9ZVOn1rHfnRf0T7aMVF_plKz5O3xWl7cfflMKI&s=10\" alt=\"\">\r\n <\/div>\r\n\r\n <div class=\"slide\">\r\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/1018\/1200\/700\" alt=\"\">\r\n <\/div>\r\n\r\n <div class=\"slide\">\r\n <img decoding=\"async\" src=\"https:\/\/encrypted-tbn0.gstatic.com\/images?q=tbn:ANd9GcSacfZzoW2c-cn3396CFRu-FJ14WZoAOS-oyVG7mQHtpJUZ-BKTbTdPP-Gu6NQFA0Ae6RjMoXSqmhJtBDyoRMvoYG7pFlIAO86q0a6SBIsLmA&s=10\" alt=\"\">\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <button class=\"prev\" onclick=\"prevSlide()\">\u276e<\/button>\r\n <button class=\"next\" onclick=\"nextSlide()\">\u276f<\/button>\r\n\r\n <div class=\"dots\" id=\"dots\"><\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<script>\r\nconst slides = document.getElementById(\"slides\");\r\nconst totalSlides = document.querySelectorAll(\".slide\").length;\r\nconst dotsContainer = document.getElementById(\"dots\");\r\n\r\nlet index = 0;\r\n\r\n\/\/ \u03b4\u03b7\u03bc\u03b9\u03bf\u03c5\u03c1\u03b3\u03af\u03b1 dots\r\nfor(let i=0;i<totalSlides;i++){\r\n const dot = document.createElement(\"div\");\r\n dot.classList.add(\"dot\");\r\n\r\n if(i===0) dot.classList.add(\"active\");\r\n\r\n dot.addEventListener(\"click\", ()=>{\r\n index = i;\r\n updateCarousel();\r\n });\r\n\r\n dotsContainer.appendChild(dot);\r\n}\r\n\r\nfunction updateCarousel(){\r\n slides.style.transform = `translateX(-${index * 100}%)`;\r\n\r\n document.querySelectorAll(\".dot\").forEach(dot=>{\r\n dot.classList.remove(\"active\");\r\n });\r\n\r\n document.querySelectorAll(\".dot\")[index].classList.add(\"active\");\r\n}\r\n\r\nfunction nextSlide(){\r\n index++;\r\n\r\n if(index >= totalSlides){\r\n index = 0;\r\n }\r\n\r\n updateCarousel();\r\n}\r\n\r\nfunction prevSlide(){\r\n index--;\r\n\r\n if(index < 0){\r\n index = totalSlides - 1;\r\n }\r\n\r\n updateCarousel();\r\n}\r\n\r\n\/\/ auto slide\r\nsetInterval(()=>{\r\n nextSlide();\r\n},4000);\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ffb305f e-flex e-con-boxed e-con e-parent\" data-id=\"ffb305f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-237ac1c e-flex e-con-boxed e-con e-parent\" data-id=\"237ac1c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-18e2e92 e-flex e-con-boxed e-con e-parent\" data-id=\"18e2e92\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Carousel \u0395\u03b9\u03ba\u03cc\u03bd\u03c9\u03bd \u039a\u03b9\u03bd\u03bf\u03cd\u03bc\u03b5\u03bd\u03b7 \u03a0\u03b1\u03c1\u03ac\u03b3\u03c1\u03b1\u03c6\u03bf\u03c2 \u276e \u276f<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-14","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/informatics.val-edu.gr\/index.php?rest_route=\/wp\/v2\/pages\/14","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/informatics.val-edu.gr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/informatics.val-edu.gr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/informatics.val-edu.gr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/informatics.val-edu.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=14"}],"version-history":[{"count":61,"href":"https:\/\/informatics.val-edu.gr\/index.php?rest_route=\/wp\/v2\/pages\/14\/revisions"}],"predecessor-version":[{"id":518,"href":"https:\/\/informatics.val-edu.gr\/index.php?rest_route=\/wp\/v2\/pages\/14\/revisions\/518"}],"wp:attachment":[{"href":"https:\/\/informatics.val-edu.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=14"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}