{"id":152,"date":"2026-08-27T11:12:51","date_gmt":"2026-08-27T11:12:51","guid":{"rendered":"https:\/\/dyr.webbyjesp.dk\/?page_id=152"},"modified":"2026-08-27T11:28:43","modified_gmt":"2026-08-27T11:28:43","slug":"carasol","status":"publish","type":"page","link":"https:\/\/dyr.webbyjesp.dk\/index.php\/carasol\/","title":{"rendered":"Carasol"},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n* {box-sizing:border-box}\n\nimg {\n height: 500px;\nobject-fit: cover;\n}\n\n\/* Slideshow container *\/\n.slideshow-container {\n  max-width: 1000px;\n  position: relative;\n  margin: auto;\n}\n\n\/* Hide the images by default *\/\n.mySlides {\n  display: none;\n}\n\n\/* Next & previous buttons *\/\n.prev, .next {\n  cursor: pointer;\n  position: absolute;\n  top: 50%;\n  width: auto;\n  margin-top: -22px;\n  padding: 16px;\n  color: white;\n  font-weight: bold;\n  font-size: 18px;\n  transition: 0.6s ease;\n  border-radius: 0 3px 3px 0;\n  user-select: none;\n}\n\n\/* Position the \"next button\" to the right *\/\n.next {\n  right: 0;\n  border-radius: 3px 0 0 3px;\n}\n\n\/* On hover, add a black background color with a little bit see-through *\/\n.prev:hover, .next:hover {\n  background-color: rgba(0,0,0,0.8);\n}\n\n\/* Caption text *\/\n.text {\n  color: #f2f2f2;\n  font-size: 15px;\n  padding: 8px 12px;\n  position: absolute;\n  bottom: 8px;\n  width: 100%;\n  text-align: center;\n}\n\n\/* Number text (1\/3 etc) *\/\n.numbertext {\n  color: #f2f2f2;\n  font-size: 12px;\n  padding: 8px 12px;\n  position: absolute;\n  top: 0;\n}\n\n\/* The dots\/bullets\/indicators *\/\n.dot {\n  cursor: pointer;\n  height: 15px;\n  width: 15px;\n  margin: 0 2px;\n  background-color: #bbb;\n  border-radius: 50%;\n  display: inline-block;\n  transition: background-color 0.6s ease;\n}\n\n.active, .dot:hover {\n  background-color: #717171;\n}\n\n\/* Fading animation *\/\n.fade {\n  animation-name: fade;\n  animation-duration: 1.5s;\n}\n\n@keyframes fade {\n  from {opacity: .4}\n  to {opacity: 1}\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\nlet slideIndex = 1;\n\nfunction plusSlides(n) {\n  showSlides(slideIndex += n);\n}\n\nfunction currentSlide(n) {\n  showSlides(slideIndex = n);\n}\n\nfunction showSlides(n) {\n  let i;\n  let slides = document.getElementsByClassName(\"mySlides\");\n  let dots = document.getElementsByClassName(\"dot\");\n\n  if (!slides.length) return;\n\n  if (n > slides.length) {\n    slideIndex = 1;\n  }\n\n  if (n < 1) {\n    slideIndex = slides.length;\n  }\n\n  for (i = 0; i < slides.length; i++) {\n    slides[i].style.display = \"none\";\n  }\n\n  for (i = 0; i < dots.length; i++) {\n    dots[i].className = dots[i].className.replace(\" active\", \"\");\n  }\n\n  slides[slideIndex - 1].style.display = \"block\";\n\n  if (dots.length) {\n    dots[slideIndex - 1].className += \" active\";\n  }\n}\n\nif (document.readyState === \"loading\") {\n  document.addEventListener(\"DOMContentLoaded\", function () {\n    showSlides(slideIndex);\n  });\n} else {\n  showSlides(slideIndex);\n}\n<\/script>\n\n<!-- Slideshow container -->\n<div class=\"slideshow-container\">\n\n  <!-- Full-width images with number and caption text -->\n  <div class=\"mySlides fade\">\n    <div class=\"numbertext\">1 \/ 3<\/div>\n    <img decoding=\"async\" src=\"http:\/\/dyr.webbyjesp.dk\/wp-content\/uploads\/2026\/08\/doncoombez-MqDNQ4h3tDQ-unsplashv2-1.jpg\" style=\"width:100%\">\n    <div class=\"text\">Caption Text<\/div>\n  <\/div>\n\n  <div class=\"mySlides fade\">\n    <div class=\"numbertext\">2 \/ 3<\/div>\n    <img decoding=\"async\" src=\"http:\/\/dyr.webbyjesp.dk\/wp-content\/uploads\/2026\/08\/ken-cheung-eZZe4TnxjKE-unsplash-2-scaled.jpg\" style=\"width:100%\">\n    <div class=\"text\">Caption Two<\/div>\n  <\/div>\n\n  <div class=\"mySlides fade\">\n    <div class=\"numbertext\">3 \/ 3<\/div>\n    <img decoding=\"async\" src=\"http:\/\/dyr.webbyjesp.dk\/wp-content\/uploads\/2026\/08\/michael-shtern-PvICnpWGlc-unsplash-2.jpg\" style=\"width:100%\">\n    <div class=\"text\">Caption Three<\/div>\n  <\/div>\n\n  <!-- Next and previous buttons -->\n  <a class=\"prev\" onclick=\"plusSlides(-1)\">\u276e<\/a>\n  <a class=\"next\" onclick=\"plusSlides(1)\">\u276f<\/a>\n<\/div>\n<br>\n\n<!-- The dots\/circles -->\n<div style=\"text-align:center\">\n  <span class=\"dot\" onclick=\"currentSlide(1)\"><\/span>\n  <span class=\"dot\" onclick=\"currentSlide(2)\"><\/span>\n  <span class=\"dot\" onclick=\"currentSlide(3)\"><\/span>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>1 \/ 3 Caption Text 2 \/ 3 Caption Two 3 \/ 3 Caption Three \u276e \u276f<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-152","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/dyr.webbyjesp.dk\/index.php\/wp-json\/wp\/v2\/pages\/152","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dyr.webbyjesp.dk\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dyr.webbyjesp.dk\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dyr.webbyjesp.dk\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dyr.webbyjesp.dk\/index.php\/wp-json\/wp\/v2\/comments?post=152"}],"version-history":[{"count":8,"href":"https:\/\/dyr.webbyjesp.dk\/index.php\/wp-json\/wp\/v2\/pages\/152\/revisions"}],"predecessor-version":[{"id":167,"href":"https:\/\/dyr.webbyjesp.dk\/index.php\/wp-json\/wp\/v2\/pages\/152\/revisions\/167"}],"wp:attachment":[{"href":"https:\/\/dyr.webbyjesp.dk\/index.php\/wp-json\/wp\/v2\/media?parent=152"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}