{"id":1317,"date":"2015-11-03T09:58:18","date_gmt":"2015-11-03T09:58:18","guid":{"rendered":"https:\/\/www.templatemonster.com\/pl\/blog\/?p=1317"},"modified":"2020-04-02T10:05:38","modified_gmt":"2020-04-02T10:05:38","slug":"suwak-z-dynamiczna-animacja-z-pomoca-glide-js","status":"publish","type":"post","link":"https:\/\/monsterspost.com\/pl\/suwak-z-dynamiczna-animacja-z-pomoca-glide-js\/","title":{"rendered":"Suwak z dynamiczn\u0105 animacj\u0105 z pomoc\u0105 Glide.js"},"content":{"rendered":"

Wi\u0119kszo\u015b\u0107 deweloperzy powinni by\u0107 zaznajomieni z koncepcj\u0105 slideshow. Przewa\u017cnie te elementy s\u0105 umieszczane w g\u00f3rnej cz\u0119\u015bci strony tu\u017c pod nag\u0142\u00f3wkiem. Slajdy mog\u0105 zawiera\u0107 tekst, obrazki, wideo, lub po\u0142aczenie wszystkich tych element\u00f3w. Celem slideshow jest, aby przyci\u0105gn\u0105\u0107 uwag\u0119 ludzi i zach\u0119ci\u0107 do dalszego poruszania si\u0119 stron\u0105.<\/p>\n

W tym tutorialu poka\u017c\u0119 stworzenie prostej wersji takich suwak\u00f3w. Glide.js<\/a> jest open source, responsywny i idealny dla ka\u017cdego uk\u0142adu. Mo\u017cesz dostosowa\u0107 kolory i elementy interfejsu u\u017cytkownika w suwaku. Ma r\u00f3wnie\u017c mn\u00f3stwo opcji jQuery do dostosowania interfejsem u\u017cytkownika.<\/p>\n

\"glidejs<\/a><\/p>\n

Demo<\/a><\/strong> \u2013 Pobierz kod \u017ar\u00f3dlowy<\/a><\/strong><\/p>\n

Z<\/span>acznijmy! <\/span><\/h3>\n

Pierwszym krokiem jest pobranie kopii lokalnej Glide.js bezpo\u015brednio z Github<\/a>. Skopiowalam jquery.glide.min.js<\/strong> do folderu \/js\/. Mo\u017cesz r\u00f3wnie\u017c \u015bci\u0105gn\u0105\u0107 lokaln\u0105 kopi\u0119 jQuery<\/a> i zapisa\u0107 j\u0105 w tym samym folderze.<\/p>\n

\n\n\n\n
\n
1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n11\r\n12\r\n13\r\n14\r\n<\/pre>\n<\/td>\n
\n
<!<\/span>doctype html><\/span>\r\n<<\/span>html lang=<\/span>\"en-US\"<\/span>><\/span>\r\n<<\/span>head><\/span>\r\n  <<\/span>meta charset=<\/span>\"utf-8\"<\/span>><\/span>\r\n  <<\/span>meta http-<\/span>equiv=<\/span>\"Content-Type\"<\/span> content=<\/span>\"text\/html\"<\/span>><\/span>\r\n  <<\/span>title><\/span>Glide.<\/span>js Content Slider Demo -<\/span> Template Monster<\/<\/span>title><\/span>\r\n  <<\/span>meta name=<\/span>\"author\"<\/span> content=<\/span>\"Jake Rocheleau\"<\/span>><\/span>\r\n  <<\/span>meta name=<\/span>\"viewport\"<\/span> content=<\/span>\"width=device-width,initial-scale=1.0,user-scalable=no\"<\/span>><\/span>\r\n  <<\/span>link<\/span> rel=<\/span>\"shortcut icon\"<\/span> href=<\/span>\"http:\/\/www.templatemonster.com\/favicon.ico\"<\/span>><\/span>\r\n  <<\/span>link<\/span> rel=<\/span>\"icon\"<\/span> href=<\/span>\"http:\/\/www.templatemonster.com\/favicon.ico\"<\/span>><\/span>\r\n  <<\/span>link<\/span> rel=<\/span>\"stylesheet\"<\/span> type=<\/span>\"text\/css\"<\/span> media=<\/span>\"all\"<\/span> href=<\/span>\"css\/styles.css\"<\/span>><\/span>\r\n  <<\/span>script type=<\/span>\"text\/javascript\"<\/span> src=<\/span>\"js\/jquery-1.10.2.min.js\"<\/span>><\/span><\/script><\/span>\r\n  <<\/span>script type=<\/span>\"text\/javascript\"<\/span> src=<\/span>\"js\/jquery.glide.min.js\"<\/span>><\/span><\/script><\/span>\r\n<\/<\/span>head><\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Stworzy\u0142am w\u0142asny arkusza styl\u00f3w styles.css<\/strong> do zmiany stylu ca\u0142ej strony. Glide.js pochodzi z w\u0142asnego arkusza styl\u00f3w, wi\u0119c skopiowa\u0142am go do mojego nowego pliku. W ten spos\u00f3b wszystko jest konsolidowane razem i znacznie \u0142atwiej jest edytowa\u0107 wszystkie elementy. Poniewa\u017c wtyczka jest responsywna musz\u0119 e\u00f3wnie\u017c skonfigurowa\u0107 meta tag obszaru wy\u015bwietlania do obs\u0142ugi tablet\u00f3w i smartfon\u00f3w.
\nGlide jest bardzo \u0142atwy w dostosowaniu. Potrzebnie ponownie zdefiniowa\u0107 niekt\u00f3re style CSS przed przeniesieniem na co\u015b inne. Ale najpierw rzu\u0107my okiem na moj\u0105 struktur\u0119 strony.<\/span><\/p>\n
Elementy HTML<\/h3>\n
Wtyczka dzia\u0142a poprzez pod\u0142\u0105czenie do elementu pojemnika, kt\u00f3ry posiada wewn\u0119trzn\u0105 nieuporz\u0105dkowan\u0105 list\u0119 element\u00f3w. Ka\u017cdy element listy zachowuje si\u0119 jak nowy slajd w pokazie slajd\u00f3w. Poni\u017cej jest przyk\u0142adowy kod z dokumentacji GitHub:<\/p>\n
\n\n\n\n
\n
1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n11\r\n12\r\n13\r\n14\r\n15\r\n16\r\n17\r\n<\/pre>\n<\/td>\n
\n
<<\/span>div class<\/span>=<\/span>\"slider\"<\/span>><\/span>\r\n  <<\/span>ul class<\/span>=<\/span>\"slides\"<\/span>><\/span>\r\n    <<\/span>li class<\/span>=<\/span>\"slide\"<\/span>><\/<\/span>li><\/span>\r\n    <<\/span>li class<\/span>=<\/span>\"slide\"<\/span>><\/<\/span>li><\/span>\r\n    <<\/span>li class<\/span>=<\/span>\"slide\"<\/span>><\/<\/span>li><\/span>\r\n  <\/<\/span>ul><\/span>\r\n<\/<\/span>div><\/span>\r\nI kept most of these same class<\/span> names to simplify the process.<\/span> But you could rearrange things to use<\/span> specific ID names,<\/span> or even different classes running different options.<\/span> Most websites do<\/span> not need more than 1<\/span> or 2<\/span> of these sliders and that's why using an ID on the container might be a better solution.\r\n\u00a0\r\n<pre lang=\"PHP\" line=\"1\"><div class=\"slider\">\r\n  <ul class=\"slides\">\r\n    <li class=\"slide\">\r\n      <figure>\r\n        <figcaption>Designed by <a href=\"http:\/\/dribbble.com\/shots\/1362980-Witches\" target=\"_blank\" rel=\"nofollow\">Adam Record<\/a><\/figcaption>\r\n        <img src=\"img\/witches.png\" alt=\"dribbble witches\">\r\n      <\/figure>\r\n    <\/li><\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
M\u00f3j poradnik zawiera nieco wi\u0119cej ca\u0142ych figur graficznych w ramach ka\u017cdego elementu listy. Element graficzny zawiera obrazek wraz z figcaption do zapewnienia oryginalnego linku \u017ar\u00f3d\u0142owego. Ten pojemnik jest wymagany, wi\u0119c wszystko wewn\u0105trz elementu listy mo\u017ce by\u0107 na wy\u015brodkowane, bez przemieszczania strza\u0142ek przewijania na ka\u017cdej stronie.<\/p>\n
Zaktualizowane\u00a0CSS Styles<\/h3>\n
Nazwy klas s\u0105 domy\u015blne, mog\u0105 by\u0107 \u0142atwo zmienione w razie potrzeby, wi\u0119c prosz\u0119 o tym pami\u0119ta\u0107 przy przenoszeniu kodu do swojej witryny internetowej.<\/p>\n
\n\n\n\n
\n
1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n11\r\n12\r\n13\r\n14\r\n15\r\n16\r\n17\r\n18\r\n19\r\n20\r\n21\r\n22\r\n23\r\n<\/pre>\n<\/td>\n
\n
.<\/span>slider {<\/span>\r\n  position:<\/span> relative;<\/span>\r\n  width:<\/span> 100<\/span>%;<\/span>\r\n  height:<\/span> 500px;<\/span>\r\n  overflow:<\/span> hidden;<\/span>\r\n}<\/span>\r\n\u00a0\r\n.<\/span>slides {<\/span>\r\n  height:<\/span> 100<\/span>%;<\/span>\r\n  overflow:<\/span> hidden;<\/span>\r\n  \/**\t\r\n   * Prevent blinking issue\r\n   * Not tested. Experimental.\r\n   *\/<\/span>\r\n  -<\/span>webkit-<\/span>backface-<\/span>visibility:<\/span> hidden;<\/span>\r\n  -<\/span>webkit-<\/span>transform-<\/span>style:<\/span> preserve-<\/span>3d;<\/span>\r\n\u00a0\r\n   -<\/span>webkit-<\/span>transition:<\/span> all 500ms cubic-<\/span>bezier(<\/span>0.165<\/span>,<\/span> 0.840<\/span>,<\/span> 0.440<\/span>,<\/span> 1.000<\/span>)<\/span>;<\/span> \r\n   -<\/span>moz-<\/span>transition:<\/span> all 500ms cubic-<\/span>bezier(<\/span>0.165<\/span>,<\/span> 0.840<\/span>,<\/span> 0.440<\/span>,<\/span> 1.000<\/span>)<\/span>;<\/span> \r\n   -<\/span>ms-<\/span>transition:<\/span> all 500ms cubic-<\/span>bezier(<\/span>0.165<\/span>,<\/span> 0.840<\/span>,<\/span> 0.440<\/span>,<\/span> 1.000<\/span>)<\/span>;<\/span> \r\n   -<\/span>o-<\/span>transition:<\/span> all 500ms cubic-<\/span>bezier(<\/span>0.165<\/span>,<\/span> 0.840<\/span>,<\/span> 0.440<\/span>,<\/span> 1.000<\/span>)<\/span>;<\/span> \r\n   transition:<\/span> all 500ms cubic-<\/span>bezier(<\/span>0.165<\/span>,<\/span> 0.840<\/span>,<\/span> 0.440<\/span>,<\/span> 1.000<\/span>)<\/span>;<\/span>\r\n}<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Wykorzystanie\u00a0width:100%<\/strong>\u00a0pozwala na zachowanie sta\u0142ej wysoko\u015bci. Mo\u017cesz zmieni\u0107 ten numer, aby bdok\u0142adnie pasowa\u0142 do Twojego uk\u0142adu. Wszystkie przej\u015bcia CSS3 powinny zosta\u0107, poniewa\u017c s\u0105 one stosowane przez Glide.js mi\u0119dzy ka\u017cdym slajdem.<\/p>\n
\n\n\n\n
\n
1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n11\r\n12\r\n13\r\n14\r\n15\r\n16\r\n17\r\n18\r\n19\r\n20\r\n21\r\n22\r\n23\r\n24\r\n25\r\n26\r\n27\r\n28\r\n29\r\n30\r\n31\r\n32\r\n33\r\n34\r\n35\r\n36\r\n37\r\n38\r\n39\r\n40\r\n41\r\n42\r\n43\r\n44\r\n45\r\n46\r\n47\r\n48\r\n49\r\n50\r\n51\r\n52\r\n53\r\n54\r\n55\r\n56\r\n57\r\n58\r\n59\r\n60\r\n61\r\n62\r\n63\r\n64\r\n65\r\n66\r\n67\r\n68\r\n69\r\n70\r\n71\r\n72\r\n73\r\n74\r\n75\r\n76\r\n<\/pre>\n<\/td>\n
\n
.<\/span>slide {<\/span>\r\n  height:<\/span> 100<\/span>%;<\/span>\r\n  float:<\/span> left;<\/span>\r\n  clear:<\/span> none;<\/span>\r\n}<\/span>\r\n.<\/span>slide figure {<\/span>\r\n  display:<\/span> block;<\/span>\r\n  position:<\/span> relative;<\/span>\r\n  text-<\/span>align:<\/span> center;<\/span>\r\n}<\/span>\r\n.<\/span>slide figure figcaption {<\/span>\r\n  position:<\/span> absolute;<\/span>\r\n  right:<\/span> 20<\/span>%;<\/span>\r\n  font-<\/span>size:<\/span> 1.<\/span>1em;<\/span>\r\n  font-<\/span>weight:<\/span> bold;<\/span>\r\n  padding:<\/span> 8px 14px;<\/span>\r\n  color:<\/span> #464646;\r\n<\/span>  background:<\/span> rgba(<\/span>255<\/span>,<\/span>255<\/span>,<\/span>255<\/span>,<\/span>0.8<\/span>)<\/span>;<\/span> \r\n}<\/span>\r\n.<\/span>slide figure figcaption a {<\/span>\r\n  color:<\/span> #5a7fbc;\r\n<\/span>  text-<\/span>decoration:<\/span> none;<\/span>\r\n}<\/span>\r\n.<\/span>slide figure figcaption a:<\/span>hover {<\/span> text-<\/span>decoration:<\/span> underline;<\/span> }<\/span>\r\n\u00a0\r\n.<\/span>slide figure img {<\/span>\r\n  max-<\/span>height:<\/span> 480px;<\/span>\r\n}<\/span>\r\nThese styles were manually added to contain the image and the caption label.<\/span> The outer figure element is positioned relatively to allow for<\/span> absolute positioning of the label.<\/span> Percentages are the best solution when using a mobile-<\/span>responsive plugin so everything works as<\/span> best as<\/span> possible.<\/span>\r\n\u00a0\r\n<<\/span>pre lang=<\/span>\"PHP\"<\/span> line=<\/span>\"1\"<\/span>>.<\/span>slider-<\/span>arrows {<\/span>}<\/span>\r\n\u00a0\r\n.<\/span>slider-<\/span>arrow {<\/span>\r\n  position:<\/span> absolute;<\/span>\r\n  display:<\/span> block;<\/span>\r\n  margin-<\/span>bottom:<\/span> -<\/span>20px;<\/span>\r\n  padding:<\/span> 20px;<\/span>\r\n  font-<\/span>family:<\/span> 'Alegreya Sans'<\/span>,<\/span> 'Trebuchet MS'<\/span>,<\/span> sans-<\/span>serif;<\/span>\r\n  text-<\/span>decoration:<\/span> none;<\/span>\r\n  font-<\/span>weight:<\/span> 900<\/span>;<\/span>\r\n  font-<\/span>size:<\/span> 3.<\/span>0em;<\/span>\r\n  color:<\/span> #fff;\r\n<\/span>  border:<\/span> 1px solid #fff;\r\n<\/span>  border-<\/span>radius:<\/span> 8px;<\/span>\r\n  -<\/span>webkit-<\/span>transition:<\/span> all 0.<\/span>2s linear;<\/span>\r\n  -<\/span>moz-<\/span>transition:<\/span> all 0.<\/span>2s linear;<\/span>\r\n  transition:<\/span> all 0.<\/span>2s linear;<\/span>\r\n}<\/span>\r\n.<\/span>slider-<\/span>arrow:<\/span>hover {<\/span>\r\n  background:<\/span> #ddd;\r\n<\/span>  color:<\/span> #aaa;\r\n<\/span>}<\/span>\r\n.<\/span>slider-<\/span>arrow--<\/span>right {<\/span> bottom:<\/span> 50<\/span>%;<\/span> right:<\/span> 30px;<\/span> }<\/span>\r\n.<\/span>slider-<\/span>arrow--<\/span>left {<\/span> bottom:<\/span> 50<\/span>%;<\/span> left:<\/span> 30px;<\/span> }<\/span>\r\n\u00a0\r\n\u00a0\r\n\u00a0\r\n.<\/span>slider-<\/span>nav {<\/span>\r\n  position:<\/span> absolute;<\/span>\r\n  bottom:<\/span> 0px;<\/span>\r\n}<\/span>\r\n\u00a0\r\n.<\/span>slider-<\/span>nav__item {<\/span>\r\n  width:<\/span> 12px;<\/span>\r\n  height:<\/span> 12px;<\/span>\r\n  float:<\/span> left;<\/span>\r\n  clear:<\/span> none;<\/span>\r\n  display:<\/span> block;<\/span>\r\n  margin:<\/span> 0<\/span> 5px;<\/span>\r\n  background:<\/span> #fff;\r\n<\/span>  -<\/span>webkit-<\/span>border-<\/span>radius:<\/span> 7px;<\/span>\r\n  -<\/span>moz-<\/span>border-<\/span>radius:<\/span> 7px;<\/span>\r\n  border-<\/span>radius:<\/span> 7px;<\/span>\r\n}<\/span>\r\n.<\/span>slider-<\/span>nav__item:<\/span>hover {<\/span> background:<\/span> #bababa; }\r\n<\/span>.<\/span>slider-<\/span>nav__item--<\/span>current<\/span>,<\/span> .<\/span>slider-<\/span>nav__item--<\/span>current<\/span>:<\/span>hover {<\/span> background:<\/span> #999; }<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Strza\u0142ki w lewo\/ w prawo mog\u0105 by\u0107 aktualizowane za pomoc\u0105 jQuery.\u00a0To mo\u017cna r\u00f3wnie\u017c wykorzysta\u0107 dla przycisk\u00f3w nawigacji slajd\u00f3w. Dla ka\u017cdego elementu listy Glide.js do\u0142\u0105czy jeden nowy punkt, kt\u00f3ry zachowuje si\u0119 jak indeks. Mo\u017cna dostosowa\u0107 re\u017cim aktywny\/nieaktywny dla wybranego elementu nawigacyjnego.<\/p>\n
Akywowanie\u00a0Glide.js<\/h3>\n
Je\u015bli mamy wtyczki i jQuery zawarte w dokumencie, wszystko, co pozosta\u0142o - to inicjowanie. Mo\u017cemy wykorzysta\u0107 prosty $(\u2018.slider\u2019).glide()<\/strong>, kt\u00f3ry ma ustawienia domy\u015blne. Ale chc\u0119 troch\u0119 dostosowa\u0107 slider.\u00a0Glide.js ma du\u017c\u0105 list\u0119 opcji wtyczek, kt\u00f3re mo\u017cna przeczyta\u0107 w\u00a0Github dokumentacji<\/a>.<\/p>\n
\n\n\n\n
\n
1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n<\/pre>\n<\/td>\n
\n
$(<\/span>'.slider'<\/span>)<\/span>.<\/span>glide(<\/span>{<\/span>\r\n    autoplay:<\/span> 3500<\/span>,<\/span>\r\n    hoverpause:<\/span> true<\/span>,<\/span> \/\/ set to false for nonstop rotate<\/span>\r\n    arrowRightText:<\/span> '&rarr;'<\/span>,<\/span>\r\n    arrowLeftText:<\/span> '&larr;'<\/span>\r\n  }<\/span>)<\/span>;<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
autoplay<\/strong> mo\u017ce by\u0107 ustawiona na false, je\u015bli nie chcesz automatycznego przewijania slajd\u00f3w. W przeciwnym wypadku warto\u015b\u0107 numeryczna jest okre\u015blona w milisekundach pomi\u0119dzy przej\u015bciem slajd\u00f3w.\u00a0hoverpause<\/strong> jest r\u00f3wnie\u017c \u015bwietnym rozwi\u0105zaniem, kt\u00f3re automatycznie zatrzymuje suwak, gdy nie jest aktywny. Je\u015bli nie podoba Ci si\u0119 ta funkca, zawsze mo\u017cesz \u0142atw\u0105 j\u0105 wy\u0142\u0105czy\u0107.<\/p>\n
S\u0142owa \"Nast\u0119pny\" i \"Poprzedni\" zmieni\u0142am na HTML podmioty strza\u0142ek. Teraz pojawiaj\u0105 si\u0119 one na stronie jako przyciski, kt\u00f3re s\u0105 bardziej przyjazne dla u\u017cytkownika.<\/p>\n
\"glidejs<\/a><\/p>\n
Demo<\/a><\/strong> \u2013 Pobierz kod \u017ar\u00f3d\u0142owy<\/a><\/strong><\/p>\n
* * *<\/p>\n
Ten artyku\u0142 zosta\u0142 przet\u0142umaczony z angielskiego. Orygina\u0142 mo\u017cna znale\u017a\u0107 tutaj: Implement a Dynamic Animated Slider Using Glide.js<\/a>.<\/em><\/p>\n
<\/h3>\n","protected":false},"excerpt":{"rendered":"
Wi\u0119kszo\u015b\u0107 deweloperzy powinni by\u0107 zaznajomieni z koncepcj\u0105 slideshow. Przewa\u017cnie te elementy s\u0105 umieszczane w g\u00f3rnej cz\u0119\u015bci strony tu\u017c pod nag\u0142\u00f3wkiem. Slajdy mog\u0105 zawiera\u0107 tekst, obrazki, wideo, lub po\u0142aczenie wszystkich tych element\u00f3w. Celem slideshow jest, aby przyci\u0105gn\u0105\u0107 uwag\u0119 ludzi i zach\u0119ci\u0107 do dalszego poruszania si\u0119 stron\u0105. W tym tutorialu poka\u017c\u0119 stworzenie prostej wersji takich suwak\u00f3w. Glide.js […]<\/p>\n","protected":false},"author":2098093,"featured_media":1318,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[23],"tags":[66,157,183],"yoast_head":"\nSuwak z dynamiczn\u0105 animacj\u0105 z pomoc\u0105 Glide.js<\/title>\n<meta name=\"description\" content=\"Suwak z dynamiczn\u0105 animacj\u0105 z pomoc\u0105 Glide.js. Tutorial\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/monsterspost.com\/pl\/suwak-z-dynamiczna-animacja-z-pomoca-glide-js\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Suwak z dynamiczn\u0105 animacj\u0105 z pomoc\u0105 Glide.js\" \/>\n<meta property=\"og:description\" content=\"Suwak z dynamiczn\u0105 animacj\u0105 z pomoc\u0105 Glide.js. Tutorial\" \/>\n<meta property=\"og:url\" content=\"https:\/\/monsterspost.com\/pl\/suwak-z-dynamiczna-animacja-z-pomoca-glide-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Polski Blog TemplateMonster\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/TemplateMonster.Poland\/\" \/>\n<meta property=\"article:published_time\" content=\"2015-11-03T09:58:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-04-02T10:05:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/monsterspost.com\/pl\/wp-content\/uploads\/sites\/6\/2015\/11\/2014.01.30.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"536\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Katarzyna Paw\u0142owska\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@TM_Polska\" \/>\n<meta name=\"twitter:site\" content=\"@TM_Polska\" \/>\n<meta name=\"twitter:label1\" content=\"Napisane przez\" \/>\n\t<meta name=\"twitter:data1\" content=\"Katarzyna Paw\u0142owska\" \/>\n\t<meta name=\"twitter:label2\" content=\"Szacowany czas czytania\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minut\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/monsterspost.com\/pl\/suwak-z-dynamiczna-animacja-z-pomoca-glide-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/pl\/suwak-z-dynamiczna-animacja-z-pomoca-glide-js\/\"},\"author\":{\"name\":\"Katarzyna Paw\u0142owska\",\"@id\":\"https:\/\/monsterspost.com\/pl\/#\/schema\/person\/2999e876fc63abe75a8811b5d8e045d8\"},\"headline\":\"Suwak z dynamiczn\u0105 animacj\u0105 z pomoc\u0105 Glide.js\",\"datePublished\":\"2015-11-03T09:58:18+00:00\",\"dateModified\":\"2020-04-02T10:05:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/monsterspost.com\/pl\/suwak-z-dynamiczna-animacja-z-pomoca-glide-js\/\"},\"wordCount\":636,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/pl\/#organization\"},\"keywords\":[\"Dostosowywanie\",\"Optymizacja i SEO\",\"Tutorial\"],\"articleSection\":[\"Tutoriale\"],\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/monsterspost.com\/pl\/suwak-z-dynamiczna-animacja-z-pomoca-glide-js\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/monsterspost.com\/pl\/suwak-z-dynamiczna-animacja-z-pomoca-glide-js\/\",\"url\":\"https:\/\/monsterspost.com\/pl\/suwak-z-dynamiczna-animacja-z-pomoca-glide-js\/\",\"name\":\"Suwak z dynamiczn\u0105 animacj\u0105 z pomoc\u0105 Glide.js\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/pl\/#website\"},\"datePublished\":\"2015-11-03T09:58:18+00:00\",\"dateModified\":\"2020-04-02T10:05:38+00:00\",\"description\":\"Suwak z dynamiczn\u0105 animacj\u0105 z pomoc\u0105 Glide.js. Tutorial\",\"breadcrumb\":{\"@id\":\"https:\/\/monsterspost.com\/pl\/suwak-z-dynamiczna-animacja-z-pomoca-glide-js\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/monsterspost.com\/pl\/suwak-z-dynamiczna-animacja-z-pomoca-glide-js\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/monsterspost.com\/pl\/suwak-z-dynamiczna-animacja-z-pomoca-glide-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/monsterspost.com\/pl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Suwak z dynamiczn\u0105 animacj\u0105 z pomoc\u0105 Glide.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/monsterspost.com\/pl\/#website\",\"url\":\"https:\/\/monsterspost.com\/pl\/\",\"name\":\"Polski Blog TemplateMonster\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/pl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/monsterspost.com\/pl\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"pl-PL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/monsterspost.com\/pl\/#organization\",\"name\":\"MonsterPost Polska\",\"url\":\"https:\/\/monsterspost.com\/pl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/monsterspost.com\/pl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/monsterspost.com\/pl\/wp-content\/uploads\/sites\/6\/2020\/03\/Logo-TM.png\",\"contentUrl\":\"https:\/\/monsterspost.com\/pl\/wp-content\/uploads\/sites\/6\/2020\/03\/Logo-TM.png\",\"width\":180,\"height\":180,\"caption\":\"MonsterPost Polska\"},\"image\":{\"@id\":\"https:\/\/monsterspost.com\/pl\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.instagram.com\/templatemonster_pl\/\",\"https:\/\/www.pinterest.com\/TM_Polska\/\",\"https:\/\/www.youtube.com\/channel\/UCjXro5nNpRT0p0YY6MGl4sQ\",\"https:\/\/www.facebook.com\/TemplateMonster.Poland\/\",\"https:\/\/twitter.com\/TM_Polska\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/monsterspost.com\/pl\/#\/schema\/person\/2999e876fc63abe75a8811b5d8e045d8\",\"name\":\"Katarzyna Paw\u0142owska\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/monsterspost.com\/pl\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/5711b6355781e59c81d4da82c476bd97?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/5711b6355781e59c81d4da82c476bd97?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"caption\":\"Katarzyna Paw\u0142owska\"},\"description\":\"W bran\u017cy IT od 8 lat. Fan nowych technologii webowych, web designu oraz rozwi\u0105za\u0144 u\u017cytecznych i funkcjonalnych. W praktyce: marketer, DJ, blogerka. W wolnym czasie wspiera inicjatywy propaguj\u0105ce wiedz\u0119 z dziedziny SMM i rozwija swoj\u0105 mi\u0142o\u015b\u0107 do crossfitu.\",\"url\":\"https:\/\/monsterspost.com\/pl\/author\/katrina\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Suwak z dynamiczn\u0105 animacj\u0105 z pomoc\u0105 Glide.js","description":"Suwak z dynamiczn\u0105 animacj\u0105 z pomoc\u0105 Glide.js. Tutorial","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:\/\/monsterspost.com\/pl\/suwak-z-dynamiczna-animacja-z-pomoca-glide-js\/","og_locale":"pl_PL","og_type":"article","og_title":"Suwak z dynamiczn\u0105 animacj\u0105 z pomoc\u0105 Glide.js","og_description":"Suwak z dynamiczn\u0105 animacj\u0105 z pomoc\u0105 Glide.js. Tutorial","og_url":"https:\/\/monsterspost.com\/pl\/suwak-z-dynamiczna-animacja-z-pomoca-glide-js\/","og_site_name":"Polski Blog TemplateMonster","article_publisher":"https:\/\/www.facebook.com\/TemplateMonster.Poland\/","article_published_time":"2015-11-03T09:58:18+00:00","article_modified_time":"2020-04-02T10:05:38+00:00","og_image":[{"width":900,"height":536,"url":"https:\/\/monsterspost.com\/pl\/wp-content\/uploads\/sites\/6\/2015\/11\/2014.01.30.jpg","type":"image\/jpeg"}],"author":"Katarzyna Paw\u0142owska","twitter_card":"summary_large_image","twitter_creator":"@TM_Polska","twitter_site":"@TM_Polska","twitter_misc":{"Napisane przez":"Katarzyna Paw\u0142owska","Szacowany czas czytania":"6 minut"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/monsterspost.com\/pl\/suwak-z-dynamiczna-animacja-z-pomoca-glide-js\/#article","isPartOf":{"@id":"https:\/\/monsterspost.com\/pl\/suwak-z-dynamiczna-animacja-z-pomoca-glide-js\/"},"author":{"name":"Katarzyna Paw\u0142owska","@id":"https:\/\/monsterspost.com\/pl\/#\/schema\/person\/2999e876fc63abe75a8811b5d8e045d8"},"headline":"Suwak z dynamiczn\u0105 animacj\u0105 z pomoc\u0105 Glide.js","datePublished":"2015-11-03T09:58:18+00:00","dateModified":"2020-04-02T10:05:38+00:00","mainEntityOfPage":{"@id":"https:\/\/monsterspost.com\/pl\/suwak-z-dynamiczna-animacja-z-pomoca-glide-js\/"},"wordCount":636,"commentCount":0,"publisher":{"@id":"https:\/\/monsterspost.com\/pl\/#organization"},"keywords":["Dostosowywanie","Optymizacja i SEO","Tutorial"],"articleSection":["Tutoriale"],"inLanguage":"pl-PL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/monsterspost.com\/pl\/suwak-z-dynamiczna-animacja-z-pomoca-glide-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/monsterspost.com\/pl\/suwak-z-dynamiczna-animacja-z-pomoca-glide-js\/","url":"https:\/\/monsterspost.com\/pl\/suwak-z-dynamiczna-animacja-z-pomoca-glide-js\/","name":"Suwak z dynamiczn\u0105 animacj\u0105 z pomoc\u0105 Glide.js","isPartOf":{"@id":"https:\/\/monsterspost.com\/pl\/#website"},"datePublished":"2015-11-03T09:58:18+00:00","dateModified":"2020-04-02T10:05:38+00:00","description":"Suwak z dynamiczn\u0105 animacj\u0105 z pomoc\u0105 Glide.js. Tutorial","breadcrumb":{"@id":"https:\/\/monsterspost.com\/pl\/suwak-z-dynamiczna-animacja-z-pomoca-glide-js\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/monsterspost.com\/pl\/suwak-z-dynamiczna-animacja-z-pomoca-glide-js\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/monsterspost.com\/pl\/suwak-z-dynamiczna-animacja-z-pomoca-glide-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/monsterspost.com\/pl\/"},{"@type":"ListItem","position":2,"name":"Suwak z dynamiczn\u0105 animacj\u0105 z pomoc\u0105 Glide.js"}]},{"@type":"WebSite","@id":"https:\/\/monsterspost.com\/pl\/#website","url":"https:\/\/monsterspost.com\/pl\/","name":"Polski Blog TemplateMonster","description":"","publisher":{"@id":"https:\/\/monsterspost.com\/pl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/monsterspost.com\/pl\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"pl-PL"},{"@type":"Organization","@id":"https:\/\/monsterspost.com\/pl\/#organization","name":"MonsterPost Polska","url":"https:\/\/monsterspost.com\/pl\/","logo":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/monsterspost.com\/pl\/#\/schema\/logo\/image\/","url":"https:\/\/monsterspost.com\/pl\/wp-content\/uploads\/sites\/6\/2020\/03\/Logo-TM.png","contentUrl":"https:\/\/monsterspost.com\/pl\/wp-content\/uploads\/sites\/6\/2020\/03\/Logo-TM.png","width":180,"height":180,"caption":"MonsterPost Polska"},"image":{"@id":"https:\/\/monsterspost.com\/pl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/templatemonster_pl\/","https:\/\/www.pinterest.com\/TM_Polska\/","https:\/\/www.youtube.com\/channel\/UCjXro5nNpRT0p0YY6MGl4sQ","https:\/\/www.facebook.com\/TemplateMonster.Poland\/","https:\/\/twitter.com\/TM_Polska"]},{"@type":"Person","@id":"https:\/\/monsterspost.com\/pl\/#\/schema\/person\/2999e876fc63abe75a8811b5d8e045d8","name":"Katarzyna Paw\u0142owska","image":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/monsterspost.com\/pl\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/5711b6355781e59c81d4da82c476bd97?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5711b6355781e59c81d4da82c476bd97?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","caption":"Katarzyna Paw\u0142owska"},"description":"W bran\u017cy IT od 8 lat. Fan nowych technologii webowych, web designu oraz rozwi\u0105za\u0144 u\u017cytecznych i funkcjonalnych. W praktyce: marketer, DJ, blogerka. W wolnym czasie wspiera inicjatywy propaguj\u0105ce wiedz\u0119 z dziedziny SMM i rozwija swoj\u0105 mi\u0142o\u015b\u0107 do crossfitu.","url":"https:\/\/monsterspost.com\/pl\/author\/katrina\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/posts\/1317"}],"collection":[{"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/users\/2098093"}],"replies":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/comments?post=1317"}],"version-history":[{"count":2,"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/posts\/1317\/revisions"}],"predecessor-version":[{"id":12487,"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/posts\/1317\/revisions\/12487"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/media\/1318"}],"wp:attachment":[{"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/media?parent=1317"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/categories?post=1317"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/tags?post=1317"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}