[{"data":1,"prerenderedAt":788},["ShallowReactive",2],{"blog-\u002Fpl\u002Fwpisy\u002F2026\u002Fjedna-karuzela-zamiast-trzech":3,"blog-project-\u002Fpl\u002Fwpisy\u002F2026\u002Fjedna-karuzela-zamiast-trzech":709},{"id":4,"title":5,"art":6,"body":7,"date":692,"description":693,"draft":694,"extension":695,"image":696,"kind":697,"meta":698,"navigation":73,"ogImage":699,"path":700,"project":701,"seo":702,"slug":696,"stem":703,"tags":704,"translationKey":707,"updated":696,"__hash__":708},"blog_pl\u002Fpl\u002Fwpisy\u002F2026\u002Fjedna-karuzela-zamiast-trzech.md","Jedna karuzela zamiast trzech","\u002Fart\u002Fblog\u002Fjedna-karuzela-zamiast-trzech.svg",{"type":8,"value":9,"toc":685},"minimark",[10,14,19,22,25,382,385,460,464,467,476,486,493,559,563,570,642,648,652,655,659,681],[11,12,13],"p",{},"superauto.pl to serwis z ofertami samochodów – nowych, używanych, poleasingowych i ciężarowych. Pracowałem przy nim w Arris Agency, a największą zleconą przebudową, jaką tam zrobiłem, było zastąpienie trzech różnych karuzel jedną. Weszła na produkcję wiosną 2025 roku, etapami. Sytuacja jest prawdziwa, ale kod poniżej to uproszczone przykłady, a nie kod z serwisu.",[15,16,18],"h2",{"id":17},"trzy-karuzele-trzy-różne-kody","Trzy karuzele, trzy różne kody",[11,20,21],{},"Każda z trzech karuzel miała własny kod, napisany od zera pod jeden element strony. Zachowywały się podobnie, ale każda była ciężka i każdą trzeba było poprawiać osobno. Zaproponowałem Swipera: ładuje zdjęcia z wyprzedzeniem i łatwo go edytować.",[11,23,24],{},"Najtrudniejsze na początku było przemyślenie logiki. Jeden komponent miał obsłużyć cztery miejsca: galerię auta z miniaturami, podgląd zdjęć na cały ekran, karuzelę kafelków z pojazdami i karuzelę małych ofert. Zrobiłem jeden wzorzec, a różnice opisałem jako warianty ustawień:",[26,27,32],"pre",{"className":28,"code":29,"language":30,"meta":31,"style":31},"language-js shiki shiki-themes github-light github-dark","import Swiper from 'swiper'\nimport { Navigation, Thumbs } from 'swiper\u002Fmodules'\n\n\u002F\u002F ustawienia wspólne dla każdej karuzeli w serwisie\nconst base = {\n  modules: [Navigation, Thumbs],\n  lazyPreloadPrevNext: 1, \u002F\u002F zdjęcie obok pobiera się z wyprzedzeniem\n}\n\n\u002F\u002F warianty różnią się tylko ustawieniami\nconst variants = {\n  gallery: { slidesPerView: 1 },\n  vehicles: {\n    slidesPerView: 1.2,\n    spaceBetween: 16,\n    breakpoints: { 1024: { slidesPerView: 3 } },\n  },\n  offers: { slidesPerView: 1 },\n}\n\nexport function createCarousel(el, extra = {}) {\n  const variant = variants[el.dataset.carousel] ?? variants.gallery\n\n  return new Swiper(el, {\n    ...base,\n    ...variant,\n    navigation: {\n      prevEl: el.querySelector('[data-prev]'),\n      nextEl: el.querySelector('[data-next]'),\n    },\n    ...extra,\n  })\n}\n","js","",[33,34,35,55,68,75,82,98,104,119,125,130,136,148,159,165,177,188,206,212,222,227,232,262,282,287,302,311,319,325,342,357,363,371,377],"code",{"__ignoreMap":31},[36,37,40,44,48,51],"span",{"class":38,"line":39},"line",1,[36,41,43],{"class":42},"szBVR","import",[36,45,47],{"class":46},"sVt8B"," Swiper ",[36,49,50],{"class":42},"from",[36,52,54],{"class":53},"sZZnC"," 'swiper'\n",[36,56,58,60,63,65],{"class":38,"line":57},2,[36,59,43],{"class":42},[36,61,62],{"class":46}," { Navigation, Thumbs } ",[36,64,50],{"class":42},[36,66,67],{"class":53}," 'swiper\u002Fmodules'\n",[36,69,71],{"class":38,"line":70},3,[36,72,74],{"emptyLinePlaceholder":73},true,"\n",[36,76,78],{"class":38,"line":77},4,[36,79,81],{"class":80},"sqY6-","\u002F\u002F ustawienia wspólne dla każdej karuzeli w serwisie\n",[36,83,85,88,92,95],{"class":38,"line":84},5,[36,86,87],{"class":42},"const",[36,89,91],{"class":90},"sj4cs"," base",[36,93,94],{"class":42}," =",[36,96,97],{"class":46}," {\n",[36,99,101],{"class":38,"line":100},6,[36,102,103],{"class":46},"  modules: [Navigation, Thumbs],\n",[36,105,107,110,113,116],{"class":38,"line":106},7,[36,108,109],{"class":46},"  lazyPreloadPrevNext: ",[36,111,112],{"class":90},"1",[36,114,115],{"class":46},", ",[36,117,118],{"class":80},"\u002F\u002F zdjęcie obok pobiera się z wyprzedzeniem\n",[36,120,122],{"class":38,"line":121},8,[36,123,124],{"class":46},"}\n",[36,126,128],{"class":38,"line":127},9,[36,129,74],{"emptyLinePlaceholder":73},[36,131,133],{"class":38,"line":132},10,[36,134,135],{"class":80},"\u002F\u002F warianty różnią się tylko ustawieniami\n",[36,137,139,141,144,146],{"class":38,"line":138},11,[36,140,87],{"class":42},[36,142,143],{"class":90}," variants",[36,145,94],{"class":42},[36,147,97],{"class":46},[36,149,151,154,156],{"class":38,"line":150},12,[36,152,153],{"class":46},"  gallery: { slidesPerView: ",[36,155,112],{"class":90},[36,157,158],{"class":46}," },\n",[36,160,162],{"class":38,"line":161},13,[36,163,164],{"class":46},"  vehicles: {\n",[36,166,168,171,174],{"class":38,"line":167},14,[36,169,170],{"class":46},"    slidesPerView: ",[36,172,173],{"class":90},"1.2",[36,175,176],{"class":46},",\n",[36,178,180,183,186],{"class":38,"line":179},15,[36,181,182],{"class":46},"    spaceBetween: ",[36,184,185],{"class":90},"16",[36,187,176],{"class":46},[36,189,191,194,197,200,203],{"class":38,"line":190},16,[36,192,193],{"class":46},"    breakpoints: { ",[36,195,196],{"class":90},"1024",[36,198,199],{"class":46},": { slidesPerView: ",[36,201,202],{"class":90},"3",[36,204,205],{"class":46}," } },\n",[36,207,209],{"class":38,"line":208},17,[36,210,211],{"class":46},"  },\n",[36,213,215,218,220],{"class":38,"line":214},18,[36,216,217],{"class":46},"  offers: { slidesPerView: ",[36,219,112],{"class":90},[36,221,158],{"class":46},[36,223,225],{"class":38,"line":224},19,[36,226,124],{"class":46},[36,228,230],{"class":38,"line":229},20,[36,231,74],{"emptyLinePlaceholder":73},[36,233,235,238,241,245,248,252,254,257,259],{"class":38,"line":234},21,[36,236,237],{"class":42},"export",[36,239,240],{"class":42}," function",[36,242,244],{"class":243},"sScJk"," createCarousel",[36,246,247],{"class":46},"(",[36,249,251],{"class":250},"siNPP","el",[36,253,115],{"class":46},[36,255,256],{"class":250},"extra",[36,258,94],{"class":42},[36,260,261],{"class":46}," {}) {\n",[36,263,265,268,271,273,276,279],{"class":38,"line":264},22,[36,266,267],{"class":42},"  const",[36,269,270],{"class":90}," variant",[36,272,94],{"class":42},[36,274,275],{"class":46}," variants[el.dataset.carousel] ",[36,277,278],{"class":42},"??",[36,280,281],{"class":46}," variants.gallery\n",[36,283,285],{"class":38,"line":284},23,[36,286,74],{"emptyLinePlaceholder":73},[36,288,290,293,296,299],{"class":38,"line":289},24,[36,291,292],{"class":42},"  return",[36,294,295],{"class":42}," new",[36,297,298],{"class":243}," Swiper",[36,300,301],{"class":46},"(el, {\n",[36,303,305,308],{"class":38,"line":304},25,[36,306,307],{"class":42},"    ...",[36,309,310],{"class":46},"base,\n",[36,312,314,316],{"class":38,"line":313},26,[36,315,307],{"class":42},[36,317,318],{"class":46},"variant,\n",[36,320,322],{"class":38,"line":321},27,[36,323,324],{"class":46},"    navigation: {\n",[36,326,328,331,334,336,339],{"class":38,"line":327},28,[36,329,330],{"class":46},"      prevEl: el.",[36,332,333],{"class":243},"querySelector",[36,335,247],{"class":46},[36,337,338],{"class":53},"'[data-prev]'",[36,340,341],{"class":46},"),\n",[36,343,345,348,350,352,355],{"class":38,"line":344},29,[36,346,347],{"class":46},"      nextEl: el.",[36,349,333],{"class":243},[36,351,247],{"class":46},[36,353,354],{"class":53},"'[data-next]'",[36,356,341],{"class":46},[36,358,360],{"class":38,"line":359},30,[36,361,362],{"class":46},"    },\n",[36,364,366,368],{"class":38,"line":365},31,[36,367,307],{"class":42},[36,369,370],{"class":46},"extra,\n",[36,372,374],{"class":38,"line":373},32,[36,375,376],{"class":46},"  })\n",[36,378,380],{"class":38,"line":379},33,[36,381,124],{"class":46},[11,383,384],{},"Rozszerzenia to już tylko dodatkowe ustawienia. Galeria auta dostaje drugą, małą karuzelę z miniaturami, a podgląd na cały ekran to ta sama karuzela z większymi zdjęciami, otwarta na klikniętym zdjęciu:",[26,386,388],{"className":28,"code":387,"language":30,"meta":31,"style":31},"const thumbs = new Swiper(thumbsEl, {\n  slidesPerView: 6,\n  spaceBetween: 8,\n  watchSlidesProgress: true,\n})\n\ncreateCarousel(galleryEl, { thumbs: { swiper: thumbs } })\ncreateCarousel(fullscreenEl, { initialSlide: clickedIndex })\n",[33,389,390,406,416,426,436,441,445,453],{"__ignoreMap":31},[36,391,392,394,397,399,401,403],{"class":38,"line":39},[36,393,87],{"class":42},[36,395,396],{"class":90}," thumbs",[36,398,94],{"class":42},[36,400,295],{"class":42},[36,402,298],{"class":243},[36,404,405],{"class":46},"(thumbsEl, {\n",[36,407,408,411,414],{"class":38,"line":57},[36,409,410],{"class":46},"  slidesPerView: ",[36,412,413],{"class":90},"6",[36,415,176],{"class":46},[36,417,418,421,424],{"class":38,"line":70},[36,419,420],{"class":46},"  spaceBetween: ",[36,422,423],{"class":90},"8",[36,425,176],{"class":46},[36,427,428,431,434],{"class":38,"line":77},[36,429,430],{"class":46},"  watchSlidesProgress: ",[36,432,433],{"class":90},"true",[36,435,176],{"class":46},[36,437,438],{"class":38,"line":84},[36,439,440],{"class":46},"})\n",[36,442,443],{"class":38,"line":100},[36,444,74],{"emptyLinePlaceholder":73},[36,446,447,450],{"class":38,"line":106},[36,448,449],{"class":243},"createCarousel",[36,451,452],{"class":46},"(galleryEl, { thumbs: { swiper: thumbs } })\n",[36,454,455,457],{"class":38,"line":121},[36,456,449],{"class":243},[36,458,459],{"class":46},"(fullscreenEl, { initialSlide: clickedIndex })\n",[15,461,463],{"id":462},"kilkanaście-karuzel-na-jednej-stronie","Kilkanaście karuzel na jednej stronie",[11,465,466],{},"Na listach ofert każda karta ma własną małą galerię. Przy kilkunastu ofertach na stronie jest więc kilkanaście karuzel naraz. Na niektórych komputerach karuzela zaczęła szarpać i na początku wyglądało to tak, jakby karuzel było po prostu za dużo.",[11,468,469],{},[470,471],"img",{"alt":472,"height":473,"src":474,"width":475},"Karuzele ofert w superauto.pl – każda karta ma własną małą galerię",1080,"\u002Fprojects\u002F2025\u002Fsuperauto\u002Foffer-carousels.webp",1920,[11,477,478,479,482,483,485],{},"Okazało się, że liczba karuzel nie była problemem. Winne było tło. Zdjęcia ładują się w dwóch krokach: najpierw pod spodem pojawia się mały podgląd w słabej jakości z filtrem ",[33,480,481],{},"blur",", a po chwili pełna wersja. Filtr ",[33,484,481],{}," jest dla przeglądarki kosztowny, a przy ruchu karuzeli słabsze komputery go nie wyrabiały.",[11,487,488,489,492],{},"Nie chciałem usuwać tego efektu. Pomogła reguła CSS, która przeniosła rozmyte tło na osobną warstwę obsługiwaną przez kartę graficzną. Wydaje mi się, że było to ",[33,490,491],{},"transform: translateZ(0)",", ale dokładnie już nie pamiętam:",[26,494,498],{"className":495,"code":496,"language":497,"meta":31,"style":31},"language-css shiki shiki-themes github-light github-dark","\u002F* rozmyty podgląd pod zdjęciem – czeka, aż wczyta się pełna wersja *\u002F\n.offer-card__preview {\n  filter: blur(12px);\n  \u002F* osobna warstwa: przy ruchu karuzeli rozmycie nie jest malowane od nowa *\u002F\n  transform: translateZ(0);\n}\n","css",[33,499,500,505,512,533,538,555],{"__ignoreMap":31},[36,501,502],{"class":38,"line":39},[36,503,504],{"class":80},"\u002F* rozmyty podgląd pod zdjęciem – czeka, aż wczyta się pełna wersja *\u002F\n",[36,506,507,510],{"class":38,"line":57},[36,508,509],{"class":243},".offer-card__preview",[36,511,97],{"class":46},[36,513,514,517,520,522,524,527,530],{"class":38,"line":70},[36,515,516],{"class":90},"  filter",[36,518,519],{"class":46},": ",[36,521,481],{"class":90},[36,523,247],{"class":46},[36,525,526],{"class":90},"12",[36,528,529],{"class":42},"px",[36,531,532],{"class":46},");\n",[36,534,535],{"class":38,"line":77},[36,536,537],{"class":80},"  \u002F* osobna warstwa: przy ruchu karuzeli rozmycie nie jest malowane od nowa *\u002F\n",[36,539,540,543,545,548,550,553],{"class":38,"line":84},[36,541,542],{"class":90},"  transform",[36,544,519],{"class":46},[36,546,547],{"class":90},"translateZ",[36,549,247],{"class":46},[36,551,552],{"class":90},"0",[36,554,532],{"class":46},[36,556,557],{"class":38,"line":100},[36,558,124],{"class":46},[15,560,562],{"id":561},"zdjęcia-generuje-serwer","Zdjęcia generuje serwer",[11,564,565,566,569],{},"Wszystkie rozmiary zdjęć przygotowywał serwer, więc dopasowywałem się do tego, co dostawałem z backendu. Backend pilnował też, żeby liczba zdjęć nie przeciążyła serwera. Kiedy przyspieszaliśmy wersję na telefony i dodaliśmy mniejsze zdjęcia w ",[33,567,568],{},"srcset",", miniatur nagle zrobiło się bardzo dużo. Generowanie nowych rozmiarów dla wszystkich zdjęć w każdej ofercie przeciążyło serwer i zapchało dysk, więc generowanie stanęło. Później trwało ponad godzinę.",[26,571,575],{"className":572,"code":573,"language":574,"meta":31,"style":31},"language-html shiki shiki-themes github-light github-dark","\u003Cimg\n  src=\"\u002Ffoto\u002Foferta-1234\u002F1-800.jpg\"\n  srcset=\"\u002Ffoto\u002Foferta-1234\u002F1-400.jpg 400w, \u002Ffoto\u002Foferta-1234\u002F1-800.jpg 800w\"\n  sizes=\"(max-width: 640px) 100vw, 400px\"\n  loading=\"lazy\"\n  alt=\"Przykładowe auto z oferty\"\n>\n","html",[33,576,577,586,597,607,617,627,637],{"__ignoreMap":31},[36,578,579,582],{"class":38,"line":39},[36,580,581],{"class":46},"\u003C",[36,583,585],{"class":584},"s9eBZ","img\n",[36,587,588,591,594],{"class":38,"line":57},[36,589,590],{"class":243},"  src",[36,592,593],{"class":46},"=",[36,595,596],{"class":53},"\"\u002Ffoto\u002Foferta-1234\u002F1-800.jpg\"\n",[36,598,599,602,604],{"class":38,"line":70},[36,600,601],{"class":243},"  srcset",[36,603,593],{"class":46},[36,605,606],{"class":53},"\"\u002Ffoto\u002Foferta-1234\u002F1-400.jpg 400w, \u002Ffoto\u002Foferta-1234\u002F1-800.jpg 800w\"\n",[36,608,609,612,614],{"class":38,"line":77},[36,610,611],{"class":243},"  sizes",[36,613,593],{"class":46},[36,615,616],{"class":53},"\"(max-width: 640px) 100vw, 400px\"\n",[36,618,619,622,624],{"class":38,"line":84},[36,620,621],{"class":243},"  loading",[36,623,593],{"class":46},[36,625,626],{"class":53},"\"lazy\"\n",[36,628,629,632,634],{"class":38,"line":100},[36,630,631],{"class":243},"  alt",[36,633,593],{"class":46},[36,635,636],{"class":53},"\"Przykładowe auto z oferty\"\n",[36,638,639],{"class":38,"line":106},[36,640,641],{"class":46},">\n",[11,643,644,645,647],{},"Każdy rozmiar w ",[33,646,568],{}," to osobny plik dla każdego zdjęcia w każdej ofercie. Przy serwisie z dużą liczbą ofert jeden dodatkowy rozmiar to bardzo dużo nowych plików naraz.",[15,649,651],{"id":650},"wdrożenie-etapami","Wdrożenie etapami",[11,653,654],{},"Nowa karuzela wchodziła na produkcję etapami. Nie miałem listy miejsc, w których karuzele się pojawiają, więc szukałem ich w kodzie. Każdy rodzaj ofert – auta nowe, używane, poleasingowe, ciężarowe – miał własne pliki szablonów, więc tę samą zmianę wprowadzałem w kilku miejscach. Moim zdaniem wystarczyłby jeden szablon, który pokazuje tylko sekcje pasujące do danej oferty. Dostosowałem się jednak do kodu, który już był, a pomysł z jednym szablonem zgłosiłem jako sugestię.",[15,656,658],{"id":657},"co-z-tego-zostało","Co z tego zostało",[660,661,662,666,673,678],"ul",{},[663,664,665],"li",{},"Jeden komponent na Swiperze zamiast trzech karuzel z osobnym kodem – zmianę robi się w jednym miejscu.",[663,667,668,669,672],{},"Szarpanie nie zawsze wynika z liczby elementów. Czasem winny jest jeden kosztowny efekt, jak ",[33,670,671],{},"filter: blur()",".",[663,674,675,676,672],{},"Każdy nowy rozmiar zdjęcia to dodatkowa praca dla serwera – warto ustalić rozmiary z backendem, zanim doda się ",[33,677,568],{},[663,679,680],{},"Przed taką zmianą przydaje się lista miejsc, w których element występuje.",[682,683,684],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sqY6-, html code.shiki .sqY6-{--shiki-default:#6A737D;--shiki-dark:#90A1B9}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .siNPP, html code.shiki .siNPP{--shiki-default:#CA3500;--shiki-dark:#FFAB70}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":31,"searchDepth":57,"depth":57,"links":686},[687,688,689,690,691],{"id":17,"depth":57,"text":18},{"id":462,"depth":57,"text":463},{"id":561,"depth":57,"text":562},{"id":650,"depth":57,"text":651},{"id":657,"depth":57,"text":658},"2026-11-03","Jak w superauto.pl zastąpiłem trzy karuzele z osobnym kodem jednym komponentem na Swiperze – i dlaczego karuzela szarpała przez rozmyte tło, a nie przez liczbę karuzel na stronie.",false,"md",null,"case-study",{},"\u002Fog\u002Fblog\u002Fjedna-karuzela-zamiast-trzech-pl.jpg","\u002Fpl\u002Fwpisy\u002F2026\u002Fjedna-karuzela-zamiast-trzech","\u002Fprojects\u002F2025\u002Fsuperauto",{"title":5,"description":693},"pl\u002Fwpisy\u002F2026\u002Fjedna-karuzela-zamiast-trzech",[705,706,497],"javascript","swiper","jedna-karuzela-zamiast-trzech","XvFiduaQvCY00vYuKrfKFX-bv-wzFSGdu4ybPDwSvhM",{"id":710,"title":711,"agency":712,"body":713,"compare":696,"cover":745,"date":748,"description":749,"draft":694,"extension":695,"facts":750,"featured":694,"gallery":762,"galleryLead":773,"highlights":696,"image":774,"links":696,"meta":775,"navigation":73,"note":776,"ogImage":777,"path":778,"seo":779,"stack":780,"stem":784,"tags":785,"__hash__":787},"projects_pl\u002Fpl\u002Fprojekty\u002F2025\u002Fsuperauto\u002Findex.md","superauto.pl","Arris Agency",{"type":8,"value":714,"toc":742},[715,718,722],[11,716,717],{},"superauto.pl to serwis z ofertami samochodów, także w leasingu. W Arris Agency wprowadziłem w nim sporo zmian, a największą zleconą przebudową było zastąpienie kilku różnych karuzel jedną. Zaproponowałem Swipera – ładuje zdjęcia z wyprzedzeniem i łatwo go edytować – i zbudowałem jeden większy komponent, który zastąpił trzy różne karuzele.",[15,719,721],{"id":720},"co-się-zmieniło","Co się zmieniło",[660,723,724,727,730,733,736,739],{},[663,725,726],{},"Jeden wzorzec karuzeli zamiast trzech różnych – łatwiejszy w utrzymaniu i edycji",[663,728,729],{},"Galeria auta z miniaturami jako rozszerzenie wzorca",[663,731,732],{},"Podgląd zdjęć na cały ekran (lightbox) – ta sama karuzela, większe zdjęcia",[663,734,735],{},"Karuzele kafelków z pojazdami i małych ofert – nowe oferty po pobraniu danych doładowują się płynniej",[663,737,738],{},"Zdjęcia ładują się w dwóch krokach: najpierw rozmyty podgląd niskiej jakości w tle, po chwili pełna wersja",[663,740,741],{},"Kafelki z wideo, które przenoszą do sekcji oferty z tym nagraniem",{"title":31,"searchDepth":57,"depth":57,"links":743},[744],{"id":720,"depth":57,"text":721},{"desktop":746,"width":475,"height":473,"alt":747},"\u002Fprojects\u002F2025\u002Fsuperauto\u002Fcar-page.webp","superauto.pl – strona auta z galerią i miniaturami","2025-03-01","Moja część serwisu – trzy różne karuzele zastąpione jednym komponentem na Swiperze: galeria auta, podgląd na cały ekran i karuzele ofert.",[751,753,756,759],{"value":112,"text":752},"komponent karuzeli zamiast trzech różnych – jeden wzorzec dla całego serwisu",{"value":754,"text":755},"4","rozszerzenia wzorca – galeria z miniaturami, podgląd na cały ekran, pojazdy i małe oferty",{"value":757,"text":758},"2","kroki ładowania zdjęcia – najpierw rozmyty podgląd, potem pełna jakość",{"value":760,"text":761},"Swiper","biblioteka, którą zaproponowałem – zdjęcia ładowane z wyprzedzeniem i prosta edycja",[763,766,770],{"src":746,"width":475,"height":473,"alt":764,"caption":765},"Strona auta z galerią","Strona auta – galeria z miniaturami, strzałki i licznik zdjęć",{"src":767,"width":475,"height":473,"alt":768,"caption":769},"\u002Fprojects\u002F2025\u002Fsuperauto\u002Fgallery-fullscreen.webp","Galeria na cały ekran","Podgląd na cały ekran – ten sam wzorzec karuzeli, miniatury pod zdjęciem",{"src":474,"width":475,"height":473,"alt":771,"caption":772},"Karuzele ofert","Karuzele ofert – wersje modelu i „Inni też oglądali”, każda karta ma własną małą galerię","Zrzuty z serwisu – kliknij zrzut, żeby go powiększyć.","\u002Fprojects\u002F2025\u002Fsuperauto\u002Fthumbnail.webp",{},"Projekt w Arris Agency – pokazuję tylko swoją część serwisu.","\u002Fog\u002Fprojects\u002Fsuperauto-pl.jpg","\u002Fpl\u002Fprojekty\u002F2025\u002Fsuperauto",{"title":711,"description":749},[781,760,782,783],"JavaScript","Twig","SCSS","pl\u002Fprojekty\u002F2025\u002Fsuperauto\u002Findex",[705,706,786],"twig","KsukLk8jkGuIrqQES2qhZ-bL8NzNQ8XrUoJ_0TRp2Y0",1793700141520]