A kérdés az, hogy hogyan fogjunk hozzá? Nos a Shoprenter kissé kényeskedik, mikor “testidegen” kóddal akarunk működő elemeket beletenni. Így jártam pl. az oldal felső, kezdőtraktusára behelyezendő sliderrel is, melyet responsive html-el készült érkező oldalam tetejére szerettem volna betenni.
Rákerestem a “free html slider”-re, és a következő ígéretes oldalra bukkantam: (bocsánat, ide valaki vírusokat helyezett el, így le kellett vennem). Ezen negyven slider kód volt felsorakoztatva, fel volt tüntetve mindnél a kinézete is, volt hozzá demo megtekintési lehetőség, sőt volt alattuk letöltés gomb is.
Elsőként azzal szembesültem, hogy bár ezek a sliderek saját kategóriájukban mind jók, csak jelentős részük vagy furcsa működésű volt, mert ideoda lötyögött és pulzált, míg más meg jellemzően oldalközépi slider volt, és nem olyan amit a lap tetejére szoktunk tenni. Az oldalak tetejére most 2023-ban inkább fullwidth slidereket teszünk navigáló nyilai vannak jobb és bal oldalon. Ennélfogva az oldalon feltüntetett sliderek háromnegyede eleve kiesett, és csak 10 maradt versenyben oldalam elkészítéséhez.
Csak két megoldás volt működőképes
10-et sorban próbáltam ki, és végül csak két megoldás volt működőképes a Shoprenter kódkörnyezetében. Tehát csak kettő.
Ez itt tekinthető meg: https://qmsmedicosmetics.hu/anti-aging
Ugyanerre később felirat is került.
Itt nézhető meg: https://qmsmedicosmetics.hu/qms-borapolasi-rutin
A megoldás az volt a felirat elhelyezésére, hogy a slider keret méretét a “háttérkép” határozza meg, ami megadja a div alsó és felső pontjait, és ehhez képest kell függőlegesen középre tenni a szövegboxot.
Ha te kedves olvasó szintén a Shoprenterre akarsz hasonló slidert készíteni, akkor bányászd ki a kódból.
De mielőtt ezt kibányásznád, lejjebb a testimonial slidernek (úgy mellékesen) kicsit talán jobb a kódja.
Nézd meg azért azt is.
