{"id":407,"date":"2024-06-05T22:30:05","date_gmt":"2024-06-05T20:30:05","guid":{"rendered":"https:\/\/projektninja.com\/devblog\/?p=407"},"modified":"2024-06-15T16:54:26","modified_gmt":"2024-06-15T14:54:26","slug":"ninja-smigacz-wtyczka","status":"publish","type":"post","link":"https:\/\/projektninja.com\/devblog\/wtyczki-ninja\/ninja-smigacz-wtyczka\/","title":{"rendered":"Wtyczka: Ninja \u015amigacz \u2013 Nieko\u0144cz\u0105ce si\u0119 przewijanie p\u0142ynnej karuzeli obiekt\u00f3w"},"content":{"rendered":"\n<p><strong>Ninja \u015amigacz<\/strong> to wtyczka WordPress, kt\u00f3ra pozwala na stworzenie p\u0142ynnie przewijaj\u0105cej si\u0119 karuzeli obiekt\u00f3w. Dzi\u0119ki temu u\u017cytkownicy mog\u0105 cieszy\u0107 si\u0119 nieko\u0144cz\u0105cym si\u0119 przewijaniem zawarto\u015bci bez przerw. Wtyczka jest \u0142atwa do zaimplementowania i wykorzystuje <strong>HTML<\/strong>, <strong>CSS<\/strong>, i <strong>JavaScript\/jQuery<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">ninja-smigacz.css<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.smigacz {\n    overflow: hidden;\n    display: flex;\n    white-space: nowrap;\n}\n\n.marka {\n    flex: 0 0 200px; \/* Sta\u0142a szeroko\u015b\u0107 ka\u017cdego elementu *\/\n    width: 200px;\n    height: 100px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>JavaScript\/jQuery<\/strong>: ninja-smigacz.js<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>jQuery(document).ready(function() {\n    const szerokoscMarki = 200; \/\/ Szeroko\u015b\u0107 jednego elementu\n    const czasAnimacji = 500; \/\/ Czas trwania animacji w ms\n    const czasPauzy = 500; \/\/ Pauza mi\u0119dzy animacjami w ms\n\n    jQuery('.smigacz').each(function() {\n        const jQuerysmigacz = jQuery(this);\n        const marki = jQuerysmigacz.find('.marka').clone();\n\n        function setupCarousel() {\n            jQuerysmigacz.empty().append(marki).append(marki.clone());\n        }\n\n        function przesunMarki() {\n            function autoScroll() {\n                jQuerysmigacz.animate({scrollLeft: '+=' + szerokoscMarki}, czasAnimacji, 'linear', function() {\n                    const firstMark = jQuerysmigacz.find('.marka:first');\n                    firstMark.appendTo(jQuerysmigacz);\n                    jQuerysmigacz.scrollLeft(jQuerysmigacz.scrollLeft() - szerokoscMarki);\n                    setTimeout(autoScroll, czasPauzy);\n                });\n            }\n            autoScroll();\n        }\n\n        setupCarousel();\n        przesunMarki();\n    });\n});\n\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>HTML<\/strong>: Dodaj kod HTML do strony, aby utworzy\u0107 struktur\u0119 karuzeli.<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"smigacz\"&gt;\n    &lt;div class=\"marka\"&gt;&lt;img alt=\"\" src=\"link_do_obrazu\"&gt;&lt;\/div&gt;\n    &lt;!-- Dodaj wi\u0119cej element\u00f3w .marka z odpowiednimi obrazami --&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<div class=\"wp-block-file\"><a id=\"wp-block-file--media-3e62fda3-327d-4845-8eeb-5eda9c08bee8\" href=\"https:\/\/projektninja.com\/devblog\/wp-content\/uploads\/ninja-smigacz.zip\">ninja-smigacz<\/a><a href=\"https:\/\/projektninja.com\/devblog\/wp-content\/uploads\/ninja-smigacz.zip\" class=\"wp-block-file__button wp-element-button\" download aria-describedby=\"wp-block-file--media-3e62fda3-327d-4845-8eeb-5eda9c08bee8\">Pobierz<\/a><\/div>\n\n\n\n<ul class=\"wp-block-list\"><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Dowiedz si\u0119, jak zaimplementowa\u0107 p\u0142ynn\u0105 karuzel\u0119 obiekt\u00f3w w WordPress, aby uzyska\u0107 efekt nieko\u0144cz\u0105cego si\u0119 przewijania i poprawi\u0107 do\u015bwiadczenie u\u017cytkownika.<\/p>\n","protected":false},"author":1,"featured_media":552,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[259],"tags":[265,262,25,106,264,30,119,120,12,263,266,267,13,15],"class_list":["post-407","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wtyczki-ninja","tag-carousel","tag-cms","tag-css","tag-html","tag-infinite-scrolling","tag-javascript","tag-jquery","tag-karuzela","tag-plugins","tag-przewijanie","tag-rotator","tag-slider","tag-wordpress","tag-wtyczki"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/posts\/407","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/comments?post=407"}],"version-history":[{"count":10,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/posts\/407\/revisions"}],"predecessor-version":[{"id":649,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/posts\/407\/revisions\/649"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/media\/552"}],"wp:attachment":[{"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/media?parent=407"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/categories?post=407"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/tags?post=407"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}