{"id":285806,"date":"2017-05-02T15:10:35","date_gmt":"2017-05-02T11:10:35","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=285806"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=285806","title":{"rendered":"\u041a\u0430\u0440\u0443\u0441\u0435\u043b\u044c \u043d\u0430 Vanilla.JS. \u0427\u0430\u0441\u0442\u044c 2"},"content":{"rendered":"<p>\u0414\u043e\u0431\u0440\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441\u0443\u0442\u043e\u043a. \u0421\u0435\u0433\u043e\u0434\u043d\u044f \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0432 \u043d\u0430\u0448 \u0441\u043b\u0430\u0439\u0434\u0435\u0440:  <\/p>\n<ul>\n<li>\u0417\u0430\u0446\u0438\u043a\u043b\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u043a\u0430\u0440\u0443\u0441\u0435\u043b\u0438;<\/li>\n<li>\u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0441\u043b\u0430\u0439\u0434\u043e\u0432;<\/li>\n<li>\u0422\u0430\u0447-\u0441\u043e\u0431\u044b\u0442\u0438\u044f;<\/li>\n<li>\u0421\u043e\u0431\u044b\u0442\u0438\u044f \u043c\u044b\u0448\u0438.<\/li>\n<\/ul>\n<p>  \u041f\u0435\u0440\u0432\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f <a href=\"https:\/\/habrahabr.ru\/post\/327246\/\">\u0437\u0434\u0435\u0441\u044c<\/a>.<br \/>  \u0420\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u043a\u0430\u0440\u0443\u0441\u0435\u043b\u0438 \u0438 \u0435\u0451 \u0441\u0442\u0438\u043b\u0438 \u043e\u0441\u0442\u0430\u0432\u0438\u043c \u043f\u0440\u0435\u0436\u043d\u0438\u043c\u0438. \u0410 \u0432\u043e\u0442 JS \u043f\u0435\u0440\u0435\u043f\u0438\u0448\u0435\u043c.<br \/>  <a name=\"habracut\"><\/a><\/p>\n<p>  \u041d\u0430\u0447\u043d\u0451\u043c \u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0432\u043e\u0437\u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0439\u043c\u043e\u0433\u043e \u0442\u0430\u0439\u043c\u0435\u0440\u0430:  <\/p>\n<pre><code class=\"javascript\">function Timer(callback, delay) { \t\/* Private properties *\/ \tlet timerId, start, remaining = delay;  \t\/* Public methods *\/ \tthis.resume = () =&gt; { \t\tstart = new Date(); \t\ttimerId = setTimeout(() =&gt; { \t\t\tremaining = delay; \t\t\tthis.resume(); \t\t\tcallback(); \t\t}, remaining); \t};  \tthis.pause = () =&gt; { \t\tclearTimeout(timerId); \t\tremaining -= new Date() - start; \t};  \tthis.become = () =&gt; { \t\tclearTimeout(timerId); \t\tremaining = delay;  \t\tthis.resume(); \t};  \t\/* Constructor *\/ \tthis.resume(); } <\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e-\u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u043a\u0430\u0440\u0443\u0441\u0435\u043b\u0438, \u0435\u0451 \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0438 \u043c\u0435\u0442\u043e\u0434\u044b:  <\/p>\n<pre><code class=\"javascript\">function Carousel(setting) {  \t\/* Scope private methods and properties *\/ \tlet private = {};   \t\/* Private properties *\/ \tprivate.default = { \t\t&quot;touch&quot;: true, \t\t&quot;autoplay&quot;: false, \t\t&quot;autoplayDelay&quot;: 3000, \t\t&quot;pauseOnFocus&quot;: true, \t\t&quot;pauseOnHover&quot;: true \t};  \tprivate.setting = Object.assign(private.default, setting);  \tprivate.isAnimationEnd = true;  \tprivate.sel = { \t\t&quot;wrap&quot;: document.querySelector(private.setting.wrap), \t\t&quot;children&quot;: document.querySelector(private.setting.wrap).children, \t\t&quot;prev&quot;: document.querySelector(private.setting.prev), \t\t&quot;next&quot;: document.querySelector(private.setting.next) \t};  \tprivate.opt = { \t\t&quot;position&quot;: 0, \t\t&quot;max_position&quot;: document.querySelector(private.setting.wrap).children.length \t};   \t\/* Constructor *\/ \t\/\/ Clone first elem to end wrap \tprivate.sel.wrap.appendChild(private.sel.children[0].cloneNode(true));   \t\/\/ Autoplay \tif(private.setting.autoplay === true) { \t\tprivate.timer = new Timer(this.next_slide, private.setting.autoplayDelay); \t}   \t\/\/ Control \tif(private.sel.prev !== null) { \t\tprivate.sel.prev.addEventListener('click', () =&gt; { \t\t\tthis.prev_slide(); \t\t}); \t}  \tif(private.sel.next !== null) { \t\tprivate.sel.next.addEventListener('click', () =&gt; { \t\t\tthis.next_slide(); \t\t}); \t}  \t\/\/ Touch events \tif(private.setting.touch === true) { \t\tprivate.sel.wrap.addEventListener('touchstart', private.hts, false); \t\tprivate.sel.wrap.addEventListener('touchmove', private.htm, false); \t}  \t\/\/ Pause on hover \tif(private.setting.autoplay === true && private.setting.pauseOnHover === true) { \t\tprivate.sel.wrap.addEventListener('mouseenter', () =&gt; { \t\t\tprivate.timer.pause(); \t\t});  \t\tprivate.sel.wrap.addEventListener('mouseleave', () =&gt; { \t\t\tprivate.timer.become(); \t\t}); \t}  \tprivate.hts = (e) =&gt; { \t\txDown = e.touches[0].clientX; \t\tyDown = e.touches[0].clientY; \t};  \tprivate.htm = (e) =&gt; { \t\tif ( ! xDown || ! yDown ) { \t\t\treturn; \t\t}  \t\tvar xUp = e.touches[0].clientX; \t\tvar yUp = e.touches[0].clientY;  \t\tvar xDiff = xDown - xUp; \t\tvar yDiff = yDown - yUp;  \t\tif ( Math.abs( xDiff ) &gt; Math.abs( yDiff ) ) { \t\t\tif ( xDiff &gt; 0 ) { \t\t\t\tthis.next_slide(); \t\t\t} else { \t\t\t\tthis.prev_slide(); \t\t\t} \t\t}  \t\txDown = 0; \t\tyDown = 0; \t}; } <\/code><\/pre>\n<p>  \u041c\u0435\u0442\u043e\u0434\u044b hts \u0438 htm \u043d\u0443\u0436\u043d\u044b \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0442\u0430\u0447-\u0441\u043e\u0431\u044b\u0442\u0438\u0439. Hts \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u0438 touchStart. Htm \u043f\u0440\u0438 event touchMove \u0438 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f mov&#8217;\u0430 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e \u0438\u043b\u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0441\u043b\u0430\u0439\u0434\u0430.<br \/>  \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b:  <\/p>\n<pre><code class=\"javascript\">\/\/ Prev slide this.prev_slide = () =&gt; { \tif(!private.isAnimationEnd) { \t\treturn; \t}  \tprivate.isAnimationEnd = false;  \t--private.opt.position;  \tif(private.opt.position &lt; 0) { \t\tprivate.sel.wrap.classList.add('s-notransition'); \t\tprivate.sel.wrap.style[&quot;transform&quot;] = `translateX(-${private.opt.max_position}00%)`; \t\tprivate.opt.position = private.opt.max_position - 1; \t} \t \tsetTimeout(() =&gt; { \t\tprivate.sel.wrap.classList.remove('s-notransition'); \t\tprivate.sel.wrap.style[&quot;transform&quot;] = `translateX(-${private.opt.position}00%)`; \t}, 10);  \tprivate.sel.wrap.addEventListener('transitionend', () =&gt; { \t\tprivate.isAnimationEnd = true; \t});  \tif(private.setting.autoplay === true) { \t\tprivate.timer.become(); \t} };   \/\/ Next slide this.next_slide = () =&gt; { \tif(!private.isAnimationEnd) { \t\treturn; \t}  \tprivate.isAnimationEnd = false;  \tif(private.opt.position &lt; private.opt.max_position) { \t\t++private.opt.position; \t} \t \tprivate.sel.wrap.classList.remove('s-notransition'); \tprivate.sel.wrap.style[&quot;transform&quot;] = `translateX(-${private.opt.position}00%)`;  \tprivate.sel.wrap.addEventListener('transitionend', () =&gt; { \t\tif(private.opt.position &gt;= private.opt.max_position) { \t\t\tprivate.sel.wrap.style[&quot;transform&quot;] = 'translateX(0)'; \t\t\tprivate.sel.wrap.classList.add('s-notransition'); \t\t\tprivate.opt.position = 0; \t\t}  \t\tprivate.isAnimationEnd = true; \t});  \tif(private.setting.autoplay === true) { \t\tprivate.timer.become(); \t} }; <\/code><\/pre>\n<p>  \u0414\u0435\u043c\u043e:  <\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0px; width: 100%; height: 300px; position: relative;\"><iframe src=\"https:\/\/codepen.io\/iGetPass\/embed\/preview\/oWWmoE?height=300&amp;slug-hash=oWWmoE&amp;default-tabs=js,result&amp;host=http:\/\/codepen.io&amp;embed-version=2\" frameborder=\"0\" allowfullscreen=\"true\" webkitallowfullscreen=\"true\" mozallowfullscreen=\"true\" style=\"top: 0px; left: 0px; width: 100%; height: 100%; position: absolute;\"><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>  \u042d\u0442\u043e \u0432\u0441\u0435! \u041c\u0435\u043d\u044c\u0448\u0435 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u043b\u0438\u0431 =&gt; \u043c\u0435\u043d\u044c\u0448\u0438\u0439 \u0442\u0440\u0430\u0444\u0438\u043a \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f =&gt; \u0441\u043a\u043e\u0440\u0435\u0439\u0448\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habrahabr.ru\/post\/327690\/\"> https:\/\/habrahabr.ru\/post\/327690\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0414\u043e\u0431\u0440\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441\u0443\u0442\u043e\u043a. \u0421\u0435\u0433\u043e\u0434\u043d\u044f \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0432 \u043d\u0430\u0448 \u0441\u043b\u0430\u0439\u0434\u0435\u0440:  <\/p>\n<ul>\n<li>\u0417\u0430\u0446\u0438\u043a\u043b\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u043a\u0430\u0440\u0443\u0441\u0435\u043b\u0438;<\/li>\n<li>\u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0441\u043b\u0430\u0439\u0434\u043e\u0432;<\/li>\n<li>\u0422\u0430\u0447-\u0441\u043e\u0431\u044b\u0442\u0438\u044f;<\/li>\n<li>\u0421\u043e\u0431\u044b\u0442\u0438\u044f \u043c\u044b\u0448\u0438.<\/li>\n<\/ul>\n<p>  \u041f\u0435\u0440\u0432\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f <a href=\"https:\/\/habrahabr.ru\/post\/327246\/\">\u0437\u0434\u0435\u0441\u044c<\/a>.<br \/>  \u0420\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u043a\u0430\u0440\u0443\u0441\u0435\u043b\u0438 \u0438 \u0435\u0451 \u0441\u0442\u0438\u043b\u0438 \u043e\u0441\u0442\u0430\u0432\u0438\u043c \u043f\u0440\u0435\u0436\u043d\u0438\u043c\u0438. \u0410 \u0432\u043e\u0442 JS \u043f\u0435\u0440\u0435\u043f\u0438\u0448\u0435\u043c.  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-285806","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/285806","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=285806"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/285806\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=285806"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=285806"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=285806"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}