{"id":39146,"date":"2026-02-15T12:40:41","date_gmt":"2026-02-15T09:40:41","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=39146"},"modified":"2026-02-15T12:40:41","modified_gmt":"2026-02-15T09:40:41","slug":"portfoy-resim-karoseli-ve-senkronize-kaydiricilar-ile-web-sayfasinda-interaktif-bir-deneyim-olusturma","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/portfoy-resim-karoseli-ve-senkronize-kaydiricilar-ile-web-sayfasinda-interaktif-bir-deneyim-olusturma\/","title":{"rendered":"Portf\u00f6y Resim Karoseli ve Senkronize Kayd\u0131r\u0131c\u0131lar ile Web Sayfas\u0131nda \u0130nteraktif Bir Deneyim Olu\u015fturma"},"content":{"rendered":"<p><body><\/p>\n<h2>Portf\u00f6y Resim Karoseli ve Senkronize Kayd\u0131r\u0131c\u0131lar ile Web Sayfas\u0131nda \u0130nteraktif Bir Deneyim Olu\u015fturma<\/h2>\n<p>Web sayfalar\u0131nda g\u00f6rsel i\u00e7eri\u011fi etkili bir \u015fekilde sunmak, kullan\u0131c\u0131 deneyimi a\u00e7\u0131s\u0131ndan kritik \u00f6neme sahiptir. \u00d6zellikle bir portf\u00f6y\u00fc sergilerken, ziyaret\u00e7ilerin \u00e7al\u0131\u015fmalar\u0131n\u0131z\u0131 kolayca ke\u015ffedebilmesi ve etkile\u015fimde bulunabilmesi, projelerinizin de\u011ferini art\u0131r\u0131r. Bu ba\u011flamda, senkronize kayd\u0131r\u0131c\u0131lara sahip bir resim karoseli (carousel), standart bir galeriye k\u0131yasla \u00e7ok daha dinamik ve kullan\u0131c\u0131 dostu bir \u00e7\u00f6z\u00fcm sunar. Bu makalede, modern web teknolojilerini (HTML, CSS, JavaScript) kullanarak, b\u00fcy\u00fck bir ana resim kayd\u0131r\u0131c\u0131s\u0131 ile alt\u0131nda yer alan k\u00fc\u00e7\u00fck resim (thumbnail) kayd\u0131r\u0131c\u0131s\u0131n\u0131n senkronize bir \u015fekilde \u00e7al\u0131\u015ft\u0131\u011f\u0131 bir portf\u00f6y karoseli nas\u0131l olu\u015fturulaca\u011f\u0131n\u0131 ad\u0131m ad\u0131m inceleyece\u011fiz.<\/p>\n<h3>Giri\u015f: Neden Senkronize Kayd\u0131r\u0131c\u0131lar?<\/h3>\n<p>Bir portf\u00f6y web sitesi, g\u00f6rsel odakl\u0131 bir i\u00e7erik sunar. Ziyaret\u00e7ilerinizin projelerinizi detayl\u0131 bir \u015fekilde incelemesini sa\u011flamak i\u00e7in, b\u00fcy\u00fck ve dikkat \u00e7ekici bir ana resim alan\u0131 ve bu resimler aras\u0131nda kolayca ge\u00e7i\u015f yapmalar\u0131n\u0131 sa\u011flayacak bir navigasyon mekanizmas\u0131 gereklidir. Geleneksel navigasyon oklar\u0131 veya noktalar\u0131 yeterli olsa da, k\u00fc\u00e7\u00fck resimlerden olu\u015fan bir alt kayd\u0131r\u0131c\u0131, kullan\u0131c\u0131lara t\u00fcm g\u00f6rselleri bir bak\u0131\u015fta g\u00f6rme ve do\u011frudan istedikleri g\u00f6rsele atlama imkan\u0131 sunar.<\/p>\n<p>Senkronize kayd\u0131r\u0131c\u0131lar, bu iki bile\u015fenin birbiriyle uyum i\u00e7inde \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar. Ana kayd\u0131r\u0131c\u0131da bir resim de\u011fi\u015fti\u011finde, alt kayd\u0131r\u0131c\u0131daki ilgili k\u00fc\u00e7\u00fck resim otomatik olarak vurgulan\u0131r ve hatta gerekirse kayd\u0131r\u0131l\u0131r. Ayn\u0131 \u015fekilde, alt kayd\u0131r\u0131c\u0131daki bir k\u00fc\u00e7\u00fck resme t\u0131kland\u0131\u011f\u0131nda, ana kayd\u0131r\u0131c\u0131 ilgili b\u00fcy\u00fck resmi g\u00f6sterir. Bu \u00e7ift y\u00f6nl\u00fc senkronizasyon, kullan\u0131c\u0131ya sezgisel ve kesintisiz bir gezinme deneyimi sunar, b\u00f6ylece dikkat da\u011f\u0131lmadan i\u00e7eri\u011fe odaklanabilirler. Bu yakla\u015f\u0131m, sadece estetik bir avantaj sa\u011flamakla kalmaz, ayn\u0131 zamanda eri\u015filebilirli\u011fi ve genel kullan\u0131labilirli\u011fi de \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r.<\/p>\n<h3>Temel Yap\u0131 Ta\u015flar\u0131: HTML, CSS ve JavaScript<\/h3>\n<p>Bu interaktif karoseli olu\u015fturmak i\u00e7in \u00fc\u00e7 temel web teknolojisini kullanaca\u011f\u0131z:<\/p>\n<p>*   <strong>HTML (HyperText Markup Language):<\/strong> Karoselin iskeletini, yani ana resimlerin, k\u00fc\u00e7\u00fck resimlerin, navigasyon oklar\u0131n\u0131n ve di\u011fer yap\u0131sal elemanlar\u0131n yerle\u015fimini tan\u0131mlamak i\u00e7in kullan\u0131l\u0131r.<br \/>\n*   <strong>CSS (Cascading Style Sheets):<\/strong> Karoselin g\u00f6rsel g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc, boyutlar\u0131n\u0131, renklerini, ge\u00e7i\u015f efektlerini ve d\u00fczenini stilize etmek i\u00e7in kullan\u0131l\u0131r. <code>flexbox<\/code> veya <code>grid<\/code> gibi modern CSS \u00f6zellikleri, duyarl\u0131 bir d\u00fczen olu\u015fturmak i\u00e7in idealdir.<br \/>\n*   <strong>JavaScript:<\/strong> Karoselin dinamik davran\u0131\u015f\u0131n\u0131, yani resimler aras\u0131nda kayd\u0131rma mant\u0131\u011f\u0131n\u0131, navigasyon olaylar\u0131n\u0131, senkronizasyonu ve iste\u011fe ba\u011fl\u0131 olarak otomatik oynatma i\u015flevselli\u011fini sa\u011flamak i\u00e7in kullan\u0131l\u0131r.<\/p>\n<p>\u015eimdi, bu bile\u015fenleri ad\u0131m ad\u0131m nas\u0131l entegre edece\u011fimizi inceleyelim.<\/p>\n<h3>HTML Yap\u0131s\u0131n\u0131 Olu\u015fturma<\/h3>\n<p>Karoselimiz i\u00e7in temel HTML yap\u0131s\u0131, bir ana kapsay\u0131c\u0131 i\u00e7inde iki ayr\u0131 kayd\u0131r\u0131c\u0131 (biri b\u00fcy\u00fck resimler, di\u011feri k\u00fc\u00e7\u00fck resimler i\u00e7in) ve navigasyon oklar\u0131n\u0131 i\u00e7erecektir.<\/p>\n<pre><code class=\"language-html\"><div class=\"carousel-container\">\n    <div class=\"main-slider-wrapper\">\n        <div class=\"main-slider\">\n            <img decoding=\"async\" src=\"images\/project1-full.jpg\" alt=\"Proje 1 Tam Ekran\">\n            <img decoding=\"async\" src=\"images\/project2-full.jpg\" alt=\"Proje 2 Tam Ekran\">\n            <img decoding=\"async\" src=\"images\/project3-full.jpg\" alt=\"Proje 3 Tam Ekran\">\n            <img decoding=\"async\" src=\"images\/project4-full.jpg\" alt=\"Proje 4 Tam Ekran\">\n            <!-- Daha fazla ana resim buraya eklenebilir -->\n        <\/div>\n        <button class=\"nav-button prev-button\">\u276e<\/button>\n        <button class=\"nav-button next-button\">\u276f<\/button>\n    <\/div>\n\n    <div class=\"thumbnail-slider-wrapper\">\n        <div class=\"thumbnail-slider\">\n            <img decoding=\"async\" src=\"images\/project1-thumb.jpg\" alt=\"Proje 1 K\u00fc\u00e7\u00fck Resim\" class=\"thumbnail active\">\n            <img decoding=\"async\" src=\"images\/project2-thumb.jpg\" alt=\"Proje 2 K\u00fc\u00e7\u00fck Resim\" class=\"thumbnail\">\n            <img decoding=\"async\" src=\"images\/project3-thumb.jpg\" alt=\"Proje 3 K\u00fc\u00e7\u00fck Resim\" class=\"thumbnail\">\n            <img decoding=\"async\" src=\"images\/project4-thumb.jpg\" alt=\"Proje 4 K\u00fc\u00e7\u00fck Resim\" class=\"thumbnail\">\n            <!-- Daha fazla k\u00fc\u00e7\u00fck resim buraya eklenebilir -->\n        <\/div>\n        <button class=\"thumb-nav-button thumb-prev-button\">\u2039<\/button>\n        <button class=\"thumb-nav-button thumb-next-button\">\u203a<\/button>\n    <\/div>\n<\/div><\/code><\/pre>\n<p>Bu yap\u0131da:<br \/>\n*   <code>.carousel-container<\/code>: T\u00fcm karoseli saran ana kapsay\u0131c\u0131d\u0131r.<br \/>\n*   <code>.main-slider-wrapper<\/code>: Ana resim kayd\u0131r\u0131c\u0131s\u0131n\u0131 ve ona ait navigasyon butonlar\u0131n\u0131 sarmalar.<br \/>\n*   <code>.main-slider<\/code>: \u0130\u00e7inde b\u00fcy\u00fck resimlerin bulundu\u011fu, yatay olarak kayd\u0131r\u0131lacak olan aland\u0131r. Her <code><img><\/code> etiketi bir slayt\u0131 temsil eder.<br \/>\n*   <code>.nav-button<\/code>: Ana kayd\u0131r\u0131c\u0131 i\u00e7in &#8220;\u00f6nceki&#8221; ve &#8220;sonraki&#8221; butonlar\u0131d\u0131r.<br \/>\n*   <code>.thumbnail-slider-wrapper<\/code>: K\u00fc\u00e7\u00fck resim kayd\u0131r\u0131c\u0131s\u0131n\u0131 ve ona ait navigasyon butonlar\u0131n\u0131 sarmalar.<br \/>\n*   <code>.thumbnail-slider<\/code>: \u0130\u00e7inde k\u00fc\u00e7\u00fck resimlerin bulundu\u011fu, yatay olarak kayd\u0131r\u0131lacak olan aland\u0131r. Her <code><img><\/code> etiketi bir k\u00fc\u00e7\u00fck resmi temsil eder. <code>active<\/code> s\u0131n\u0131f\u0131, o anki aktif k\u00fc\u00e7\u00fck resmi belirtmek i\u00e7in kullan\u0131l\u0131r.<br \/>\n*   <code>.thumb-nav-button<\/code>: K\u00fc\u00e7\u00fck resim kayd\u0131r\u0131c\u0131s\u0131 i\u00e7in &#8220;\u00f6nceki&#8221; ve &#8220;sonraki&#8221; butonlar\u0131d\u0131r (iste\u011fe ba\u011fl\u0131, k\u00fc\u00e7\u00fck resimlerin de kayd\u0131r\u0131labilir olmas\u0131 durumunda).<\/p>\n<h3>CSS ile G\u00f6rselle\u015ftirme ve Temel D\u00fczen<\/h3>\n<p>\u015eimdi, HTML yap\u0131m\u0131za stil vererek karoselin g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc ve temel kayd\u0131rma mekanizmas\u0131n\u0131 olu\u015ftural\u0131m.<\/p>\n<pre><code class=\"language-css\">.carousel-container {\n    max-width: 900px;\n    margin: 40px auto;\n    font-family: Arial, sans-serif;\n    position: relative;\n}\n\n.main-slider-wrapper {\n    position: relative;\n    width: 100%;\n    overflow: hidden; \/<em> Sadece bir resmi g\u00f6ster, di\u011ferlerini gizle <\/em>\/\n    border: 1px solid #ddd;\n    box-shadow: 0 4px 8px rgba(0,0,0,0.1);\n    margin-bottom: 15px;\n}\n\n.main-slider {\n    display: flex; \/<em> Resimleri yan yana diz <\/em>\/\n    width: 100%; \/<em> JavaScript ile g\u00fcncellenecek <\/em>\/\n    transition: transform 0.5s ease-in-out; \/<em> Kayd\u0131rma animasyonu <\/em>\/\n}\n\n.main-slider img {\n    width: 100%;\n    height: 450px; \/<em> Sabit bir y\u00fckseklik verilebilir <\/em>\/\n    object-fit: cover; \/<em> Resmi kapsay\u0131c\u0131ya s\u0131\u011fd\u0131r <\/em>\/\n    flex-shrink: 0; \/<em> Resimlerin k\u00fc\u00e7\u00fclmesini engelle <\/em>\/\n}\n\n.nav-button {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    background-color: rgba(0, 0, 0, 0.5);\n    color: white;\n    border: none;\n    padding: 10px 15px;\n    cursor: pointer;\n    font-size: 24px;\n    z-index: 10;\n    transition: background-color 0.3s ease;\n}\n\n.nav-button:hover {\n    background-color: rgba(0, 0, 0, 0.7);\n}\n\n.prev-button {\n    left: 10px;\n}\n\n.next-button {\n    right: 10px;\n}\n\n.thumbnail-slider-wrapper {\n    position: relative;\n    width: 100%;\n    overflow: hidden; \/<em> K\u00fc\u00e7\u00fck resimlerin de kayd\u0131r\u0131labilir olmas\u0131n\u0131 sa\u011fla <\/em>\/\n}\n\n.thumbnail-slider {\n    display: flex;\n    gap: 10px; \/<em> K\u00fc\u00e7\u00fck resimler aras\u0131nda bo\u015fluk <\/em>\/\n    padding: 5px 0;\n    transition: transform 0.3s ease-out; \/<em> K\u00fc\u00e7\u00fck resim kayd\u0131rma animasyonu <\/em>\/\n}\n\n.thumbnail-slider img {\n    width: 100px; \/<em> K\u00fc\u00e7\u00fck resim geni\u015fli\u011fi <\/em>\/\n    height: 75px; \/<em> K\u00fc\u00e7\u00fck resim y\u00fcksekli\u011fi <\/em>\/\n    object-fit: cover;\n    cursor: pointer;\n    border: 2px solid transparent;\n    transition: border-color 0.3s ease, transform 0.2s ease;\n    flex-shrink: 0;\n}\n\n.thumbnail-slider img:hover {\n    transform: scale(1.05);\n}\n\n.thumbnail-slider img.active {\n    border-color: #007bff; \/<em> Aktif k\u00fc\u00e7\u00fck resmi vurgula <\/em>\/\n    box-shadow: 0 0 8px rgba(0, 123, 255, 0.6);\n}\n\n.thumb-nav-button {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    background-color: rgba(0, 0, 0, 0.3);\n    color: white;\n    border: none;\n    padding: 5px 8px;\n    cursor: pointer;\n    font-size: 18px;\n    z-index: 5;\n    transition: background-color 0.3s ease;\n}\n\n.thumb-nav-button:hover {\n    background-color: rgba(0, 0, 0, 0.5);\n}\n\n.thumb-prev-button {\n    left: 0;\n}\n\n.thumb-next-button {\n    right: 0;\n}\n\n\/<em> Duyarl\u0131 tasar\u0131m i\u00e7in medya sorgular\u0131 <\/em>\/\n@media (max-width: 768px) {\n    .main-slider img {\n        height: 300px;\n    }\n    .thumbnail-slider img {\n        width: 80px;\n        height: 60px;\n    }\n    .nav-button {\n        padding: 8px 12px;\n        font-size: 20px;\n    }\n}\n\n@media (max-width: 480px) {\n    .main-slider img {\n        height: 200px;\n    }\n    .thumbnail-slider img {\n        width: 60px;\n        height: 45px;\n    }\n    .nav-button {\n        padding: 5px 10px;\n        font-size: 18px;\n    }\n    .prev-button { left: 5px; }\n    .next-button { right: 5px; }\n}<\/code><\/pre>\n<p>Bu CSS kodunda dikkat edilmesi gerekenler:<br \/>\n*   <code>overflow: hidden<\/code>: Hem ana hem de k\u00fc\u00e7\u00fck resim kayd\u0131r\u0131c\u0131lar\u0131n\u0131n kapsay\u0131c\u0131lar\u0131nda bu \u00f6zellik, sadece o anki g\u00f6r\u00fcnt\u00fclenebilir alan\u0131 g\u00f6sterir ve kayd\u0131r\u0131lacak i\u00e7eri\u011fi gizler.<br \/>\n*   <code>display: flex<\/code>: Resimleri yatay olarak yan yana s\u0131ralamak i\u00e7in kullan\u0131l\u0131r.<br \/>\n*   <code>flex-shrink: 0<\/code>: Resimlerin, kapsay\u0131c\u0131lar\u0131 i\u00e7indeki bo\u015flu\u011fa g\u00f6re k\u00fc\u00e7\u00fclmesini engeller, b\u00f6ylece her resim kendi tam geni\u015fli\u011fini korur.<br \/>\n*   <code>transform: translateX()<\/code>: JavaScript ile kayd\u0131rma animasyonunu sa\u011flamak i\u00e7in kullan\u0131lacak ana CSS \u00f6zelli\u011fidir. <code>transition<\/code> \u00f6zelli\u011fi, bu de\u011fi\u015fimi yumu\u015fak bir animasyonla yapar.<br \/>\n*   <code>object-fit: cover<\/code>: Resimlerin en boy oran\u0131n\u0131 bozmadan kapsay\u0131c\u0131lar\u0131n\u0131 doldurmas\u0131n\u0131 sa\u011flar.<br \/>\n*   <code>.thumbnail.active<\/code>: Aktif olan k\u00fc\u00e7\u00fck resmin belirgin bir \u00e7er\u00e7eve veya g\u00f6lge ile vurgulanmas\u0131n\u0131 sa\u011flar.<\/p>\n<h3>JavaScript ile Dinamik \u0130\u015flevsellik<\/h3>\n<p>Karoselimizin beyni JavaScript olacakt\u0131r. Kayd\u0131rma mant\u0131\u011f\u0131n\u0131, navigasyon olaylar\u0131n\u0131, senkronizasyonu ve iste\u011fe ba\u011fl\u0131 otomatik oynatmay\u0131 bu b\u00f6l\u00fcmde y\u00f6netece\u011fiz.<\/p>\n<pre><code class=\"language-javascript\">document.addEventListener('DOMContentLoaded', () => {\n    \/\/ DOM elemanlar\u0131n\u0131 se\u00e7me\n    const mainSlider = document.querySelector('.main-slider');\n    const mainImages = document.querySelectorAll('.main-slider img');\n    const prevButton = document.querySelector('.prev-button');\n    const nextButton = document.querySelector('.next-button');\n\n    const thumbnailSlider = document.querySelector('.thumbnail-slider');\n    const thumbnails = document.querySelectorAll('.thumbnail-slider img');\n    const thumbPrevButton = document.querySelector('.thumb-prev-button');\n    const thumbNextButton = document.querySelector('.thumb-next-button');\n\n    \/\/ Durum de\u011fi\u015fkenleri\n    let currentIndex = 0;\n    let mainSlideWidth = mainImages[0].clientWidth; \/\/ Ana resim geni\u015fli\u011fi\n    let thumbnailWidth = thumbnails[0].clientWidth + 10; \/\/ K\u00fc\u00e7\u00fck resim geni\u015fli\u011fi + gap\n\n    \/\/ Ana kayd\u0131r\u0131c\u0131n\u0131n geni\u015fli\u011fini ayarla (t\u00fcm resimleri yan yana s\u0131\u011fd\u0131racak kadar)\n    mainSlider.style.width = <code>${mainImages.length * mainSlideWidth}px<\/code>;\n\n    \/\/ Kayd\u0131r\u0131c\u0131lar\u0131 belirli bir indekse ta\u015f\u0131yan fonksiyon\n    function goToSlide(index) {\n        \/\/ Ge\u00e7erli indeksi kontrol et\n        if (index < 0) {\n            currentIndex = mainImages.length - 1;\n        } else if (index >= mainImages.length) {\n            currentIndex = 0;\n        } else {\n            currentIndex = index;\n        }\n\n        \/\/ Ana kayd\u0131r\u0131c\u0131y\u0131 g\u00fcncelle\n        const mainOffset = -currentIndex * mainSlideWidth;\n        mainSlider.style.transform = <code>translateX(${mainOffset}px)<\/code>;\n\n        \/\/ K\u00fc\u00e7\u00fck resimlerin aktif durumunu g\u00fcncelle\n        thumbnails.forEach((thumb, i) => {\n            if (i === currentIndex) {\n                thumb.classList.add('active');\n            } else {\n                thumb.classList.remove('active');\n            }\n        });\n\n        \/\/ K\u00fc\u00e7\u00fck resim kayd\u0131r\u0131c\u0131s\u0131n\u0131 senkronize et (aktif k\u00fc\u00e7\u00fck resmi g\u00f6r\u00fcn\u00fcrde tut)\n        const thumbnailSliderWrapper = document.querySelector('.thumbnail-slider-wrapper');\n        const wrapperWidth = thumbnailSliderWrapper.clientWidth;\n        const visibleThumbnails = Math.floor(wrapperWidth \/ thumbnailWidth);\n        \n        \/\/ Aktif thumbnail'\u0131n ba\u015flang\u0131\u00e7 pozisyonu\n        const activeThumbPosition = currentIndex * thumbnailWidth;\n        \n        \/\/ Thumbnail slider'\u0131n kayd\u0131rmas\u0131 gereken maksimum sol pozisyon\n        const maxScrollLeft = (thumbnails.length * thumbnailWidth) - wrapperWidth;\n\n        let thumbOffset = 0;\n        if (activeThumbPosition + thumbnailWidth > wrapperWidth) {\n            \/\/ Aktif thumbnail sa\u011fa do\u011fru kayd\u0131r\u0131lmas\u0131 gerekiyorsa\n            thumbOffset = -(activeThumbPosition - (wrapperWidth - thumbnailWidth));\n            if (thumbOffset > 0) thumbOffset = 0; \/\/ Ba\u015fa d\u00f6nme durumunu engelle\n        }\n        \n        \/\/ E\u011fer aktif thumbnail \u00e7ok soldaysa, slider'\u0131 sola do\u011fru kayd\u0131r\n        if (activeThumbPosition < -parseInt(thumbnailSlider.style.transform.replace('translateX(', '').replace('px)', '') || 0)) {\n             thumbOffset = -activeThumbPosition;\n        }\n\n        \/\/ Offset'i s\u0131n\u0131rlar i\u00e7inde tut\n        if (thumbOffset > 0) thumbOffset = 0;\n        if (thumbOffset < -maxScrollLeft) thumbOffset = -maxScrollLeft;\n        \n        thumbnailSlider.style.transform = <code>translateX(${thumbOffset}px)<\/code>;\n    }\n\n    \/\/ Navigasyon butonlar\u0131 olay dinleyicileri\n    prevButton.addEventListener('click', () => {\n        goToSlide(currentIndex - 1);\n    });\n\n    nextButton.addEventListener('click', () => {\n        goToSlide(currentIndex + 1);\n    });\n\n    \/\/ K\u00fc\u00e7\u00fck resimlere t\u0131klama olay dinleyicileri\n    thumbnails.forEach((thumb, index) => {\n        thumb.addEventListener('click', () => {\n            goToSlide(index);\n        });\n    });\n\n    \/\/ K\u00fc\u00e7\u00fck resim kayd\u0131r\u0131c\u0131s\u0131 navigasyon butonlar\u0131 (iste\u011fe ba\u011fl\u0131)\n    thumbPrevButton.addEventListener('click', () => {\n        const thumbnailSliderWrapper = document.querySelector('.thumbnail-slider-wrapper');\n        const wrapperWidth = thumbnailSliderWrapper.clientWidth;\n        const currentThumbOffset = parseInt(thumbnailSlider.style.transform.replace('translateX(', '').replace('px)', '') || 0);\n        let newOffset = currentThumbOffset + wrapperWidth; \/\/ Bir ekran geni\u015fli\u011fi kadar geri kayd\u0131r\n        if (newOffset > 0) newOffset = 0; \/\/ Ba\u015fa d\u00f6nme s\u0131n\u0131r\u0131\n        thumbnailSlider.style.transform = <code>translateX(${newOffset}px)<\/code>;\n    });\n\n    thumbNextButton.addEventListener('click', () => {\n        const thumbnailSliderWrapper = document.querySelector('.thumbnail-slider-wrapper');\n        const wrapperWidth = thumbnailSliderWrapper.clientWidth;\n        const maxScrollLeft = (thumbnails.length * thumbnailWidth) - wrapperWidth;\n        const currentThumbOffset = parseInt(thumbnailSlider.style.transform.replace('translateX(', '').replace('px)', '') || 0);\n        let newOffset = currentThumbOffset - wrapperWidth; \/\/ Bir ekran geni\u015fli\u011fi kadar ileri kayd\u0131r\n        if (newOffset < -maxScrollLeft) newOffset = -maxScrollLeft; \/\/ Sona ula\u015fma s\u0131n\u0131r\u0131\n        thumbnailSlider.style.transform = <code>translateX(${newOffset}px)<\/code>;\n    });\n\n\n    \/\/ Otomatik kayd\u0131rma (iste\u011fe ba\u011fl\u0131)\n    let autoSlideInterval;\n    const startAutoSlide = () => {\n        autoSlideInterval = setInterval(() => {\n            goToSlide(currentIndex + 1);\n        }, 5000); \/\/ Her 5 saniyede bir kayd\u0131r\n    };\n\n    const stopAutoSlide = () => {\n        clearInterval(autoSlideInterval);\n    };\n\n    \/\/ Fare ana kayd\u0131r\u0131c\u0131n\u0131n \u00fczerindeyken otomatik kayd\u0131rmay\u0131 durdur\n    mainSlider.parentElement.addEventListener('mouseenter', stopAutoSlide);\n    mainSlider.parentElement.addEventListener('mouseleave', startAutoSlide);\n\n    \/\/ \u0130lk y\u00fcklemede ve pencere boyutu de\u011fi\u015fti\u011finde geni\u015flikleri yeniden hesapla\n    const updateDimensions = () => {\n        mainSlideWidth = mainImages[0].clientWidth;\n        thumbnailWidth = thumbnails[0].clientWidth + 10; \/\/ + gap\n        mainSlider.style.width = <code>${mainImages.length * mainSlideWidth}px<\/code>;\n        goToSlide(currentIndex); \/\/ G\u00fcncel slayta tekrar git, pozisyonu ayarla\n    };\n\n    window.addEventListener('resize', updateDimensions);\n\n    \/\/ Karoseli ba\u015flat\n    goToSlide(0); \/\/ \u0130lk resmi g\u00f6ster\n    startAutoSlide(); \/\/ Otomatik kayd\u0131rmay\u0131 ba\u015flat\n});<\/code><\/pre>\n<p>#### JavaScript Kodunun A\u00e7\u0131klamas\u0131:<\/p>\n<p>1.  <strong>DOM Elemanlar\u0131n\u0131 Se\u00e7me:<\/strong> <code>document.querySelector<\/code> ve <code>document.querySelectorAll<\/code> kullanarak HTML elemanlar\u0131m\u0131z\u0131 JavaScript de\u011fi\u015fkenlerine at\u0131yoruz. Bu, onlara daha kolay eri\u015fmemizi sa\u011flar.<br \/>\n2.  <strong>Durum De\u011fi\u015fkenleri:<\/strong><br \/>\n    *   <code>currentIndex<\/code>: Hangi resmin \u015fu anda g\u00f6sterildi\u011fini takip eden bir say\u0131d\u0131r (0&#8217;dan ba\u015flar).<br \/>\n    *   <code>mainSlideWidth<\/code>: Ana resimlerin geni\u015fli\u011fini saklar. Bu de\u011fer, <code>transform: translateX()<\/code> hesaplamalar\u0131nda kullan\u0131l\u0131r.<br \/>\n    *   <code>thumbnailWidth<\/code>: K\u00fc\u00e7\u00fck resimlerin geni\u015fli\u011fini ve aralar\u0131ndaki bo\u015flu\u011fu (gap) saklar. K\u00fc\u00e7\u00fck resim kayd\u0131r\u0131c\u0131s\u0131n\u0131n senkronizasyonu i\u00e7in gereklidir.<br \/>\n3.  <strong><code>goToSlide(index)<\/code> Fonksiyonu:<\/strong><br \/>\n    *   Bu, karoselin kalbidir. Belirtilen <code>index<\/code>&#8216;e g\u00f6re ana ve k\u00fc\u00e7\u00fck resim kayd\u0131r\u0131c\u0131lar\u0131n\u0131 g\u00fcnceller.<br \/>\n    *   <strong>\u0130ndeks Kontrol\u00fc:<\/strong> <code>index<\/code>&#8216;in ge\u00e7erli s\u0131n\u0131rlar i\u00e7inde oldu\u011fundan emin olur (d\u00f6ng\u00fcsel kayd\u0131rma i\u00e7in).<br \/>\n    *   <strong>Ana Kayd\u0131r\u0131c\u0131 G\u00fcncelleme:<\/strong> <code>transform: translateX()<\/code> kullanarak <code>mainSlider<\/code>&#8216;\u0131 <code>currentIndex<\/code>&#8216;e g\u00f6re kayd\u0131r\u0131r. <code>mainOffset<\/code>, kayd\u0131rma miktar\u0131n\u0131 belirler.<br \/>\n    *   <strong>K\u00fc\u00e7\u00fck Resim Aktif Durumu:<\/strong> T\u00fcm k\u00fc\u00e7\u00fck resimlerin <code>active<\/code> s\u0131n\u0131f\u0131n\u0131 kald\u0131r\u0131r ve sadece ge\u00e7erli <code>currentIndex<\/code>&#8216;e sahip k\u00fc\u00e7\u00fck resme <code>active<\/code> s\u0131n\u0131f\u0131n\u0131 ekler.<br \/>\n    *   <strong>K\u00fc\u00e7\u00fck Resim Kayd\u0131r\u0131c\u0131s\u0131n\u0131 Senkronize Etme:<\/strong> Bu k\u0131s\u0131m, aktif k\u00fc\u00e7\u00fck resmin her zaman g\u00f6r\u00fcn\u00fcr alanda olmas\u0131n\u0131 sa\u011flamak i\u00e7in karma\u015f\u0131k bir mant\u0131k i\u00e7erir. <code>thumbnailSlider<\/code>&#8216;\u0131n ne kadar kayd\u0131r\u0131lmas\u0131 gerekti\u011fini hesaplar ve <code>transform: translateX()<\/code> ile uygular. Bu, aktif k\u00fc\u00e7\u00fck resim g\u00f6r\u00fcn\u00fcm alan\u0131n\u0131n d\u0131\u015f\u0131na \u00e7\u0131kt\u0131\u011f\u0131nda kayd\u0131r\u0131c\u0131n\u0131n otomatik olarak ileri veya geri hareket etmesini sa\u011flar.<br \/>\n4.  <strong>Navigasyon Butonlar\u0131:<\/strong> <code>prevButton<\/code> ve <code>nextButton<\/code> i\u00e7in <code>click<\/code> olay dinleyicileri eklenir. T\u0131kland\u0131\u011f\u0131nda, <code>goToSlide<\/code> fonksiyonunu \u00e7a\u011f\u0131rarak <code>currentIndex<\/code>&#8216;i bir art\u0131r\u0131r veya azalt\u0131r.<br \/>\n5.  <strong>K\u00fc\u00e7\u00fck Resim T\u0131klamalar\u0131:<\/strong> Her bir k\u00fc\u00e7\u00fck resme <code>click<\/code> olay dinleyicisi eklenir. Bir k\u00fc\u00e7\u00fck resme t\u0131kland\u0131\u011f\u0131nda, o k\u00fc\u00e7\u00fck resmin indeksi <code>goToSlide<\/code> fonksiyonuna iletilir, b\u00f6ylece ana kayd\u0131r\u0131c\u0131 do\u011frudan o resme atlar.<br \/>\n6.  <strong>K\u00fc\u00e7\u00fck Resim Kayd\u0131r\u0131c\u0131s\u0131 Navigasyon Butonlar\u0131 (\u0130ste\u011fe Ba\u011fl\u0131):<\/strong> <code>thumbPrevButton<\/code> ve <code>thumbNextButton<\/code> i\u00e7in de olay dinleyicileri eklenir. Bunlar, k\u00fc\u00e7\u00fck resim kayd\u0131r\u0131c\u0131s\u0131n\u0131 bir ekran geni\u015fli\u011fi kadar ileri veya geri kayd\u0131r\u0131r.<br \/>\n7.  <strong>Otomatik Kayd\u0131rma (\u0130ste\u011fe Ba\u011fl\u0131):<\/strong><br \/>\n    *   <code>startAutoSlide()<\/code>: <code>setInterval<\/code> kullanarak belirli aral\u0131klarla <code>goToSlide(currentIndex + 1)<\/code> \u00e7a\u011f\u0131r\u0131r.<br \/>\n    *   <code>stopAutoSlide()<\/code>: <code>clearInterval<\/code> kullanarak otomatik kayd\u0131rmay\u0131 durdurur.<br \/>\n    *   Kullan\u0131c\u0131 ana kayd\u0131r\u0131c\u0131n\u0131n \u00fczerine geldi\u011finde otomatik kayd\u0131rmay\u0131 durdurur ve fare \u00e7\u0131kt\u0131\u011f\u0131nda tekrar ba\u015flat\u0131r.<br \/>\n8.  <strong>Duyarl\u0131 Tasar\u0131m \u0130\u00e7in Yeniden Boyutland\u0131rma:<\/strong> <code>updateDimensions()<\/code> fonksiyonu, pencere boyutu de\u011fi\u015fti\u011finde <code>mainSlideWidth<\/code> ve <code>thumbnailWidth<\/code> de\u011ferlerini yeniden hesaplar. Bu, karoselin farkl\u0131 ekran boyutlar\u0131nda do\u011fru \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar. <code>window.addEventListener('resize', updateDimensions)<\/code> ile bu fonksiyon pencere boyutu de\u011fi\u015fti\u011finde otomatik olarak \u00e7a\u011fr\u0131l\u0131r.<br \/>\n9.  <strong>Ba\u015flatma:<\/strong> <code>DOMContentLoaded<\/code> olay dinleyicisi i\u00e7inde, sayfa y\u00fcklendi\u011finde <code>goToSlide(0)<\/code> \u00e7a\u011fr\u0131larak ilk resim g\u00f6sterilir ve <code>startAutoSlide()<\/code> ile otomatik kayd\u0131rma ba\u015flat\u0131l\u0131r.<\/p>\n<h3>Geli\u015fmi\u015f \u00d6zellikler ve \u0130yile\u015ftirmeler<\/h3>\n<p>Temel karoselimiz art\u0131k \u00e7al\u0131\u015f\u0131yor. Ancak, kullan\u0131c\u0131 deneyimini daha da zenginle\u015ftirmek ve eri\u015filebilirli\u011fi art\u0131rmak i\u00e7in baz\u0131 geli\u015fmi\u015f \u00f6zellikler ekleyebiliriz:<\/p>\n<p>*   <strong>Dokunmatik Kayd\u0131rma (Swipe Gestures):<\/strong> Mobil cihazlarda kullan\u0131c\u0131lar\u0131n parmaklar\u0131n\u0131 s\u00fcr\u00fckleyerek kayd\u0131rma yapmas\u0131n\u0131 sa\u011flamak i\u00e7in <code>touchstart<\/code>, <code>touchmove<\/code> ve <code>touchend<\/code> olay dinleyicilerini kullanarak kayd\u0131rma hareketlerini alg\u0131layabiliriz. Bu, \u00f6zellikle dokunmatik ekranl\u0131 cihazlarda kullan\u0131c\u0131 deneyimini b\u00fcy\u00fck \u00f6l\u00e7\u00fcde iyile\u015ftirir.<br \/>\n*   <strong>Klavye Navigasyonu:<\/strong> Klavyedeki sol ve sa\u011f ok tu\u015flar\u0131n\u0131 kullanarak kayd\u0131rma imkan\u0131 sunmak, eri\u015filebilirli\u011fi art\u0131r\u0131r. <code>keydown<\/code> olay dinleyicisi ile bu tu\u015flar\u0131 yakalayabiliriz.<br \/>\n*   <strong>Performans Optimizasyonlar\u0131 (Lazy Loading):<\/strong> \u00c7ok say\u0131da resim i\u00e7eren bir portf\u00f6yde, t\u00fcm resimleri sayfa y\u00fcklenirken y\u00fcklemek performans\u0131 d\u00fc\u015f\u00fcrebilir. <code>loading=\"lazy\"<\/code> \u00f6zelli\u011fini <code><img><\/code> etiketlerine ekleyerek veya JavaScript ile \u00f6zel bir &#8220;tembel y\u00fckleme&#8221; mekanizmas\u0131 uygulayarak sadece g\u00f6r\u00fcn\u00fcrdeki ve yak\u0131ndaki resimlerin y\u00fcklenmesini sa\u011flayabiliriz.<br \/>\n*   <strong>Eri\u015filebilirlik (ARIA Attributes):<\/strong> Ekran okuyucular\u0131 kullanan ki\u015filerin karoseli anlamas\u0131n\u0131 sa\u011flamak i\u00e7in <code>role=\"region\"<\/code>, <code>aria-live=\"polite\"<\/code>, <code>aria-label<\/code> gibi ARIA nitelikleri eklenebilir. Navigasyon butonlar\u0131 i\u00e7in <code>aria-label=\"\u00d6nceki resim\"<\/code> gibi a\u00e7\u0131klamalar eklemek de \u00f6nemlidir.<br \/>\n*   <strong>Farkl\u0131 Ge\u00e7i\u015f Efektleri:<\/strong> <code>transform: translateX()<\/code> yerine <code>opacity<\/code> ve <code>z-index<\/code> kullanarak solma (fade) efektleri veya daha karma\u015f\u0131k 3D d\u00f6n\u00fc\u015f\u00fcmler ile farkl\u0131 g\u00f6rsel ge\u00e7i\u015fler olu\u015fturulabilir.<br \/>\n*   <strong>K\u00fct\u00fcphane Kullan\u0131m\u0131:<\/strong> Bu makalede &#8220;Vanilla JavaScript&#8221; (yani herhangi bir k\u00fct\u00fcphane kullanmadan) ile nas\u0131l yap\u0131laca\u011f\u0131n\u0131 g\u00f6sterdik. Ancak, daha karma\u015f\u0131k karosel ihtiya\u00e7lar\u0131n\u0131z varsa veya geli\u015ftirme s\u00fcresini k\u0131saltmak isterseniz, Swiper.js, Slick Carousel veya Owl Carousel gibi pop\u00fcler JavaScript k\u00fct\u00fcphanelerini kullanabilirsiniz. Bu k\u00fct\u00fcphaneler genellikle dokunmatik kayd\u0131rma, lazy loading, d\u00f6ng\u00fcsel kayd\u0131rma gibi bir\u00e7ok \u00f6zelli\u011fi kutudan \u00e7\u0131kar \u00e7\u0131kmaz sunar. Ancak, bu makalenin amac\u0131 temel mekani\u011fi anlamakt\u0131.<\/p>\n<h3>Sonu\u00e7<\/h3>\n<p>Bir portf\u00f6y web sitesi i\u00e7in senkronize kayd\u0131r\u0131c\u0131lara sahip interaktif bir resim karoseli olu\u015fturmak, ziyaret\u00e7ilerinize projelerinizi sunman\u0131n olduk\u00e7a etkili ve modern bir yoludur. HTML ile sa\u011flam bir yap\u0131 olu\u015fturarak, CSS ile g\u00f6z al\u0131c\u0131 bir g\u00f6r\u00fcn\u00fcm kazand\u0131rarak ve JavaScript ile ak\u0131c\u0131 bir kullan\u0131c\u0131 deneyimi sa\u011flayarak, sadece g\u00f6rselleri sergilemekle kalmaz, ayn\u0131 zamanda kullan\u0131c\u0131lar\u0131n i\u00e7eri\u011finizle daha derinlemesine etkile\u015fim kurmas\u0131n\u0131 te\u015fvik edersiniz.<\/p>\n<p>Bu makalede ad\u0131m ad\u0131m sundu\u011fumuz rehber, temel bir karosel olu\u015fturmak i\u00e7in gerekli t\u00fcm ad\u0131mlar\u0131 ve mant\u0131\u011f\u0131 kapsamaktad\u0131r. Bu temel \u00fczerine in\u015fa ederek, dokunmatik kayd\u0131rma, klavye navigasyonu ve performans optimizasyonlar\u0131 gibi geli\u015fmi\u015f \u00f6zelliklerle karoselinizi daha da zenginle\u015ftirebilirsiniz. Unutmay\u0131n, iyi tasarlanm\u0131\u015f bir g\u00f6rsel sunum, portf\u00f6y\u00fcn\u00fcz\u00fcn alg\u0131lanan de\u011ferini art\u0131r\u0131r ve potansiyel m\u00fc\u015fteriler veya i\u015fverenler \u00fczerinde kal\u0131c\u0131 bir izlenim b\u0131rak\u0131r. Kendi yarat\u0131c\u0131 dokunu\u015flar\u0131n\u0131z\u0131 ekleyerek bu yap\u0131y\u0131 daha da ki\u015fiselle\u015ftirmekten \u00e7ekinmeyin!<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Portf\u00f6y Resim Karoseli ve Senkronize Kayd\u0131r\u0131c\u0131lar ile Web Sayfas\u0131nda \u0130nteraktif Bir Deneyim Olu\u015fturma\nWeb sayfalar\u0131nda g\u00f6rsel i\u00e7eri\u011fi etki","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-39146","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Portf\u00f6y Resim Karoseli ve Senkronize Kayd\u0131r\u0131c\u0131lar ile Web Sayfas\u0131nda \u0130nteraktif Bir Deneyim Olu\u015fturma - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/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:\/\/fatihsoysal.com\/blog\/portfoy-resim-karoseli-ve-senkronize-kaydiricilar-ile-web-sayfasinda-interaktif-bir-deneyim-olusturma\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Portf\u00f6y Resim Karoseli ve Senkronize Kayd\u0131r\u0131c\u0131lar ile Web Sayfas\u0131nda \u0130nteraktif Bir Deneyim Olu\u015fturma\" \/>\n<meta property=\"og:description\" content=\"Portf\u00f6y Resim Karoseli ve Senkronize Kayd\u0131r\u0131c\u0131lar ile Web Sayfas\u0131nda \u0130nteraktif Bir Deneyim Olu\u015fturma Web sayfalar\u0131nda g\u00f6rsel i\u00e7eri\u011fi etki\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/portfoy-resim-karoseli-ve-senkronize-kaydiricilar-ile-web-sayfasinda-interaktif-bir-deneyim-olusturma\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-02-15T09:40:41+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/portfoy-resim-karoseli-ve-senkronize-kaydiricilar-ile-web-sayfasinda-interaktif-bir-deneyim-olusturma\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/portfoy-resim-karoseli-ve-senkronize-kaydiricilar-ile-web-sayfasinda-interaktif-bir-deneyim-olusturma\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Portf\u00f6y Resim Karoseli ve Senkronize Kayd\u0131r\u0131c\u0131lar ile Web Sayfas\u0131nda \u0130nteraktif Bir Deneyim Olu\u015fturma\",\"datePublished\":\"2026-02-15T09:40:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/portfoy-resim-karoseli-ve-senkronize-kaydiricilar-ile-web-sayfasinda-interaktif-bir-deneyim-olusturma\/\"},\"wordCount\":1877,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/portfoy-resim-karoseli-ve-senkronize-kaydiricilar-ile-web-sayfasinda-interaktif-bir-deneyim-olusturma\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/portfoy-resim-karoseli-ve-senkronize-kaydiricilar-ile-web-sayfasinda-interaktif-bir-deneyim-olusturma\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/portfoy-resim-karoseli-ve-senkronize-kaydiricilar-ile-web-sayfasinda-interaktif-bir-deneyim-olusturma\/\",\"name\":\"Portf\u00f6y Resim Karoseli ve Senkronize Kayd\u0131r\u0131c\u0131lar ile Web Sayfas\u0131nda \u0130nteraktif Bir Deneyim Olu\u015fturma - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-02-15T09:40:41+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/portfoy-resim-karoseli-ve-senkronize-kaydiricilar-ile-web-sayfasinda-interaktif-bir-deneyim-olusturma\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/portfoy-resim-karoseli-ve-senkronize-kaydiricilar-ile-web-sayfasinda-interaktif-bir-deneyim-olusturma\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/portfoy-resim-karoseli-ve-senkronize-kaydiricilar-ile-web-sayfasinda-interaktif-bir-deneyim-olusturma\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Portf\u00f6y Resim Karoseli ve Senkronize Kayd\u0131r\u0131c\u0131lar ile Web Sayfas\u0131nda \u0130nteraktif Bir Deneyim Olu\u015fturma\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Portf\u00f6y Resim Karoseli ve Senkronize Kayd\u0131r\u0131c\u0131lar ile Web Sayfas\u0131nda \u0130nteraktif Bir Deneyim Olu\u015fturma - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","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:\/\/fatihsoysal.com\/blog\/portfoy-resim-karoseli-ve-senkronize-kaydiricilar-ile-web-sayfasinda-interaktif-bir-deneyim-olusturma\/","og_locale":"tr_TR","og_type":"article","og_title":"Portf\u00f6y Resim Karoseli ve Senkronize Kayd\u0131r\u0131c\u0131lar ile Web Sayfas\u0131nda \u0130nteraktif Bir Deneyim Olu\u015fturma","og_description":"Portf\u00f6y Resim Karoseli ve Senkronize Kayd\u0131r\u0131c\u0131lar ile Web Sayfas\u0131nda \u0130nteraktif Bir Deneyim Olu\u015fturma Web sayfalar\u0131nda g\u00f6rsel i\u00e7eri\u011fi etki","og_url":"https:\/\/fatihsoysal.com\/blog\/portfoy-resim-karoseli-ve-senkronize-kaydiricilar-ile-web-sayfasinda-interaktif-bir-deneyim-olusturma\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-02-15T09:40:41+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"14 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/portfoy-resim-karoseli-ve-senkronize-kaydiricilar-ile-web-sayfasinda-interaktif-bir-deneyim-olusturma\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/portfoy-resim-karoseli-ve-senkronize-kaydiricilar-ile-web-sayfasinda-interaktif-bir-deneyim-olusturma\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Portf\u00f6y Resim Karoseli ve Senkronize Kayd\u0131r\u0131c\u0131lar ile Web Sayfas\u0131nda \u0130nteraktif Bir Deneyim Olu\u015fturma","datePublished":"2026-02-15T09:40:41+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/portfoy-resim-karoseli-ve-senkronize-kaydiricilar-ile-web-sayfasinda-interaktif-bir-deneyim-olusturma\/"},"wordCount":1877,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/portfoy-resim-karoseli-ve-senkronize-kaydiricilar-ile-web-sayfasinda-interaktif-bir-deneyim-olusturma\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/portfoy-resim-karoseli-ve-senkronize-kaydiricilar-ile-web-sayfasinda-interaktif-bir-deneyim-olusturma\/","url":"https:\/\/fatihsoysal.com\/blog\/portfoy-resim-karoseli-ve-senkronize-kaydiricilar-ile-web-sayfasinda-interaktif-bir-deneyim-olusturma\/","name":"Portf\u00f6y Resim Karoseli ve Senkronize Kayd\u0131r\u0131c\u0131lar ile Web Sayfas\u0131nda \u0130nteraktif Bir Deneyim Olu\u015fturma - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-02-15T09:40:41+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/portfoy-resim-karoseli-ve-senkronize-kaydiricilar-ile-web-sayfasinda-interaktif-bir-deneyim-olusturma\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/portfoy-resim-karoseli-ve-senkronize-kaydiricilar-ile-web-sayfasinda-interaktif-bir-deneyim-olusturma\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/portfoy-resim-karoseli-ve-senkronize-kaydiricilar-ile-web-sayfasinda-interaktif-bir-deneyim-olusturma\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Portf\u00f6y Resim Karoseli ve Senkronize Kayd\u0131r\u0131c\u0131lar ile Web Sayfas\u0131nda \u0130nteraktif Bir Deneyim Olu\u015fturma"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/39146","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=39146"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/39146\/revisions"}],"predecessor-version":[{"id":39147,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/39146\/revisions\/39147"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=39146"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=39146"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=39146"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}