{"id":13175,"date":"2025-11-22T14:22:56","date_gmt":"2025-11-22T13:22:56","guid":{"rendered":"https:\/\/qilimanjaro.tech\/?page_id=13175"},"modified":"2025-11-22T18:25:52","modified_gmt":"2025-11-22T17:25:52","slug":"test-slider-2","status":"publish","type":"page","link":"https:\/\/qilimanjaro.tech\/ca\/test-slider-2\/","title":{"rendered":"Test slider"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"13175\" class=\"elementor elementor-13175\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-89654af e-flex e-con-boxed e-con e-parent\" data-id=\"89654af\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a60c1b1 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"a60c1b1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"custom-gallery-qili\">\r\n  <div class=\"cgq-viewport\">\r\n    <div class=\"cgq-track\">\r\n      <!-- SLIDE 1 -->\r\n      <div class=\"cgq-slide\">\r\n        <img decoding=\"async\" src=\"https:\/\/qilimanjaro.tech\/wp-content\/uploads\/2025\/10\/Galeria-1-3.webp\" alt=\"\">\r\n      <\/div>\r\n\r\n      <!-- SLIDE 2 (activa al inicio) -->\r\n      <div class=\"cgq-slide\">\r\n        <img decoding=\"async\" src=\"https:\/\/qilimanjaro.tech\/wp-content\/uploads\/2025\/10\/Galeria-2-1.webp\" alt=\"\">\r\n      <\/div>\r\n\r\n      <!-- SLIDE 3 -->\r\n      <div class=\"cgq-slide\">\r\n        <img decoding=\"async\" src=\"https:\/\/qilimanjaro.tech\/wp-content\/uploads\/2025\/10\/Frame-87455741-1024x665.webp\" alt=\"\">\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- Controles (flechas + bullets) -->\r\n  <div class=\"cgq-controls\">\r\n    \r\n    \r\n    <!-- Flecha ANTERIOR -->\r\n<button class=\"cgq-arrow cgq-prev\" type=\"button\" aria-label=\"Anterior\">\r\n  <svg width=\"50\" height=\"50\" viewBox=\"0 0 40 40\" fill=\"none\">\r\n    <path d=\"M24 8 L12 20 L24 32\" stroke=\"white\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n  <\/svg>\r\n<\/button>\r\n\r\n\r\n\r\n\r\n    <div class=\"cgq-bullets\">\r\n      <button class=\"cgq-bullet\" data-index=\"0\"><\/button>\r\n      <button class=\"cgq-bullet\" data-index=\"1\"><\/button>\r\n      <button class=\"cgq-bullet\" data-index=\"2\"><\/button>\r\n    <\/div>\r\n\r\n    <!-- Flecha SIGUIENTE -->\r\n<button class=\"cgq-arrow cgq-next\" type=\"button\" aria-label=\"Siguiente\">\r\n  <svg width=\"50\" height=\"50\" viewBox=\"0 0 40 40\" fill=\"none\">\r\n    <path d=\"M16 8 L28 20 L16 32\" stroke=\"white\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n  <\/svg>\r\n<\/button>\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\n\/* ===== CONTENEDOR GENERAL ===== *\/\r\n.custom-gallery-qili {\r\n  max-width: 1400px;        \/* ajusta al dise\u00f1o *\/\r\n  margin: 0 auto;\r\n  position: relative;\r\n  overflow: visible;         \/* que se vean las im\u00e1genes que salen *\/\r\n}\r\n\r\n\/* Evitar scroll horizontal global si algo se sale un poco *\/\r\nbody {\r\n  overflow-x: hidden;\r\n}\r\n\r\n\/* ===== \u00c1REA DE IM\u00c1GENES (DESKTOP \/ TABLET) ===== *\/\r\n.cgq-viewport {\r\n  position: relative;\r\n  overflow: visible;         \/* requisito: que sobresalgan *\/\r\n  min-height: 600px;         \/* para que no haya saltos de altura *\/\r\n}\r\n\r\n.cgq-track {\r\n  display: flex;\r\n  gap: 40px;\r\n  transition: transform 0.6s ease;\r\n}\r\n\r\n\/* Cada slide: ancho 70%, alineado ARRIBA, pegado a la izquierda cuando est\u00e1 activo *\/\r\n.cgq-slide {\r\n  flex: 0 0 70%;\r\n  display: flex;\r\n  align-items: flex-start;   \/* ARRIBA, no centrado vertical *\/\r\n}\r\n\r\n\/* Imagen base (laterales) *\/\r\n.cgq-slide img {\r\n  width: 100%;\r\n  height: 450px;\r\n  object-fit: cover;\r\n  border-radius: 24px;\r\n  transition: height 0.5s ease, box-shadow 0.5s ease, filter 0.3s ease, opacity 0.3s ease;\r\n  \r\n}\r\n\r\n\/* Imagen activa (la que est\u00e1 pegada a la izquierda) m\u00e1s grande y limpia *\/\r\n.cgq-slide.is-active img {\r\n  height: 550px;\r\n  \r\n \r\n  filter: none;\r\n}\r\n\r\n\/* ===== CONTROLES (FLECHAS + BULLETS) ===== *\/\r\n\/* Siempre debajo de la zona de 70% pegada a la izquierda *\/\r\n.cgq-controls {\r\n  width: 100%;                \/* mismo ancho que el slide activo *\/\r\n  margin-top: 16px;\r\n  margin-left: 0;            \/* pegado a la izquierda *\/\r\n  margin-right: auto;        \/* empuja hacia la izquierda *\/\r\n  display: flex;\r\n  align-items: center;\r\n  margin-left:calc(70% + 30px)!important;\r\n  margin-top:-95px!important;\r\n  position: relative!important;\r\n  z-index:99!important;\r\n  gap: 0px;\r\n  \r\n  \r\n}\r\n\r\n\/* Flechas *\/\r\n.cgq-arrow {\r\n    \r\n\r\n  background: transparent!important;\r\n  border:none!important;\r\n  width: 60px;\r\n  height: 40px;\r\n  color: #fff;\r\n  font-size: 50px;\r\n  line-height: 1;\r\n  cursor: pointer;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  transition: background 0.3s ease, border-color 0.3s ease, transform 0.2s ease, opacity 0.3s ease;\r\n\r\n \r\n}\r\n\r\n\r\n\r\n.cgq-arrow svg {\r\n  width: 30px;\r\n  height:30px;\r\n  background: transparent;\r\n  border:none!important;\r\n  \r\n}\r\n\r\n\r\n.cgq-arrow:hover {\r\n  background: transparent!important;\r\n  border-color: #fff;\r\n  transform: translateY(-1px);\r\n}\r\n\r\n.cgq-arrow:disabled {\r\n  opacity: 0.3;\r\n  cursor: default;\r\n}\r\n\r\n\/* Bullets *\/\r\n.cgq-bullets {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n}\r\n\r\n.cgq-bullet {\r\n  width: 25px;\r\n  height: 4px;\r\n  border-radius: 999px;\r\n  border: none;\r\n  background: rgba(255,255,255,0.25);\r\n  cursor: pointer;\r\n  padding: 0;\r\n  transition: background 0.3s ease, width 0.3s ease;\r\n}\r\n\r\n.cgq-bullet:hover{\r\n    background-color: #fff!important;\r\n}\r\n\r\n.cgq-bullet.is-active{\r\n    background-color: #fff!important;\r\n}\r\n\r\n\/*\r\n\r\n.cgq-bullet.is-active {\r\n  width: 34px;\r\n  background: #ffffff;\r\n}\r\n\r\n+\/\r\n\r\n\/* ===== RESPONSIVE: M\u00d3VIL ===== *\/\r\n@media (max-width: 768px) {\r\n\r\n  .cgq-viewport {\r\n    min-height: 0;\r\n  }\r\n\r\n  .cgq-track {\r\n    gap: 16px;\r\n  }\r\n\r\n  .cgq-slide {\r\n    flex: 0 0 100%;          \/* una imagen por vista *\/\r\n  }\r\n\r\n  .cgq-slide img,\r\n  .cgq-slide.is-active img {\r\n    height: 320px;            \/* todas las im\u00e1genes mismo alto *\/\r\n  \r\n  }\r\n\r\n  \r\n  \r\n  .cgq-controls {\r\n  width: 100%;                \/* mismo ancho que el slide activo *\/\r\n  margin-top: 16px;\r\n  margin-left: 0;            \/* pegado a la izquierda *\/\r\n  margin-right: auto;        \/* empuja hacia la izquierda *\/\r\n  display: flex;\r\n  justify-content: center!important;\r\n  align-items: center;\r\n  margin-left:0!important;\r\n  margin-top:50px!important;\r\n  position: relative!important;\r\n  z-index:99!important;\r\n  gap: 16px;\r\n  \r\n}\r\n}\r\n\r\n\r\n\r\n\r\n\r\n.cgq-controls * {\r\n  pointer-events: auto;\r\n}\r\n\r\n<\/style>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n  const gallery   = document.querySelector('.custom-gallery-qili');\r\n  if (!gallery) return;\r\n\r\n  const viewport  = gallery.querySelector('.cgq-viewport');\r\n  const track     = gallery.querySelector('.cgq-track');\r\n  const slides    = Array.from(gallery.querySelectorAll('.cgq-slide'));\r\n  const bullets   = Array.from(gallery.querySelectorAll('.cgq-bullet'));\r\n  const prevBtn   = gallery.querySelector('.cgq-prev');\r\n  const nextBtn   = gallery.querySelector('.cgq-next');\r\n\r\n  if (!slides.length) return;\r\n\r\n  \/\/ Empezamos en el SEGUNDO slide si existe (como tu dise\u00f1o)\r\n  let current = 0; \/\/ empezar siempre en el slide 1 (\u00edndice 0)\r\n  const mqMobile = window.matchMedia('(max-width: 768px)');\r\n\r\n  function goToSlide(index, smooth = true) {\r\n    if (index < 0) index = 0;\r\n    if (index > slides.length - 1) index = slides.length - 1;\r\n    current = index;\r\n\r\n    \/\/ Marcar slide activo\r\n    slides.forEach((slide, i) => {\r\n      slide.classList.toggle('is-active', i === current);\r\n    });\r\n    bullets.forEach((b, i) => {\r\n      b.classList.toggle('is-active', i === current);\r\n    });\r\n\r\n    const activeSlide = slides[current];\r\n    const isMobile = mqMobile.matches;\r\n\r\n    \/\/ Queremos que el slide activo quede PEGADO A LA IZQUIERDA del viewport\r\n    let offset = activeSlide.offsetLeft;\r\n\r\n    track.style.transition = smooth ? (isMobile ? 'transform 0.4s ease' : 'transform 0.6s ease') : 'none';\r\n    track.style.transform  = `translateX(${-offset}px)`;\r\n\r\n    \/\/ Deshabilitar flechas en extremos\r\n    prevBtn.disabled = current === 0;\r\n    nextBtn.disabled = current === slides.length - 1;\r\n  }\r\n\r\n  \/\/ Eventos flechas\r\n  prevBtn.addEventListener('click', () => {\r\n    goToSlide(current - 1);\r\n  });\r\n\r\n  nextBtn.addEventListener('click', () => {\r\n    goToSlide(current + 1);\r\n  });\r\n\r\n  \/\/ Eventos bullets\r\n  bullets.forEach(bullet => {\r\n    bullet.addEventListener('click', () => {\r\n      const index = parseInt(bullet.dataset.index, 10);\r\n      goToSlide(index);\r\n    });\r\n  });\r\n\r\n  \/\/ Recalcular en resize\r\n  window.addEventListener('resize', () => {\r\n    goToSlide(current, false);\r\n  });\r\n\r\n  \/\/ Iniciar\r\n  goToSlide(current, false);\r\n});\r\n<\/script>\r\n\r\n\r\n\r\n\r\n\t\t\t\t<\/div>\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":"","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_monsterinsights_skip_tracking":false,"footnotes":""},"class_list":["post-13175","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Test slider - Qilimanjaro<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/qilimanjaro.tech\/ca\/test-slider-2\/\" \/>\n<meta property=\"og:locale\" content=\"ca_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Test slider - Qilimanjaro\" \/>\n<meta property=\"og:url\" content=\"https:\/\/qilimanjaro.tech\/ca\/test-slider-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Qilimanjaro\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-22T17:25:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/qilimanjaro.tech\/wp-content\/uploads\/2025\/10\/Galeria-1-3.webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Temps estimat de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minuts\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/qilimanjaro.tech\\\/test-slider-2\\\/\",\"url\":\"https:\\\/\\\/qilimanjaro.tech\\\/test-slider-2\\\/\",\"name\":\"Test slider - Qilimanjaro\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/qilimanjaro.tech\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/qilimanjaro.tech\\\/test-slider-2\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/qilimanjaro.tech\\\/test-slider-2\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/qilimanjaro.tech\\\/wp-content\\\/uploads\\\/2025\\\/10\\\/Galeria-1-3.webp\",\"datePublished\":\"2025-11-22T13:22:56+00:00\",\"dateModified\":\"2025-11-22T17:25:52+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/qilimanjaro.tech\\\/test-slider-2\\\/#breadcrumb\"},\"inLanguage\":\"ca\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/qilimanjaro.tech\\\/test-slider-2\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ca\",\"@id\":\"https:\\\/\\\/qilimanjaro.tech\\\/test-slider-2\\\/#primaryimage\",\"url\":\"https:\\\/\\\/qilimanjaro.tech\\\/wp-content\\\/uploads\\\/2025\\\/10\\\/Galeria-1-3.webp\",\"contentUrl\":\"https:\\\/\\\/qilimanjaro.tech\\\/wp-content\\\/uploads\\\/2025\\\/10\\\/Galeria-1-3.webp\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/qilimanjaro.tech\\\/test-slider-2\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/qilimanjaro.tech\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Test slider\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/qilimanjaro.tech\\\/#website\",\"url\":\"https:\\\/\\\/qilimanjaro.tech\\\/\",\"name\":\"Qilimanjaro\",\"description\":\"We build analog, full-stack quantum computers\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/qilimanjaro.tech\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ca\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Test slider - Qilimanjaro","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/qilimanjaro.tech\/ca\/test-slider-2\/","og_locale":"ca_ES","og_type":"article","og_title":"Test slider - Qilimanjaro","og_url":"https:\/\/qilimanjaro.tech\/ca\/test-slider-2\/","og_site_name":"Qilimanjaro","article_modified_time":"2025-11-22T17:25:52+00:00","og_image":[{"url":"https:\/\/qilimanjaro.tech\/wp-content\/uploads\/2025\/10\/Galeria-1-3.webp","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Temps estimat de lectura":"4 minuts"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/qilimanjaro.tech\/test-slider-2\/","url":"https:\/\/qilimanjaro.tech\/test-slider-2\/","name":"Test slider - Qilimanjaro","isPartOf":{"@id":"https:\/\/qilimanjaro.tech\/#website"},"primaryImageOfPage":{"@id":"https:\/\/qilimanjaro.tech\/test-slider-2\/#primaryimage"},"image":{"@id":"https:\/\/qilimanjaro.tech\/test-slider-2\/#primaryimage"},"thumbnailUrl":"https:\/\/qilimanjaro.tech\/wp-content\/uploads\/2025\/10\/Galeria-1-3.webp","datePublished":"2025-11-22T13:22:56+00:00","dateModified":"2025-11-22T17:25:52+00:00","breadcrumb":{"@id":"https:\/\/qilimanjaro.tech\/test-slider-2\/#breadcrumb"},"inLanguage":"ca","potentialAction":[{"@type":"ReadAction","target":["https:\/\/qilimanjaro.tech\/test-slider-2\/"]}]},{"@type":"ImageObject","inLanguage":"ca","@id":"https:\/\/qilimanjaro.tech\/test-slider-2\/#primaryimage","url":"https:\/\/qilimanjaro.tech\/wp-content\/uploads\/2025\/10\/Galeria-1-3.webp","contentUrl":"https:\/\/qilimanjaro.tech\/wp-content\/uploads\/2025\/10\/Galeria-1-3.webp"},{"@type":"BreadcrumbList","@id":"https:\/\/qilimanjaro.tech\/test-slider-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/qilimanjaro.tech\/"},{"@type":"ListItem","position":2,"name":"Test slider"}]},{"@type":"WebSite","@id":"https:\/\/qilimanjaro.tech\/#website","url":"https:\/\/qilimanjaro.tech\/","name":"Kilimanjaro","description":"Constru\u00efm ordinadors qu\u00e0ntics anal\u00f2gics i \"full-stack\".","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/qilimanjaro.tech\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ca"}]}},"_links":{"self":[{"href":"https:\/\/qilimanjaro.tech\/ca\/wp-json\/wp\/v2\/pages\/13175","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qilimanjaro.tech\/ca\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/qilimanjaro.tech\/ca\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/qilimanjaro.tech\/ca\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/qilimanjaro.tech\/ca\/wp-json\/wp\/v2\/comments?post=13175"}],"version-history":[{"count":0,"href":"https:\/\/qilimanjaro.tech\/ca\/wp-json\/wp\/v2\/pages\/13175\/revisions"}],"wp:attachment":[{"href":"https:\/\/qilimanjaro.tech\/ca\/wp-json\/wp\/v2\/media?parent=13175"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}