Sa\u011fl\u0131k Hero Slider – Tailwind CSS<\/title><br \/>\n <br \/>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script><br \/>\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Swiper\/8.4.7\/swiper-bundle.min.css\" \/>\n <br \/>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/iconify\/2.2.1\/iconify.min.js\"><\/script><\/p>\n<style>\n @keyframes paginationProgress {\n 0% {\n width: 0%;\n }\n 100% {\n width: 100%;\n }\n }<\/p>\n<p> .swiper-pagination-bullet::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 0;\n background-color: #10B981;\n opacity: 0;\n }<\/p>\n<p> .swiper-pagination-bullet-active::after {\n opacity: 1;\n animation: paginationProgress 5s linear forwards;\n }\n <\/style>\n<p><\/head><br \/>\n<body class=\"bg-gray-50\"><\/p>\n<div class=\"relative w-full h-screen overflow-hidden\">\n<div class=\"swiper w-full h-full\">\n<div class=\"swiper-wrapper\">\n <\/p>\n<div class=\"swiper-slide relative flex items-center bg-cover bg-center\">\n<div class=\"absolute top-0 left-0 w-full h-full bg-gradient-to-r from-blue-500 to-blue-700\"><\/div>\n<div class=\"absolute top-0 left-0 w-full h-full bg-black bg-opacity-40\"><\/div>\n<div class=\"relative max-w-7xl mx-auto px-8 md:px-12 lg:px-16 text-white z-10\">\n <\/p>\n<div class=\"flex flex-wrap items-center gap-3 mb-4\">\n <span class=\"text-sm bg-white bg-opacity-20 px-3 py-1 rounded-full\">15 Mart 2025<\/span><br \/>\n <span class=\"text-sm bg-emerald-500 px-3 py-1 rounded-full\">Genel Sa\u011fl\u0131k<\/span>\n <\/div>\n<div class=\"flex items-center justify-center w-20 h-20 mb-5 bg-white bg-opacity-20 rounded-full\">\n <span class=\"iconify text-white\" data-icon=\"mdi:heart-pulse\" data-width=\"40\" data-height=\"40\"><\/span>\n <\/div>\n<h2 class=\"text-4xl md:text-5xl font-bold mb-5 text-white shadow-md\">Sa\u011fl\u0131kl\u0131 Ya\u015fam \u0130\u00e7in Ad\u0131m At\u0131n<\/h2>\n<p class=\"text-lg max-w-xl mb-8 leading-relaxed\">Uzman kadromuz ve modern teknolojimiz ile siz ve aileniz i\u00e7in en iyi sa\u011fl\u0131k hizmetlerini sunuyoruz. Sa\u011fl\u0131\u011f\u0131n\u0131z bizim \u00f6nceli\u011fimizdir.<\/p>\n<p> <a href=\"#\" class=\"inline-block px-8 py-4 bg-emerald-500 hover:bg-emerald-600 text-white font-semibold uppercase rounded-full transition duration-300\">Randevu Al<\/a>\n <\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"swiper-slide relative flex items-center bg-cover bg-center\">\n<div class=\"absolute top-0 left-0 w-full h-full bg-gradient-to-r from-blue-500 to-blue-700\"><\/div>\n<div class=\"absolute top-0 left-0 w-full h-full bg-black bg-opacity-40\"><\/div>\n<div class=\"relative max-w-7xl mx-auto px-6 md:px-24 text-white z-10\">\n <\/p>\n<div class=\"flex flex-wrap items-center gap-3 mb-4\">\n <span class=\"text-sm bg-white bg-opacity-20 px-3 py-1 rounded-full\">10 Mart 2025<\/span><br \/>\n <span class=\"text-sm bg-emerald-500 px-3 py-1 rounded-full\">Koruyucu Sa\u011fl\u0131k<\/span>\n <\/div>\n<div class=\"flex items-center justify-center w-20 h-20 mb-5 bg-white bg-opacity-20 rounded-full\">\n <span class=\"iconify text-white\" data-icon=\"mdi:stethoscope\" data-width=\"40\" data-height=\"40\"><\/span>\n <\/div>\n<h2 class=\"text-4xl md:text-5xl font-bold mb-5 text-white shadow-md\">\u00d6nleyici Sa\u011fl\u0131k Hizmetleri<\/h2>\n<p class=\"text-lg max-w-xl mb-8 leading-relaxed\">Hastal\u0131klar\u0131 tedavi etmek kadar \u00f6nlemek de \u00f6nemlidir. D\u00fczenli check-up ve tarama programlar\u0131m\u0131z ile sa\u011fl\u0131\u011f\u0131n\u0131z\u0131 koruyun.<\/p>\n<p> <a href=\"#\" class=\"inline-block px-8 py-4 bg-emerald-500 hover:bg-emerald-600 text-white font-semibold uppercase rounded-full transition duration-300\">Bilgi Al<\/a>\n <\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"swiper-slide relative flex items-center bg-cover bg-center\">\n<div class=\"absolute top-0 left-0 w-full h-full bg-gradient-to-r from-blue-500 to-blue-700\"><\/div>\n<div class=\"absolute top-0 left-0 w-full h-full bg-black bg-opacity-40\"><\/div>\n<div class=\"relative max-w-7xl mx-auto px-6 md:px-24 text-white z-10\">\n <\/p>\n<div class=\"flex flex-wrap items-center gap-3 mb-4\">\n <span class=\"text-sm bg-white bg-opacity-20 px-3 py-1 rounded-full\">5 Mart 2025<\/span><br \/>\n <span class=\"text-sm bg-emerald-500 px-3 py-1 rounded-full\">Dijital Sa\u011fl\u0131k<\/span>\n <\/div>\n<div class=\"flex items-center justify-center w-20 h-20 mb-5 bg-white bg-opacity-20 rounded-full\">\n <span class=\"iconify text-white\" data-icon=\"mdi:cellphone\" data-width=\"40\" data-height=\"40\"><\/span>\n <\/div>\n<h2 class=\"text-4xl md:text-5xl font-bold mb-5 text-white shadow-md\">Dijital Sa\u011fl\u0131k \u00c7\u00f6z\u00fcmleri<\/h2>\n<p class=\"text-lg max-w-xl mb-8 leading-relaxed\">Mobil uygulamam\u0131z ve online dan\u0131\u015fmanl\u0131k hizmetlerimiz ile sa\u011fl\u0131k hizmetlerine her an her yerden eri\u015fim sa\u011flay\u0131n.<\/p>\n<p> <a href=\"#\" class=\"inline-block px-8 py-4 bg-emerald-500 hover:bg-emerald-600 text-white font-semibold uppercase rounded-full transition duration-300\">Uygulamay\u0131 \u0130ndir<\/a>\n <\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"swiper-slide relative flex items-center bg-cover bg-center\">\n<div class=\"absolute top-0 left-0 w-full h-full bg-gradient-to-r from-blue-500 to-blue-700\"><\/div>\n<div class=\"absolute top-0 left-0 w-full h-full bg-black bg-opacity-40\"><\/div>\n<div class=\"relative max-w-7xl mx-auto px-6 md:px-24 text-white z-10\">\n <\/p>\n<div class=\"flex flex-wrap items-center gap-3 mb-4\">\n <span class=\"text-sm bg-white bg-opacity-20 px-3 py-1 rounded-full\">1 Mart 2025<\/span><br \/>\n <span class=\"text-sm bg-emerald-500 px-3 py-1 rounded-full\">Beslenme<\/span>\n <\/div>\n<div class=\"flex items-center justify-center w-20 h-20 mb-5 bg-white bg-opacity-20 rounded-full\">\n <span class=\"iconify text-white\" data-icon=\"mdi:food-apple\" data-width=\"40\" data-height=\"40\"><\/span>\n <\/div>\n<h2 class=\"text-4xl md:text-5xl font-bold mb-5 text-white shadow-md\">Beslenme ve Diyet Dan\u0131\u015fmanl\u0131\u011f\u0131<\/h2>\n<p class=\"text-lg max-w-xl mb-8 leading-relaxed\">Uzman diyetisyenlerimiz ile sa\u011fl\u0131kl\u0131 beslenme al\u0131\u015fkanl\u0131klar\u0131 edinebilir, ki\u015fiselle\u015ftirilmi\u015f diyet programlar\u0131 ile hedeflerinize ula\u015fabilirsiniz.<\/p>\n<p> <a href=\"#\" class=\"inline-block px-8 py-4 bg-emerald-500 hover:bg-emerald-600 text-white font-semibold uppercase rounded-full transition duration-300\">Detayl\u0131 Bilgi<\/a>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"swiper-pagination absolute bottom-16 left-0 w-full flex justify-center items-center gap-3 mb-3\"><\/div>\n<div class=\"swiper-button-next hidden md:flex bg-black bg-opacity-30 w-12 h-12 rounded-full transition duration-300 hover:bg-opacity-50\"><\/div>\n<div class=\"swiper-button-prev hidden md:flex bg-black bg-opacity-30 w-12 h-12 rounded-full transition duration-300 hover:bg-opacity-50\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <br \/>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Swiper\/8.4.7\/swiper-bundle.min.js\"><\/script><br \/>\n <script>\n document.addEventListener('DOMContentLoaded', function() {\n const AUTOPLAY_DELAY = 5000; \/\/ 5 saniye (CSS animasyon s\u00fcresiyle e\u015fle\u015fmeli)<\/p>\n<p> \/\/ Pagination loading animasyonunu yeniden ba\u015flatma fonksiyonu\n function restartPaginationAnimation() {\n \/\/ Aktif bullet'\u0131 bulma\n const activeBullet = document.querySelector('.swiper-pagination-bullet-active');\n if (activeBullet) {\n \/\/ Animasyonu yeniden ba\u015flatmak i\u00e7in after elementini s\u0131f\u0131rlama\n activeBullet.classList.remove('animation-reset');\n void activeBullet.offsetWidth; \/\/ Reflow'u zorla\n activeBullet.classList.add('animation-reset');\n void activeBullet.offsetWidth; \/\/ Reflow'u zorla\n activeBullet.classList.remove('animation-reset');\n }\n }<\/p>\n<p> \/\/ Tailwind breakpoint de\u011ferlerini js'de kullanmak i\u00e7in\n const breakpoints = {\n sm: 640,\n md: 768,\n lg: 1024,\n xl: 1280,\n '2xl': 1536\n };<\/p>\n<p> var swiper = new Swiper('.swiper', {\n \/\/ Zorunlu parametreler\n loop: true,\n speed: 800,\n autoplay: {\n delay: AUTOPLAY_DELAY,\n disableOnInteraction: false,\n },<\/p>\n<p> \/\/ Pagination\n pagination: {\n el: '.swiper-pagination',\n clickable: true,\n renderBullet: function (index, className) {\n return '<span class=\"' + className + ' w-8 h-1 bg-white bg-opacity-70 opacity-70 rounded-sm relative overflow-hidden transition-all duration-300 hover:opacity-100\"><\/span>';\n },\n },<\/p>\n<p> \/\/ Navigasyon tu\u015flar\u0131\n navigation: {\n nextEl: '.swiper-button-next',\n prevEl: '.swiper-button-prev',\n },<\/p>\n<p> \/\/ Fade efekti kald\u0131r\u0131ld\u0131 - normal slide ge\u00e7i\u015fi kullan\u0131lacak<\/p>\n<p> \/\/ Responsive breakpoints\n breakpoints: {\n \/\/ 768px'den b\u00fcy\u00fck ekranlar i\u00e7in\n [breakpoints.md]: {\n navigation: {\n enabled: true,\n },\n }\n }\n });<\/p>\n<p> \/\/ Swiper CSS \u00f6zelle\u015ftirmeleri i\u00e7in\n document.querySelectorAll('.swiper-pagination-bullet-active').forEach(bullet => {\n bullet.style.width = '50px';\n bullet.style.opacity = '1';\n bullet.style.backgroundColor = 'rgba(255, 255, 255, 0.3)';\n });<\/p>\n<p> \/\/ Slide de\u011fi\u015fiminde loading animasyonu yeniden ba\u015flat\n swiper.on('slideChange', function () {\n \/\/ K\u0131sa bir gecikme ile animasyon yeniden ba\u015flatma\n setTimeout(restartPaginationAnimation, 50);<\/p>\n<p> \/\/ Aktif bullet stillerini g\u00fcncelle\n document.querySelectorAll('.swiper-pagination-bullet-active').forEach(bullet => {\n bullet.style.width = '50px';\n bullet.style.opacity = '1';\n bullet.style.backgroundColor = 'rgba(255, 255, 255, 0.3)';\n });\n });<\/p>\n<p> \/\/ \u0130lk y\u00fcklemede animasyonu ba\u015flat\n setTimeout(restartPaginationAnimation, 100);<\/p>\n<p> \/\/ Kullan\u0131c\u0131 t\u0131klamalar\u0131nda yeniden animasyon i\u00e7in dinleyici\n document.querySelectorAll('.swiper-pagination-bullet').forEach(bullet => {\n bullet.addEventListener('click', function() {\n \/\/ Biraz gecikmeyle animasyonu ba\u015flat (class de\u011fi\u015fimi i\u00e7in)\n setTimeout(restartPaginationAnimation, 50);\n });\n });<\/p>\n<p> \/\/ Navigasyon butonlar\u0131na t\u0131kland\u0131\u011f\u0131nda da animasyonu yeniden ba\u015flat\n document.querySelector('.swiper-button-next').addEventListener('click', function() {\n setTimeout(restartPaginationAnimation, 50);\n });<\/p>\n<p> document.querySelector('.swiper-button-prev').addEventListener('click', function() {\n setTimeout(restartPaginationAnimation, 50);\n });\n });\n <\/script><br \/>\n<\/body><br \/>\n<\/html><\/p>\n","protected":false},"featured_media":0,"template":"","landing_category":[],"landing_technology":[],"landing_library":[],"class_list":["post-1237","landing_page","type-landing_page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/landing_page\/1237","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/landing_page"}],"about":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/types\/landing_page"}],"wp:attachment":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/media?parent=1237"}],"wp:term":[{"taxonomy":"landing_category","embeddable":true,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/landing_category?post=1237"},{"taxonomy":"landing_technology","embeddable":true,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/landing_technology?post=1237"},{"taxonomy":"landing_library","embeddable":true,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/landing_library?post=1237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1237,"date":"2025-03-16T03:35:45","date_gmt":"2025-03-16T00:35:45","guid":{"rendered":"https:\/\/mudosdigital.com\/tr\/?p=1237"},"modified":"2025-03-16T03:39:12","modified_gmt":"2025-03-16T00:39:12","slug":"saglik-slider-bileseni","status":"publish","type":"landing_page","link":"https:\/\/mudosdigital.com\/tr\/ui-library\/saglik-slider-bileseni\/","title":{"rendered":"Sa\u011fl\u0131k Slider Bile\u015feni"},"content":{"rendered":"

\n
\n
\n
\n
\n Sa\u011fl\u0131k Hero Slider – Tailwind CSS<\/title><br \/>\n <br \/>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script><br \/>\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Swiper\/8.4.7\/swiper-bundle.min.css\" \/>\n <br \/>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/iconify\/2.2.1\/iconify.min.js\"><\/script><\/p>\n<style>\n @keyframes paginationProgress {\n 0% {\n width: 0%;\n }\n 100% {\n width: 100%;\n }\n }<\/p>\n<p> .swiper-pagination-bullet::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 0;\n background-color: #10B981;\n opacity: 0;\n }<\/p>\n<p> .swiper-pagination-bullet-active::after {\n opacity: 1;\n animation: paginationProgress 5s linear forwards;\n }\n <\/style>\n<p><\/head><br \/>\n<body class=\"bg-gray-50\"><\/p>\n<div class=\"relative w-full h-screen overflow-hidden\">\n<div class=\"swiper w-full h-full\">\n<div class=\"swiper-wrapper\">\n <\/p>\n<div class=\"swiper-slide relative flex items-center bg-cover bg-center\">\n<div class=\"absolute top-0 left-0 w-full h-full bg-gradient-to-r from-blue-500 to-blue-700\"><\/div>\n<div class=\"absolute top-0 left-0 w-full h-full bg-black bg-opacity-40\"><\/div>\n<div class=\"relative max-w-7xl mx-auto px-8 md:px-12 lg:px-16 text-white z-10\">\n <\/p>\n<div class=\"flex flex-wrap items-center gap-3 mb-4\">\n <span class=\"text-sm bg-white bg-opacity-20 px-3 py-1 rounded-full\">15 Mart 2025<\/span><br \/>\n <span class=\"text-sm bg-emerald-500 px-3 py-1 rounded-full\">Genel Sa\u011fl\u0131k<\/span>\n <\/div>\n<div class=\"flex items-center justify-center w-20 h-20 mb-5 bg-white bg-opacity-20 rounded-full\">\n <span class=\"iconify text-white\" data-icon=\"mdi:heart-pulse\" data-width=\"40\" data-height=\"40\"><\/span>\n <\/div>\n<h2 class=\"text-4xl md:text-5xl font-bold mb-5 text-white shadow-md\">Sa\u011fl\u0131kl\u0131 Ya\u015fam \u0130\u00e7in Ad\u0131m At\u0131n<\/h2>\n<p class=\"text-lg max-w-xl mb-8 leading-relaxed\">Uzman kadromuz ve modern teknolojimiz ile siz ve aileniz i\u00e7in en iyi sa\u011fl\u0131k hizmetlerini sunuyoruz. Sa\u011fl\u0131\u011f\u0131n\u0131z bizim \u00f6nceli\u011fimizdir.<\/p>\n<p> <a href=\"#\" class=\"inline-block px-8 py-4 bg-emerald-500 hover:bg-emerald-600 text-white font-semibold uppercase rounded-full transition duration-300\">Randevu Al<\/a>\n <\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"swiper-slide relative flex items-center bg-cover bg-center\">\n<div class=\"absolute top-0 left-0 w-full h-full bg-gradient-to-r from-blue-500 to-blue-700\"><\/div>\n<div class=\"absolute top-0 left-0 w-full h-full bg-black bg-opacity-40\"><\/div>\n<div class=\"relative max-w-7xl mx-auto px-6 md:px-24 text-white z-10\">\n <\/p>\n<div class=\"flex flex-wrap items-center gap-3 mb-4\">\n <span class=\"text-sm bg-white bg-opacity-20 px-3 py-1 rounded-full\">10 Mart 2025<\/span><br \/>\n <span class=\"text-sm bg-emerald-500 px-3 py-1 rounded-full\">Koruyucu Sa\u011fl\u0131k<\/span>\n <\/div>\n<div class=\"flex items-center justify-center w-20 h-20 mb-5 bg-white bg-opacity-20 rounded-full\">\n <span class=\"iconify text-white\" data-icon=\"mdi:stethoscope\" data-width=\"40\" data-height=\"40\"><\/span>\n <\/div>\n<h2 class=\"text-4xl md:text-5xl font-bold mb-5 text-white shadow-md\">\u00d6nleyici Sa\u011fl\u0131k Hizmetleri<\/h2>\n<p class=\"text-lg max-w-xl mb-8 leading-relaxed\">Hastal\u0131klar\u0131 tedavi etmek kadar \u00f6nlemek de \u00f6nemlidir. D\u00fczenli check-up ve tarama programlar\u0131m\u0131z ile sa\u011fl\u0131\u011f\u0131n\u0131z\u0131 koruyun.<\/p>\n<p> <a href=\"#\" class=\"inline-block px-8 py-4 bg-emerald-500 hover:bg-emerald-600 text-white font-semibold uppercase rounded-full transition duration-300\">Bilgi Al<\/a>\n <\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"swiper-slide relative flex items-center bg-cover bg-center\">\n<div class=\"absolute top-0 left-0 w-full h-full bg-gradient-to-r from-blue-500 to-blue-700\"><\/div>\n<div class=\"absolute top-0 left-0 w-full h-full bg-black bg-opacity-40\"><\/div>\n<div class=\"relative max-w-7xl mx-auto px-6 md:px-24 text-white z-10\">\n <\/p>\n<div class=\"flex flex-wrap items-center gap-3 mb-4\">\n <span class=\"text-sm bg-white bg-opacity-20 px-3 py-1 rounded-full\">5 Mart 2025<\/span><br \/>\n <span class=\"text-sm bg-emerald-500 px-3 py-1 rounded-full\">Dijital Sa\u011fl\u0131k<\/span>\n <\/div>\n<div class=\"flex items-center justify-center w-20 h-20 mb-5 bg-white bg-opacity-20 rounded-full\">\n <span class=\"iconify text-white\" data-icon=\"mdi:cellphone\" data-width=\"40\" data-height=\"40\"><\/span>\n <\/div>\n<h2 class=\"text-4xl md:text-5xl font-bold mb-5 text-white shadow-md\">Dijital Sa\u011fl\u0131k \u00c7\u00f6z\u00fcmleri<\/h2>\n<p class=\"text-lg max-w-xl mb-8 leading-relaxed\">Mobil uygulamam\u0131z ve online dan\u0131\u015fmanl\u0131k hizmetlerimiz ile sa\u011fl\u0131k hizmetlerine her an her yerden eri\u015fim sa\u011flay\u0131n.<\/p>\n<p> <a href=\"#\" class=\"inline-block px-8 py-4 bg-emerald-500 hover:bg-emerald-600 text-white font-semibold uppercase rounded-full transition duration-300\">Uygulamay\u0131 \u0130ndir<\/a>\n <\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"swiper-slide relative flex items-center bg-cover bg-center\">\n<div class=\"absolute top-0 left-0 w-full h-full bg-gradient-to-r from-blue-500 to-blue-700\"><\/div>\n<div class=\"absolute top-0 left-0 w-full h-full bg-black bg-opacity-40\"><\/div>\n<div class=\"relative max-w-7xl mx-auto px-6 md:px-24 text-white z-10\">\n <\/p>\n<div class=\"flex flex-wrap items-center gap-3 mb-4\">\n <span class=\"text-sm bg-white bg-opacity-20 px-3 py-1 rounded-full\">1 Mart 2025<\/span><br \/>\n <span class=\"text-sm bg-emerald-500 px-3 py-1 rounded-full\">Beslenme<\/span>\n <\/div>\n<div class=\"flex items-center justify-center w-20 h-20 mb-5 bg-white bg-opacity-20 rounded-full\">\n <span class=\"iconify text-white\" data-icon=\"mdi:food-apple\" data-width=\"40\" data-height=\"40\"><\/span>\n <\/div>\n<h2 class=\"text-4xl md:text-5xl font-bold mb-5 text-white shadow-md\">Beslenme ve Diyet Dan\u0131\u015fmanl\u0131\u011f\u0131<\/h2>\n<p class=\"text-lg max-w-xl mb-8 leading-relaxed\">Uzman diyetisyenlerimiz ile sa\u011fl\u0131kl\u0131 beslenme al\u0131\u015fkanl\u0131klar\u0131 edinebilir, ki\u015fiselle\u015ftirilmi\u015f diyet programlar\u0131 ile hedeflerinize ula\u015fabilirsiniz.<\/p>\n<p> <a href=\"#\" class=\"inline-block px-8 py-4 bg-emerald-500 hover:bg-emerald-600 text-white font-semibold uppercase rounded-full transition duration-300\">Detayl\u0131 Bilgi<\/a>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"swiper-pagination absolute bottom-16 left-0 w-full flex justify-center items-center gap-3 mb-3\"><\/div>\n<div class=\"swiper-button-next hidden md:flex bg-black bg-opacity-30 w-12 h-12 rounded-full transition duration-300 hover:bg-opacity-50\"><\/div>\n<div class=\"swiper-button-prev hidden md:flex bg-black bg-opacity-30 w-12 h-12 rounded-full transition duration-300 hover:bg-opacity-50\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <br \/>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Swiper\/8.4.7\/swiper-bundle.min.js\"><\/script><br \/>\n <script>\n document.addEventListener('DOMContentLoaded', function() {\n const AUTOPLAY_DELAY = 5000; \/\/ 5 saniye (CSS animasyon s\u00fcresiyle e\u015fle\u015fmeli)<\/p>\n<p> \/\/ Pagination loading animasyonunu yeniden ba\u015flatma fonksiyonu\n function restartPaginationAnimation() {\n \/\/ Aktif bullet'\u0131 bulma\n const activeBullet = document.querySelector('.swiper-pagination-bullet-active');\n if (activeBullet) {\n \/\/ Animasyonu yeniden ba\u015flatmak i\u00e7in after elementini s\u0131f\u0131rlama\n activeBullet.classList.remove('animation-reset');\n void activeBullet.offsetWidth; \/\/ Reflow'u zorla\n activeBullet.classList.add('animation-reset');\n void activeBullet.offsetWidth; \/\/ Reflow'u zorla\n activeBullet.classList.remove('animation-reset');\n }\n }<\/p>\n<p> \/\/ Tailwind breakpoint de\u011ferlerini js'de kullanmak i\u00e7in\n const breakpoints = {\n sm: 640,\n md: 768,\n lg: 1024,\n xl: 1280,\n '2xl': 1536\n };<\/p>\n<p> var swiper = new Swiper('.swiper', {\n \/\/ Zorunlu parametreler\n loop: true,\n speed: 800,\n autoplay: {\n delay: AUTOPLAY_DELAY,\n disableOnInteraction: false,\n },<\/p>\n<p> \/\/ Pagination\n pagination: {\n el: '.swiper-pagination',\n clickable: true,\n renderBullet: function (index, className) {\n return '<span class=\"' + className + ' w-8 h-1 bg-white bg-opacity-70 opacity-70 rounded-sm relative overflow-hidden transition-all duration-300 hover:opacity-100\"><\/span>';\n },\n },<\/p>\n<p> \/\/ Navigasyon tu\u015flar\u0131\n navigation: {\n nextEl: '.swiper-button-next',\n prevEl: '.swiper-button-prev',\n },<\/p>\n<p> \/\/ Fade efekti kald\u0131r\u0131ld\u0131 - normal slide ge\u00e7i\u015fi kullan\u0131lacak<\/p>\n<p> \/\/ Responsive breakpoints\n breakpoints: {\n \/\/ 768px'den b\u00fcy\u00fck ekranlar i\u00e7in\n [breakpoints.md]: {\n navigation: {\n enabled: true,\n },\n }\n }\n });<\/p>\n<p> \/\/ Swiper CSS \u00f6zelle\u015ftirmeleri i\u00e7in\n document.querySelectorAll('.swiper-pagination-bullet-active').forEach(bullet => {\n bullet.style.width = '50px';\n bullet.style.opacity = '1';\n bullet.style.backgroundColor = 'rgba(255, 255, 255, 0.3)';\n });<\/p>\n<p> \/\/ Slide de\u011fi\u015fiminde loading animasyonu yeniden ba\u015flat\n swiper.on('slideChange', function () {\n \/\/ K\u0131sa bir gecikme ile animasyon yeniden ba\u015flatma\n setTimeout(restartPaginationAnimation, 50);<\/p>\n<p> \/\/ Aktif bullet stillerini g\u00fcncelle\n document.querySelectorAll('.swiper-pagination-bullet-active').forEach(bullet => {\n bullet.style.width = '50px';\n bullet.style.opacity = '1';\n bullet.style.backgroundColor = 'rgba(255, 255, 255, 0.3)';\n });\n });<\/p>\n<p> \/\/ \u0130lk y\u00fcklemede animasyonu ba\u015flat\n setTimeout(restartPaginationAnimation, 100);<\/p>\n<p> \/\/ Kullan\u0131c\u0131 t\u0131klamalar\u0131nda yeniden animasyon i\u00e7in dinleyici\n document.querySelectorAll('.swiper-pagination-bullet').forEach(bullet => {\n bullet.addEventListener('click', function() {\n \/\/ Biraz gecikmeyle animasyonu ba\u015flat (class de\u011fi\u015fimi i\u00e7in)\n setTimeout(restartPaginationAnimation, 50);\n });\n });<\/p>\n<p> \/\/ Navigasyon butonlar\u0131na t\u0131kland\u0131\u011f\u0131nda da animasyonu yeniden ba\u015flat\n document.querySelector('.swiper-button-next').addEventListener('click', function() {\n setTimeout(restartPaginationAnimation, 50);\n });<\/p>\n<p> document.querySelector('.swiper-button-prev').addEventListener('click', function() {\n setTimeout(restartPaginationAnimation, 50);\n });\n });\n <\/script><br \/>\n<\/body><br \/>\n<\/html><\/p>\n","protected":false},"featured_media":0,"template":"","landing_category":[],"landing_technology":[],"landing_library":[],"class_list":["post-1237","landing_page","type-landing_page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/landing_page\/1237","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/landing_page"}],"about":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/types\/landing_page"}],"wp:attachment":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/media?parent=1237"}],"wp:term":[{"taxonomy":"landing_category","embeddable":true,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/landing_category?post=1237"},{"taxonomy":"landing_technology","embeddable":true,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/landing_technology?post=1237"},{"taxonomy":"landing_library","embeddable":true,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/landing_library?post=1237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}