{"id":21823,"date":"2025-10-02T12:44:38","date_gmt":"2025-10-02T12:44:38","guid":{"rendered":"https:\/\/mainstaymedical.com\/?page_id=21823"},"modified":"2025-12-11T12:26:07","modified_gmt":"2025-12-11T12:26:07","slug":"de-test","status":"publish","type":"page","link":"https:\/\/mainstaymedical.com\/de\/de-test\/","title":{"rendered":"DE – Test"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n \n Timeline Carousel<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/swiper@11\/swiper-bundle.min.css\" \/>\n <style>\n .swiper-wrapper {\n \n align-items: center;\n}\n.swiper-wrapper {\n \n align-content: center;\n justify-content: center;\n}\n@media (min-width: 992px) {\n .m-carousel-timeline__item {\n width: 65px !important;\n justify-content: flex-start !important;\n \n }\n }\n@media (min-width: 992px) {\n .m-carousel-timeline__item-image {\n height: 100% !important;\n }\n body { \n font-family: \"IBM Plex Sans\", sans-serif; \n background:#f4f9f8; \n margin:0; \n padding:0;\n }\n\n .m-carousel-timeline__carousel-wrapper { width: 100%; }\n .swiper-wrapper { align-items: center; }\n\n \/* Inactive slides *\/\n @media (min-width: 992px) {\n .m-carousel-timeline__item {\n width: 200px;\n height: 180px;\n flex-shrink: 0;\n user-select: none;\n transition: width .3s ease-in-out;\n display:flex;\n align-items:center;\n justify-content:center;\n font-size:42px;\n font-weight:300;\n color:#aaa;\n position:relative;\n }\n }\n\n \/* Divider line with spacing *\/\n .m-carousel-timeline__item::after {\n content:\"\";\n position:absolute;\n right:-24px;\n width:1px;\n top:15%;\n bottom:15%;\n background:#999;\n opacity:0.4;\n }\n .swiper-slide:last-child::after { display:none; }\n\n \/* Hide year on active *\/\n .swiper-slide-active .m-carousel-timeline__item-title-inactive {\n display:none !important;\n }\n\n \/* Active expanded slide *\/\n @media (min-width: 992px) {\n .m-carousel-timeline__item.swiper-slide-active {\n width:640px !important;\n height:420px;\n user-select:auto;\n }\n }\n\n \/* Inner wrapper *\/\n .m-carousel-timeline__item-inner {\n display:flex;\n flex-direction: row; \/* text left, image right *\/\n height:100%;\n background:#1f513f;\n color:#fff;\n box-sizing:border-box;\n opacity:0;\n visibility:hidden;\n transition:opacity .3s ease-in-out .3s, visibility .3s ease-in-out .3s;\n width:100%;\n }\n .swiper-slide-active .m-carousel-timeline__item-inner {\n opacity:1;\n visibility:visible;\n }\n\n \/* Content (left) *\/\n @media (min-width: 992px) {\n .m-carousel-timeline__item-content {\n flex:0 0 60%;\n max-width:60%;\n padding:48px;\n display:flex;\n flex-direction:column;\n justify-content:space-between;\n }\n }\n .m-carousel-timeline__item-content h4 { font-size:48px; margin:0; }\n .m-carousel-timeline__item-text { font-size:18px; line-height:1.6; }\n\n \/* Image (right) *\/\n @media (min-width: 992px) {\n .m-carousel-timeline__item-image-wrapper {\n flex:0 0 40%;\n max-width:40%;\n overflow:hidden;\n }\n .m-carousel-timeline__item-image {\n width:100%;\n height:100%;\n object-fit:cover;\n display:block;\n }\n }\n\n \/* Pagination dots *\/\n .swiper-pagination {\n margin-top: 40px;\n position: relative;\n }\n .swiper-pagination-bullet {\n width: 14px;\n height: 14px;\n border: 2px solid #1f513f;\n background: transparent;\n opacity: 1;\n margin: 0 6px !important;\n }\n .swiper-pagination-bullet-active {\n background: #1f513f;\n }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"m-carousel-timeline\">\n <div class=\"m-carousel-timeline__carousel-wrapper swiper\">\n <div class=\"m-carousel-timeline__carousel swiper-wrapper\">\n\n <!-- Slide -->\n <div class=\"m-carousel-timeline__item swiper-slide\">\n <h4 class=\"m-carousel-timeline__item-title-inactive\">2008<\/h4>\n <div class=\"m-carousel-timeline__item-inner\">\n <div class=\"m-carousel-timeline__item-content\">\n <h4>2008<\/h4>\n <div class=\"m-carousel-timeline__item-text\">\n <p>Dan Sachs, MD files a patent on the idea that leads to ReActiv8.<\/p>\n <\/div>\n <\/div>\n <div class=\"m-carousel-timeline__item-image-wrapper\">\n <img decoding=\"async\" class=\"m-carousel-timeline__item-image\" src=\"https:\/\/picsum.photos\/800\/420?1\" alt=\"\">\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Slide -->\n <div class=\"m-carousel-timeline__item swiper-slide\">\n <h4 class=\"m-carousel-timeline__item-title-inactive\">2011<\/h4>\n <div class=\"m-carousel-timeline__item-inner\">\n <div class=\"m-carousel-timeline__item-content\">\n <h4>2011<\/h4>\n <div class=\"m-carousel-timeline__item-text\">\n <p>The first subjects enrolled in our Feasibility Study.<\/p>\n <\/div>\n <\/div>\n <div class=\"m-carousel-timeline__item-image-wrapper\">\n <img decoding=\"async\" class=\"m-carousel-timeline__item-image\" src=\"https:\/\/picsum.photos\/800\/420?2\" alt=\"\">\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Slide -->\n <div class=\"m-carousel-timeline__item swiper-slide\">\n <h4 class=\"m-carousel-timeline__item-title-inactive\">2012<\/h4>\n <div class=\"m-carousel-timeline__item-inner\">\n <div class=\"m-carousel-timeline__item-content\">\n <h4>2012<\/h4>\n <div class=\"m-carousel-timeline__item-text\">\n <p>A big year for our company: Submitted pre-IDE package to FDA, moved HQ to Dublin, and finished Feasibility Study enrollment.<\/p>\n <\/div>\n <\/div>\n <div class=\"m-carousel-timeline__item-image-wrapper\">\n <img decoding=\"async\" class=\"m-carousel-timeline__item-image\" src=\"https:\/\/picsum.photos\/800\/420?3\" alt=\"\">\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n\n <!-- Pagination only -->\n <div class=\"swiper-pagination\"><\/div>\n <\/div>\n<\/div>\n\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/swiper@11\/swiper-bundle.min.js\"><\/script>\n<script>\n const swiper = new Swiper('.m-carousel-timeline__carousel-wrapper', {\n slidesPerView: 'auto',\n centeredSlides: true,\n watchSlidesProgress: true,\n spaceBetween: 48,\n speed: 600, \/\/ smooth glide\n loop: false,\n pagination: { el: '.swiper-pagination', clickable: true }\n });\n\n \/\/ Click inactive year to activate\n document.querySelectorAll('.m-carousel-timeline__item').forEach((slide, index) => {\n slide.addEventListener('click', () => swiper.slideTo(index));\n });\n<\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-30dce16 e-flex e-con-boxed e-con e-parent\" data-id=\"30dce16\" 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-d3cf8df elementor-widget elementor-widget-html\" data-id=\"d3cf8df\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 938 593\" width=\"938\" height=\"593\">\n <style>\n path.main {\n stroke-dasharray: 2500;\n stroke-dashoffset: 2500;\n animation: draw 3.5s linear forwards;\n }\n\n path.arrowhead {\n opacity: 0;\n animation: fadeIn 0.5s linear forwards;\n animation-delay: 3.5s; \/* wait until main line finishes *\/\n }\n\n @keyframes draw {\n to {\n stroke-dashoffset: 0;\n }\n }\n\n @keyframes fadeIn {\n to {\n opacity: 1;\n }\n }\n <\/style>\n\n <!-- Main animated path -->\n <path\n class=\"main\"\n fill=\"none\"\n stroke=\"black\"\n stroke-width=\"2\"\n d=\"M160.264 779.606C-59.963 397.216 440.747-49.692 550.543 208.063c109.796 257.756 345.631 156.451 377.682-44.473C960.276-37.335 778.738 5.447 732.751 148.769c-21.652 67.478-48.581 295.535 206.093 308.9\"\n \/>\n\n <!-- Arrow head (appears after line finishes) -->\n <path\n class=\"arrowhead\"\n fill=\"none\"\n stroke=\"black\"\n stroke-width=\"2\"\n d=\"M940 455 l5 -12 -12 -3 M920 450 l-4 10 10 4\"\n \/>\n<\/svg>\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":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-21823","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/mainstaymedical.com\/de\/wp-json\/wp\/v2\/pages\/21823","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mainstaymedical.com\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mainstaymedical.com\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mainstaymedical.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mainstaymedical.com\/de\/wp-json\/wp\/v2\/comments?post=21823"}],"version-history":[{"count":1,"href":"https:\/\/mainstaymedical.com\/de\/wp-json\/wp\/v2\/pages\/21823\/revisions"}],"predecessor-version":[{"id":21824,"href":"https:\/\/mainstaymedical.com\/de\/wp-json\/wp\/v2\/pages\/21823\/revisions\/21824"}],"wp:attachment":[{"href":"https:\/\/mainstaymedical.com\/de\/wp-json\/wp\/v2\/media?parent=21823"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}