{"id":303749,"date":"2020-05-17T15:00:35","date_gmt":"2020-05-17T15:00:35","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=303749"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=303749","title":{"rendered":"Touch slider \u043d\u0430 JavaScript"},"content":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/501258\/\">\n<p>\u041a\u043e\u0433\u0434\u0430 \u044f \u043d\u0430\u0447\u0438\u043d\u0430\u043b \u0438\u0437\u0443\u0447\u0430\u0442\u044c JavaScript, \u043c\u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u043f\u043e\u043d\u044f\u0442\u044c \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0438 \u0434\u0435\u043b\u0430\u044e\u0442\u0441\u044f \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043b\u0438\u0441\u0442\u044b\u0432\u0430\u0442\u044c \u0441\u0432\u0430\u0439\u043f\u0430\u043c\u0438 \u0438\u043b\u0438 \u043c\u044b\u0448\u044c\u044e, \u043d\u043e \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u043e\u0432 \u0441 \u0445\u043e\u0440\u043e\u0448\u0438\u043c \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435\u043c \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043c\u043d\u0435 \u043d\u0430\u0434\u043e, \u044f \u043d\u0435 \u043d\u0430\u0448\u0435\u043b. \u0427\u0435\u0440\u0435\u0437 \u043a\u0430\u043a\u043e\u0435-\u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043c\u043d\u0435 \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435\u0447\u0442\u043e \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0435. \u0418 \u0442\u0435\u043f\u0435\u0440\u044c \u044f \u0445\u043e\u0447\u0443 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043e\u0431 \u044d\u0442\u043e\u043c \u0441\u0442\u0430\u0442\u044c\u044e, \u0447\u0442\u043e\u0431\u044b \u0434\u0440\u0443\u0433\u0438\u043c \u043b\u044e\u0434\u044f\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0445\u043e\u0442\u044f\u0442 \u043f\u043e\u043d\u044f\u0442\u044c \u043a\u0430\u043a \u044d\u0442\u043e \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c touch \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0434\u043b\u044f \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 (\u0438 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e), \u0431\u044b\u043b\u043e \u043f\u0440\u043e\u0449\u0435 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f. \u042f \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u044e\u0441\u044c \u0438\u0437\u043b\u0430\u0433\u0430\u0442\u044c \u043f\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0443 \u0438 \u043f\u043e\u0434\u043a\u0440\u0435\u043f\u043b\u044f\u0442\u044c \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u044f \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u044b\u043c\u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438.<a name=\"habracut\"><\/a><\/p>\n<p>  <\/p>\n<p>\u042f \u043d\u0435 \u0441\u0447\u0438\u0442\u0430\u044e \u0441\u0435\u0431\u044f \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0441\u0442\u043e\u043c \u0432 JavaScript, \u0432\u0441\u0435\u0433\u0434\u0430 \u0435\u0441\u0442\u044c \u0447\u0435\u043c\u0443 \u0443\u0447\u0438\u0442\u044c\u0441\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0435\u0441\u043b\u0438 \u0437\u043d\u0430\u0435\u0442\u0435 \u043a\u0430\u043a \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u044b \u043a\u043e\u0434\u0430 \u043b\u0443\u0447\u0448\u0435\/\u043f\u0440\u043e\u0449\u0435\/\u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u0435\u0435 \u2014 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0430\u043f\u0438\u0448\u0438\u0442\u0435 \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438.<\/p>\n<p>  <\/p>\n<p>\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435:<\/p>\n<p>  <\/p>\n<ol>\n<li><a href=\"#1\">\u041a\u0430\u043a\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0431\u0443\u0434\u0435\u043c \u0434\u0435\u043b\u0430\u0442\u044c?<\/a><\/li>\n<li><a href=\"#2\">\u041f\u0438\u0448\u0435\u043c HTML \u0438 CSS<\/a><\/li>\n<li><a href=\"#3\">\u041a\u0430\u043a \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c?<\/a><\/li>\n<li><a href=\"#4\">\u041f\u0438\u0448\u0435\u043c JavaScript<\/a><\/li>\n<li><a href=\"#5\">\u0418\u0442\u043e\u0433\u043e<\/a><\/li>\n<li><a href=\"#full\">\u041f\u043e\u043b\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u043a\u043e\u0434\u0430<\/a><\/li>\n<\/ol>\n<p>  <\/p>\n<p>\u041c\u043e\u0436\u043d\u043e \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c <a href=\"https:\/\/codepen.io\/i-did\/pen\/yLYRvVL\" title=\"codepen.io\" rel=\"nofollow\">\u043f\u0440\u0438\u043c\u0435\u0440<\/a>.<\/p>\n<p>  <a name=\"1\"><\/a>  <\/p>\n<h3 id=\"1-kakoy-funkcional-budem-delat\">1. \u041a\u0430\u043a\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0431\u0443\u0434\u0435\u043c \u0434\u0435\u043b\u0430\u0442\u044c?<\/h3>\n<p>  <\/p>\n<p>\u041d\u0430\u043f\u0438\u0448\u0435\u043c \u0441 0 \u043f\u0440\u043e\u0441\u0442\u0435\u043d\u044c\u043a\u0438\u0439 \u0441\u043b\u0430\u0439\u0434\u0435\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c touch \u0438 drag \u043f\u0435\u0440\u0435\u043b\u0438\u0441\u0442\u044b\u0432\u0430\u043d\u0438\u0435 \u0441\u043b\u0430\u0439\u0434\u043e\u0432;<\/li>\n<li>\u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0441\u043b\u0430\u0439\u0434\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0442\u0440\u0435\u043b\u043e\u043a-\u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u0435\u043b\u0435\u0439;<\/li>\n<li>\u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u043a\u0430 \u0441\u0442\u0440\u0435\u043b\u043e\u043a-\u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u0435\u043b\u0435\u0439 \u2190 \u0438 \u2192 \u043d\u0430 \u043f\u0435\u0440\u0432\u043e\u043c \u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u043c \u0441\u043b\u0430\u0439\u0434\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e.<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0417\u0432\u0443\u0447\u0438\u0442 \u0441\u043e\u0432\u0441\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e \u0438 \u044f \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u044e\u0441\u044c \u043f\u0438\u0441\u0430\u0442\u044c \u0442\u043e\u0436\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u043e.<br \/>  \u0415\u0441\u043b\u0438 \u043a\u043e\u043c\u0443-\u043d\u0438\u0431\u0443\u0434\u044c \u0431\u0443\u0434\u0435\u0442 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e, \u0442\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043f\u043e\u0442\u043e\u043c \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b, \u0432\u0440\u043e\u0434\u0435 \u0442\u043e\u0447\u0435\u043a-\u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u0435\u043b\u0435\u0439, \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0439 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 \u0441\u043b\u0430\u0439\u0434\u043e\u0432, \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u043e\u0440\u0438\u0435\u043d\u0442\u0430\u0446\u0438\u0438, \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0441\u043b\u0430\u0439\u0434\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b \u0438 \u0442.\u0434. \u0412 \u043a\u043e\u043d\u0446\u0435 \u043a\u043e\u043d\u0446\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442. \u041d\u0430\u043f\u0438\u0448\u0438\u0442\u0435 \u043e\u0431 \u044d\u0442\u043e\u043c \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438. \u0415\u0441\u043b\u0438 \u0431\u0443\u0434\u0435\u0442 \u0445\u043e\u0442\u044f \u0431\u044b \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0435\u0432 \u0437\u0430 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b, \u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0435\u0433\u043e.<\/p>\n<p>  <a name=\"2\"><\/a>  <\/p>\n<h3 id=\"2-pishem-html-i-css\">2. \u041f\u0438\u0448\u0435\u043c HTML \u0438 CSS<\/h3>\n<p>  <\/p>\n<p>\u0427\u0442\u043e \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0438\u0437 \u0441\u0435\u0431\u044f \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f HTML \u0438 CSS?<\/p>\n<p>  <\/p>\n<p>\u0412\u0438\u0434\u0438\u043c\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 (1 \u0441\u043b\u0430\u0439\u0434) \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c 200\u0445200 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439. \u0421\u043d\u0438\u0437\u0443 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0438\u043c \u0441\u0442\u0440\u0435\u043b\u043a\u0438-\u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u0435\u043b\u0438 \u0441\u043b\u0430\u0439\u0434\u043e\u0432.<br \/>  \u0412 \u0438\u0442\u043e\u0433\u0435 \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u0432\u043e\u0442 \u044d\u0442\u043e:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/nf\/xo\/f9\/nfxof9n0y88bw3s-w0dcac3vem8.jpeg\"><\/p>\n<p>  <\/p>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0438\u0437\u043d\u0443\u0442\u0440\u0438.<br \/>  \u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043b\u0430\u0439\u0434\u043e\u0432 \u0434\u043e\u043b\u0436\u043d\u044b \u0438\u0434\u0442\u0438 \u043f\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0443 \u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c\u0441\u044f \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e \u0432 \u043e\u0434\u043d\u0443 \u043b\u0438\u043d\u0438\u044e. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0438\u0445 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0431\u043b\u043e\u043a, \u043a\u043b\u0430\u0441\u0441 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0431\u0443\u0434\u0435\u0442 <code>.slider-track<\/code> \u0438 \u0437\u0430\u0434\u0430\u0434\u0438\u043c \u0435\u043c\u0443 <code>display: flex<\/code>. \u041e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u0432\u043c\u0435\u0449\u0430\u0442\u044c \u0432 \u0441\u0435\u0431\u044f \u0432\u0441\u0435 \u0441\u043b\u0430\u0439\u0434\u044b \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e, \u0442\u043e \u0435\u0441\u0442\u044c \u0431\u044b\u0442\u044c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u044b, \u0432 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0437\u0430\u0434\u0430\u0434\u0438\u043c \u0434\u043b\u044f \u0441\u043b\u0430\u0439\u0434\u043e\u0432 <code>flex-shrink: 0<\/code>, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u043d\u0435 \u0441\u0436\u0438\u043c\u0430\u043b\u0438\u0441\u044c.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/jw\/sz\/pu\/jwszpu8yl1cpl9ptgblu8kuppqe.jpeg\"><\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0436\u0435\u043b\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u043a\u0440\u044b\u0442\u044c \u0432\u0441\u0435 \u0441\u043b\u0430\u0439\u0434\u044b \u043a\u0440\u043e\u043c\u0435 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u043d\u0430\u0448 track \u0432 \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u0431\u043b\u043e\u043a, \u043d\u0430\u0437\u043e\u0432\u0435\u043c \u0435\u0433\u043e <code>.slider-list<\/code>. \u0428\u0438\u0440\u0438\u043d\u0430 \u0438 \u0432\u044b\u0441\u043e\u0442\u0430 \u0443 \u043d\u0435\u0433\u043e \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0432\u043d\u0430 \u0448\u0438\u0440\u0438\u043d\u0435 \u0438 \u0432\u044b\u0441\u043e\u0442\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u0441\u043b\u0430\u0439\u0434\u0430, \u0442\u0430\u043a\u0436\u0435 \u0443 \u043d\u0435\u0433\u043e \u0431\u0443\u0434\u0435\u0442 <code>overflow: hidden<\/code>. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0432\u0438\u0434\u0435\u043d \u0431\u0443\u0434\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0441\u043b\u0430\u0439\u0434, \u0430 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u043a\u0440\u044b\u0442\u044b.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/xr\/zg\/ba\/xrzgbax_n7tfjmeru_t6u1b5lay.jpeg\"><\/p>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0442\u0440\u0435\u043b\u043a\u0438-\u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u0435\u043b\u0438. \u0414\u043b\u044f \u0431\u043e\u0301\u043b\u044c\u0448\u0435\u0433\u043e \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u043c\u044b \u043f\u043e\u043b\u043e\u0436\u0438\u043c \u0438\u0445 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0431\u043b\u043e\u043a <code>.slider-arrows<\/code> \u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0438\u043c \u0435\u0433\u043e \u0441\u043d\u0438\u0437\u0443 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430. \u041d\u043e \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 <code>.slider-list<\/code> (<code>overflow: hidden<\/code>) \u0438\u0445 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u0438\u0434\u043d\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u043e\u0436\u043d\u043e:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0434\u043b\u044f <code>.slider-list<\/code> padding-bottom \u0438 \u0432 \u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0432\u0448\u0435\u0435\u0441\u044f \u043f\u0443\u0441\u0442\u043e\u0435 \u043c\u0435\u0441\u0442\u043e \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0431\u043b\u043e\u043a \u0441\u043e \u0441\u0442\u0440\u0435\u043b\u043a\u0430\u043c\u0438;<\/li>\n<li>\u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c <code>.slider-list<\/code> \u0432 \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u0431\u043b\u043e\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0437\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e <code>.slider<\/code> \u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0435\u0433\u043e (\u0438\u043b\u0438 \u0437\u0430 \u0435\u0433\u043e \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438) \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c \u0441\u0442\u0440\u0435\u043b\u043a\u0438 \u0432 \u0443\u0434\u043e\u0431\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435.<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0431\u043e\u0301\u043b\u044c\u0448\u0435\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u044b \u0432\u0441\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0431\u0443\u0434\u0443\u0442 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u044b \u0447\u0435\u0440\u0435\u0437 CSS. <\/p>\n<p>  <\/p>\n<p>HTML \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;slider&quot;&gt;   &lt;div class=&quot;slider-list&quot;&gt;     &lt;div class=&quot;slider-track&quot;&gt;       &lt;div class=&quot;slide&quot;&gt;1&lt;\/div&gt;       &lt;div class=&quot;slide&quot;&gt;2&lt;\/div&gt;       &lt;div class=&quot;slide&quot;&gt;3&lt;\/div&gt;       &lt;div class=&quot;slide&quot;&gt;4&lt;\/div&gt;       &lt;div class=&quot;slide&quot;&gt;5&lt;\/div&gt;     &lt;\/div&gt;   &lt;\/div&gt;   &lt;div class=&quot;slider-arrows&quot;&gt;     &lt;button type=&quot;button&quot; class=&quot;prev&quot;&gt;&amp;larr;&lt;\/button&gt;     &lt;button type=&quot;button&quot; class=&quot;next&quot;&gt;&amp;rarr;&lt;\/button&gt;   &lt;\/div&gt; &lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<p><code>&amp;larr;<\/code> \u0438 <code>&amp;rarr;<\/code> \u044d\u0442\u043e <a href=\"https:\/\/htmlweb.ru\/html\/symbols.php\" rel=\"nofollow\">\u0441\u043f\u0435\u0446\u0441\u0438\u043c\u0432\u043e\u043b\u044b HTML-\u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0441\u043e\u0431\u043e\u0439 \u0441\u0442\u0440\u0435\u043b\u043a\u0438, \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u0432 \u043b\u0435\u0432\u0443\u044e \u0438 \u043f\u0440\u0430\u0432\u0443\u044e \u0441\u0442\u043e\u0440\u043e\u043d\u0443 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e.<\/p>\n<p>  <\/p>\n<p>CSS \u0431\u0443\u0434\u0435\u0442 \u0442\u0430\u043a\u0438\u043c:<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">.slider {   position: relative;   width: 200px;   height: 200px;   margin: 50px auto 0;   \/* \u0427\u0442\u043e\u0431\u044b \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u043d\u0438\u044f \u0441\u043b\u0430\u0439\u0434\u0430 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0432\u044b\u0434\u0435\u043b\u0438\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0435\u0433\u043e *\/   user-select: none;   \/* \u0427\u0442\u043e\u0431\u044b \u0437\u0430\u043f\u0440\u0435\u0442\u0438\u0442\u044c \u0441\u043a\u0440\u043e\u043b\u043b \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0435\u0441\u043b\u0438 \u043c\u044b \u043d\u0430\u0447\u0430\u043b\u0438 \u0434\u0432\u0438\u0433\u0430\u0442\u044c \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u043f\u043e \u043e\u0441\u0438 X *\/   touch-action: pan-y; }  \/* \u0415\u0441\u043b\u0438 \u0433\u0434\u0435-\u0442\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u0431\u0443\u0434\u0443\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0438\u043c pointer-events: none, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u043d\u0435 \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u043b\u0438\u0441\u044c \u043c\u044b\u0448\u044c\u044e *\/  .slider img {   poiner-events: none; }  .slider-list {   width: 200px;   height: 200px;   overflow: hidden; }  .slider-list.grab {   cursor: grab; }  .slider-list.grabbing{   cursor: grabbing; }  .slider-track {   display: flex; }  .slide {   width: 200px;   height: 200px;   \/* \u0427\u0442\u043e\u0431\u044b \u0441\u043b\u0430\u0439\u0434\u044b \u043d\u0435 \u0441\u0436\u0438\u043c\u0430\u043b\u0438\u0441\u044c *\/   flex-shrink: 0;   \/* \u0423\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u043c \u0438 \u0446\u0435\u043d\u0442\u0440\u0438\u0440\u0443\u0435\u043c \u0446\u0438\u0444\u0440\u0443 \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u043b\u0430\u0439\u0434\u0430 *\/   font-size: 50px;   display: flex;   align-items: center;   justify-content: center;   border: 1px solid #000; }  .slider-arrows {   margin-top: 15px;   text-align: center; }  .next, .prev {   background: none;   border: none;   margin: 0 10px;   font-size: 30px;   cursor: pointer; }  .next.disabled, .prev.disabled {   opacity: .25;   pointer-events: none; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0442\u0430\u043a:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/oj\/yr\/s2\/ojyrs2bcyolvwx2ufm4d86acsz0.jpeg\"><\/p>\n<p>  <\/p>\n<p>\u0411\u0435\u0437 <code>overflow: hidden<\/code>:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/fs\/wq\/lz\/fswqlz2fxxri-kierfd5ihrop8a.png\"><\/p>\n<p>  <\/p>\n<p>\u0421 \u044d\u0442\u0438\u043c \u043f\u0440\u043e\u0441\u0442\u043e, \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a \u043e\u0431\u0441\u0443\u0436\u0434\u0435\u043d\u0438\u044e \u043b\u043e\u0433\u0438\u043a\u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430.<\/p>\n<p>  <a name=\"3\"><\/a>  <\/p>\n<h3 id=\"3-kak-eto-budet-rabotat\">3. \u041a\u0430\u043a \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c?<\/h3>\n<p>  <\/p>\n<p>\u0414\u0432\u0438\u0433\u0430\u0442\u044c \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u043f\u0440\u043e\u0449\u0435 \u0438 \u043b\u0443\u0447\u0448\u0435 \u0432\u0441\u0435\u0433\u043e \u0447\u0435\u0440\u0435\u0437 <code>transform: translate3d(x, y, z)<\/code>, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u043b\u0438\u0448\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u0422\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>transform: translateX(x)<\/code> \u0432 \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0446\u0438\u0438 \u0441 <code>will-change: transform<\/code>. \u0421\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c <code>style<\/code> \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0433\u043e \u043c\u0435\u0442\u043e\u0434\u0430 \u0441\u0442\u0440\u043e\u043a <code>match()<\/code>.<br \/>  \u041f\u0435\u0440\u0432\u044b\u043c \u0434\u0435\u043b\u043e\u043c \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u043d\u043e\u043c\u0435\u0440 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0441\u043b\u0430\u0439\u0434\u0430 \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 <code>slideIndex<\/code>. \u041c\u044b \u0443\u0436\u0435 \u0443\u0441\u043b\u043e\u0432\u0438\u043b\u0438\u0441\u044c, \u0447\u0442\u043e \u0432\u0441\u0435 \u0441\u043b\u0430\u0439\u0434\u044b \u043e\u0434\u043d\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u044b (200px). \u041f\u0435\u0440\u0435\u043b\u0438\u0441\u0442\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u043b\u0430\u0439\u0434\u044b \u0431\u0443\u0434\u0443\u0442 \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e \u2014 \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>transform: translate3d(x, y, z)<\/code> \u0432 \u043f\u043e\u0437\u0438\u0446\u0438\u044e <code>x<\/code> \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435: <code>\u043d\u043e\u043c\u0435\u0440 \u0441\u043b\u0430\u0439\u0434\u0430 * \u0448\u0438\u0440\u0438\u043d\u0430 \u0441\u043b\u0430\u0439\u0434\u0430<\/code>. \u0422\u0430\u043a \u0438 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0441\u043b\u0430\u0439\u0434\u043e\u0432 \u0438 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0430 \u0441\u0442\u0440\u0435\u043b\u043a\u0430\u0445-\u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u0435\u043b\u044f\u0445.<\/p>\n<p>  <\/p>\n<p>\u0421\u043e \u0441\u0432\u0430\u0439\u043f\u0430\u043c\u0438 \u043f\u043e\u0441\u043b\u043e\u0436\u043d\u0435\u0435, \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435.<\/p>\n<p>  <\/p>\n<p>\u041c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0440\u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u041f\u0440\u0438 \u043a\u0430\u0441\u0430\u043d\u0438\u0438 \u043f\u0430\u043b\u044c\u0446\u0435\u043c \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 <code>touchstart<\/code> (\u043f\u0440\u0438 \u0437\u0430\u0436\u0430\u0442\u0438\u0438 \u043c\u044b\u0448\u0438 <code>mousedown<\/code>), \u043f\u0440\u0438 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0438 \u043f\u0430\u043b\u044c\u0446\u0435\u043c \u043f\u043e \u044d\u043a\u0440\u0430\u043d\u0443 \u2014 <code>touchmove<\/code> (<code>mousemove<\/code>), \u043f\u0440\u0438 \u043e\u0442\u043f\u0443\u0441\u043a\u0430\u043d\u0438\u0438 \u043f\u0430\u043b\u044c\u0446\u0430 \u2014 <code>touchend<\/code> (<code>mouseup<\/code>).<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u043c\u0438 \u043a\u0443\u0440\u0441\u043e\u0440\u0430 <code>event.clientX<\/code> (\u043c\u0435\u0441\u0442\u043e \u043a\u0430\u0441\u0430\u043d\u0438\u044f \u044d\u043a\u0440\u0430\u043d\u0430) \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<p>  <\/p>\n<ol>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c 3 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u043e \u0441\u0432\u0430\u0439\u043f\u0430\u043c\u0438 \u2014 <code>swipeStart<\/code>, <code>swipeAction<\/code> \u0438 <code>swipeEnd<\/code>.<\/p>\n<p>  <\/li>\n<li>\n<p>\u041f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u043a\u0430\u0441\u0430\u043d\u0438\u0438 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u043a\u0430\u0441\u0430\u043d\u0438\u044f (\u043a\u0443\u0440\u0441\u043e\u0440\u0430) \u043f\u043e \u043e\u0441\u0438 X (\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 <code>posX1<\/code> \u0438 <code>posInit<\/code>, \u0433\u0434\u0435 <code>posX1<\/code> \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u0431\u0443\u0434\u0435\u0442 \u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f, \u0430 <code>posInit<\/code> \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u0430\u044f).<\/p>\n<p>  <\/li>\n<li>\n<p>\u041f\u0440\u0438 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0438 \u043a\u0443\u0440\u0441\u043e\u0440\u0430, \u0432\u044b\u0447\u0438\u0442\u0430\u0435\u043c \u0442\u0435\u043a\u0443\u0449\u0438\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0438\u0437 <code>posX1<\/code>, \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <code>posX2<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0442\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c <code>style.transform<\/code>, \u0447\u0442\u043e\u0431\u044b \u0434\u0432\u0438\u0433\u0430\u0442\u044c \u0441\u043b\u0430\u0439\u0434\u044b. \u0418 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c <code>posX1<\/code> \u0442\u0435\u043a\u0443\u0449\u0438\u043c\u0438 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u043c\u0438.<br \/>  <strong>\u0420\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u043f\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0443 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435:<\/strong><\/p>\n<p>  <\/p>\n<ul>\n<li><code>posX1<\/code> \u0438 <code>posInit<\/code> \u2014 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b, \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u043a\u0430\u0441\u0430\u043d\u0438\u0438 (\u0442\u0435\u043a\u0443\u0449\u0438\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u043a\u0443\u0440\u0441\u043e\u0440\u0430 <code>event.clientX<\/code>). \u042d\u0442\u043e \u043f\u0435\u0440\u0432\u043e\u0435 \u043a\u0430\u0441\u0430\u043d\u0438\u0435 \u044d\u043a\u0440\u0430\u043d\u0430 \u0432 <code>swipeStart<\/code>, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u0448\u0438\u0440\u0438\u043d\u0430 \u043d\u0430\u0448\u0435\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430 320px, \u0442\u043e \u043a\u0430\u0441\u0430\u043d\u0438\u0435 \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442 <code>posInit<\/code> \u0438 <code>posX1<\/code> \u0432 160. \u0412 <code>swipeAction<\/code> \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f <code>posX1<\/code> \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c\u0441\u044f.<\/li>\n<\/ul>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/dz\/bz\/6m\/dzbz6mo5sfew2rulzo0w5yl7fmq.gif\"><\/p>\n<p>  <\/p>\n<ul>\n<li><code>posX2<\/code> \u2014 \u0440\u0430\u0437\u043d\u043e\u0441\u0442\u044c <code>posX1<\/code> \u0438 <code>event.clientX<\/code>. \u0411\u0443\u0434\u0435\u0442 \u0441\u0447\u0438\u0442\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043f\u0440\u0438 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0438 \u043f\u043e \u044d\u043a\u0440\u0430\u043d\u0443 \u0432 <code>swipeAction<\/code>, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u043c\u044b \u0441\u0434\u0432\u0438\u043d\u0443\u043b\u0438 \u043f\u0430\u043b\u0435\u0446 \u0447\u0443\u0442\u044c-\u0447\u0443\u0442\u044c \u0432\u043f\u0440\u0430\u0432\u043e, \u0442\u043e &quot;\u0442\u0435\u043a\u0443\u0449\u0438\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b&quot; = 161, \u0437\u043d\u0430\u0447\u0438\u0442 160 \u2014 161 = -1, \u0431\u0443\u0434\u0435\u0442 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u043d\u0430 -1px. \u041d\u0430\u0433\u043b\u044f\u0434\u043d\u0435\u0435 \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043d\u0438\u0436\u0435:<\/li>\n<\/ul>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/zt\/gl\/r3\/ztglr32votan_w0nonxcjrefny8.gif\"><\/p>\n<p>  <\/p>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043f\u0440\u0438 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0438 \u043f\u0430\u043b\u044c\u0446\u0435\u043c \u043f\u043e \u044d\u043a\u0440\u0430\u043d\u0443, \u043c\u044b \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u0441\u0447\u0438\u0442\u0430\u0435\u043c \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u043f\u043e \u043e\u0441\u0438 X, \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0435\u0433\u043e \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f <code>posX2<\/code> \u0432\u0441\u0435\u0433\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u044b \u0441\u0434\u0432\u0438\u043d\u0443\u043b\u0438 \u043f\u0430\u043b\u0435\u0446 \u043f\u043e \u044d\u043a\u0440\u0430\u043d\u0443. \u041e\u0431\u044b\u0447\u043d\u043e \u044d\u0442\u043e \u0447\u0438\u0441\u043b\u043e \u043e\u0442 0.5 \u0434\u043e 10, \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0440\u0430\u0437\u043c\u0430\u0445\u0430 (\u0435\u0441\u043b\u0438 \u0434\u0432\u0438\u043d\u0443\u0442\u044c \u043f\u0430\u043b\u0435\u0446 \u043e\u0447\u0435\u043d\u044c \u0440\u0435\u0437\u043a\u043e, \u0442\u043e \u0431\u0443\u0434\u0443\u0442 \u0431\u043e\u0301\u043b\u044c\u0448\u0438\u0435 \u0447\u0438\u0441\u043b\u0430, \u0430 \u0435\u0441\u043b\u0438 \u043f\u0430\u043b\u0435\u0446 \u0434\u0432\u0438\u0433\u0430\u0442\u044c \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e, \u0442\u043e \u043c\u0435\u043d\u044c\u0448\u0438\u0435).<\/p>\n<p>  <\/li>\n<li>\n<p>\u041f\u0440\u0438 \u043f\u0440\u0435\u043a\u0440\u0430\u0449\u0435\u043d\u0438\u0438 \u0441\u0432\u0430\u0439\u043f\u0430, \u043c\u044b \u0432\u044b\u0447\u0438\u0442\u0430\u0435\u043c \u0438\u0437 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0439 \u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u0442\u0435\u043a\u0443\u0449\u0443\u044e \u0438 \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 (<code>posFinal<\/code>) \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c &quot;\u043f\u043e\u0440\u043e\u0433\u0430&quot; \u0441\u0434\u0432\u0438\u0433\u0430 \u0441\u043b\u0430\u0439\u0434\u0430 (<code>posThreshold<\/code>), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u0437\u0430\u0440\u0430\u043d\u0435\u0435.<br \/>  \u0420\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0441 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438. \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043c\u044b \u043f\u043e\u043a\u0430 \u043e\u043f\u0443\u0441\u0442\u0438\u043c. \u041e\u043d\u0438 \u043d\u0435 \u0441\u0442\u043e\u043b\u044c \u0432\u0430\u0436\u043d\u044b \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u044f, \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0430\u043c\u044b\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435:<\/p>\n<p>  <\/p>\n<ul>\n<li><code>posFinal<\/code> = <code>posInit<\/code> &ndash; <code>posX1<\/code> (\u0442\u0430\u043a \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u0440\u043e\u0432\u0435\u043b\u0438 \u043f\u0430\u043b\u044c\u0446\u0435\u043c \u0432 <code>swipeAction<\/code>, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u0448\u0438\u0440\u0438\u043d\u0430 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 200px, \u0442\u043e \u0435\u0441\u043b\u0438 \u043c\u044b \u043f\u0440\u043e\u0432\u0435\u0434\u0435\u043c \u043f\u0430\u043b\u044c\u0446\u0435\u043c \u043e\u0442 \u0441\u0435\u0440\u0435\u0434\u0438\u043d\u044b \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u0434\u043e \u0435\u0433\u043e \u043a\u0440\u0430\u044f \u0438 \u043e\u0442\u043f\u0443\u0441\u0442\u0438\u043c, <code>posFinal<\/code> \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0432\u0435\u043d 100).<\/li>\n<\/ul>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ua\/1c\/mc\/ua1cmcv-ugb8rj4hrqaactjhogw.gif\"><\/p>\n<p>  <\/p>\n<ul>\n<li><code>posThreshold<\/code> = \u0448\u0438\u0440\u0438\u043d\u0430 \u0441\u043b\u0430\u0439\u0434\u0430 (200px) * 0,3 = 60. \u0421 \u044d\u0442\u0438\u043c \u0447\u0438\u0441\u043b\u043e\u043c \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c <code>posFinal<\/code>, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 <code>posFinal<\/code> &gt; 60, \u0442\u043e \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0441\u043b\u0430\u0439\u0434, \u0438\u043d\u0430\u0447\u0435 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0432 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0421\u0430\u043c\u043e \u0443\u0441\u043b\u043e\u0432\u0438\u0435:<br \/> \n<pre><code class=\"javascript\">if (posFinal &gt;= posThreshold) nextSlide() \u0438\u043b\u0438 prevSlide(); else currentSlide();<\/code><\/pre>\n<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0441\u043e \u0432\u0442\u043e\u0440\u044b\u043c \u0443\u0441\u043b\u043e\u0432\u0438\u0435\u043c <code>else<\/code> \u0431\u043e\u043b\u0435\u0435-\u043c\u0435\u043d\u0435\u0435 \u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u0442\u043e \u0441 \u043f\u0435\u0440\u0432\u044b\u043c \u043d\u0443\u0436\u043d\u043e \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435.<\/p>\n<p>  <\/p>\n<p>\u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c \u043c\u044b \u043f\u0440\u0435\u0432\u044b\u0441\u0438\u043b\u0438 \u043f\u043e\u0440\u043e\u0433 <code>posThreshold<\/code> \u0438 \u0431\u0443\u0434\u0435\u043c \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0441\u043b\u0430\u0439\u0434, \u043d\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u044c \u0432 \u043a\u0430\u043a\u0443\u044e \u0441\u0442\u043e\u0440\u043e\u043d\u0443 \u043c\u044b \u0434\u0432\u0438\u043d\u0443\u043b\u0438 \u0441\u043b\u0430\u0439\u0434, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u0437\u0432\u0430\u0442\u044c <code>prev()<\/code> \u0438\u043b\u0438 <code>next()<\/code> \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c <code>posInit<\/code> \u0438 <code>posX1<\/code>. \u041f\u0443\u0441\u0442\u044c \u0448\u0438\u0440\u0438\u043d\u0430 \u043d\u0430\u0448\u0435\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430 320px, \u0447\u0438\u0301\u0441\u043b\u0430 \u0448\u0438\u0440\u0438\u043d\u044b \u0438\u0434\u0443\u0442 \u0441\u043b\u0435\u0432\u0430 \u043d\u0430\u043f\u0440\u0430\u0432\u043e, \u0442\u043e \u0435\u0441\u0442\u044c 0px-320px (\u0432 \u0441\u0430\u043c\u043e\u0439 \u043b\u0435\u0432\u043e\u0439 \u0442\u043e\u0447\u043a\u0435 \u044d\u043a\u0440\u0430\u043d\u0430 0, \u0432 \u0441\u0430\u043c\u043e\u0439 \u043f\u0440\u0430\u0432\u043e\u0439 \u0442\u043e\u0447\u043a\u0435 \u044d\u043a\u0440\u0430\u043d\u0430 320). \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043c, \u0447\u0442\u043e \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443, \u043f\u0440\u0438\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u043c \u043f\u0430\u043b\u0435\u0446 \u0432 \u0441\u0430\u043c\u044b\u0439 \u0446\u0435\u043d\u0442\u0440 \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c <code>posInit<\/code> 160. \u0422\u0435\u043f\u0435\u0440\u044c, \u0435\u0441\u043b\u0438 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0432\u0435\u0441\u0442\u0438 \u043f\u0430\u043b\u0435\u0446 \u0432\u043b\u0435\u0432\u043e (\u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c \u0434\u043e \u043a\u0440\u0430\u044f \u044d\u043a\u0440\u0430\u043d\u0430), \u0442\u043e <code>posX1<\/code> \u0431\u0443\u0434\u0435\u0442 \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0442\u044c\u0441\u044f \u0441 160 \u0434\u043e 0. \u0415\u0441\u043b\u0438 \u0431\u0443\u0434\u0435\u043c \u0432\u0435\u0441\u0442\u0438 \u043f\u0430\u043b\u0435\u0446 \u0432\u043f\u0440\u0430\u0432\u043e \u0434\u043e \u043a\u0440\u0430\u044f \u044d\u043a\u0440\u0430\u043d\u0430, \u0442\u043e <code>posX1<\/code> \u0431\u0443\u0434\u0435\u0442 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0442\u044c\u0441\u044f c 160 \u0434\u043e 320. \u0418\u0442\u0430\u043a, \u043c\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0438\u043b\u0438 \u043f\u0430\u043b\u0435\u0446 \u0432 \u0446\u0435\u043d\u0442\u0440 \u0438 \u043f\u0440\u043e\u0432\u0435\u043b\u0438 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0432\u043b\u0435\u0432\u043e, \u043f\u0440\u0438 \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u0438 \u0441\u0432\u0430\u0439\u043f\u0430 <code>posInit<\/code> 160, \u0430 <code>posX1<\/code> 100, \u0437\u043d\u0430\u0447\u0438\u0442 \u043c\u044b \u043f\u0440\u043e\u0448\u043b\u0438 \u043f\u043e\u0440\u043e\u0433 <code>posThreshold<\/code> \u0438 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0441\u043b\u0430\u0439\u0434. \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0433\u0440\u0443\u043f\u043f\u0430 \u0443\u0441\u043b\u043e\u0432\u0438\u0439:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">if (posInit &gt; posX1) nextSlide(); else if (posInit &lt; posX1) prevSlide();<\/code><\/pre>\n<p>  <\/p>\n<p>\u0415\u0449\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u0435\u043d \u0432\u0430\u0440\u0438\u0430\u043d\u0442, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043f\u0440\u0438\u0441\u043b\u043e\u043d\u0438\u043b\u0438 \u043f\u0430\u043b\u0435\u0446 \u0438 \u0441\u0440\u0430\u0437\u0443 \u0443\u0431\u0440\u0430\u043b\u0438, \u0432\u0440\u043e\u0434\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f <code>click<\/code>. \u0412 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 <code>posInit<\/code> === <code>posX1<\/code>. \u042d\u0442\u043e\u0442 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043c\u044b \u0442\u043e\u0436\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u043d\u043e \u043e\u0431 \u044d\u0442\u043e\u043c \u043f\u043e\u0437\u0436\u0435.<\/p>\n<p>  <\/li>\n<\/ol>\n<p>  <\/p>\n<p>\u041d\u0430\u0434\u0435\u044e\u0441\u044c \u0443 \u043c\u0435\u043d\u044f \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u043e. \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c \u043a \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044e JavaScript.<\/p>\n<p>  <a name=\"4\"><\/a>  <\/p>\n<h3 id=\"4-pishem-javascript\">4. \u041f\u0438\u0448\u0435\u043c JavaScript<\/h3>\n<p>  <\/p>\n<p>\u041d\u0438\u0436\u0435 \u044f \u043e\u043f\u0438\u0448\u0443 \u043a\u0440\u0430\u0442\u043a\u043e \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u0435\u0449\u0435 \u0440\u0430\u0437, \u043d\u043e \u043f\u043e\u043c\u0438\u043c\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430, \u0431\u0443\u0434\u0435\u0442 \u0435\u0449\u0435 \u043d\u0435 \u043c\u0430\u043b\u043e \u0440\u0430\u0437\u043d\u044b\u0445 \u0443\u0441\u043b\u043e\u0432\u0438\u0439 \u0434\u043b\u044f &quot;\u0444\u0438\u043a\u0441\u043e\u0432&quot; \u043d\u0435 \u043d\u0443\u0436\u043d\u043e\u0433\u043e \u043d\u0430\u043c \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u044c \u043a \u0440\u0430\u0437\u043d\u044b\u043c \u0441\u0442\u0440\u0430\u043d\u043d\u043e\u0441\u0442\u044f\u043c, \u043b\u0438\u0431\u043e \u0431\u0443\u0434\u0435\u0442 \u043b\u043e\u043c\u0430\u0442\u044c \u0441\u043b\u0430\u0439\u0434\u0435\u0440. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0441\u043b\u0430\u0439\u0434\u043e\u0432 \u0441\u0432\u0430\u0439\u043f\u0430\u043c\u0438, \u0430 \u0444\u0438\u043a\u0441\u0438\u0442\u044c \u0431\u0443\u0434\u0435\u043c \u0443\u0436\u0435 \u043f\u043e\u0442\u043e\u043c. \u042f \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u044e\u0441\u044c \u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0441\u0435 \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u044f \u0438 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u044b, \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044f \u0432\u0441\u044e \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c.<\/p>\n<p>  <\/p>\n<p>\u041a\u0440\u0430\u0442\u043a\u043e \u043e\u0431 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u0435\u0449\u0435 \u0440\u0430\u0437:<\/p>\n<p>  <\/p>\n<ul>\n<li><code>.slider-track<\/code> \u0431\u0443\u0434\u0435\u0442 \u0434\u0432\u0438\u0433\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 <code>transfrom: translate3d(Xpx, 0px, 0px)<\/code>;<\/li>\n<li>\u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0437\u0430\u0434\u0430\u0434\u0438\u043c \u0435\u043c\u0443 \u044d\u0442\u043e\u0442 \u0441\u0442\u0438\u043b\u044c <code>transfrom: translate3d(0px, 0px, 0px)<\/code> \u0432 \u043e\u0431\u044a\u0435\u043a\u0442 <code>style<\/code>, \u0447\u0442\u043e\u0431\u044b \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0435\u0433\u043e \u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c;<\/li>\n<li>\u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u0442\u0435\u043a\u0443\u0449\u0443\u044e \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0438\u0437 <code>style.transform<\/code> \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0433\u043e \u043c\u0435\u0442\u043e\u0434\u0430 \u0441\u0442\u0440\u043e\u043a <code>match()<\/code> \u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0435\u0435 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u043a\u0443\u0440\u0441\u043e\u0440\u0430;<\/li>\n<li>\u0432 \u0441\u0430\u043c\u043e\u043c \u043d\u0430\u0447\u0430\u043b\u0435 \u043d\u0430\u0437\u043d\u0430\u0447\u0438\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>swipeStart<\/code> \u043d\u0430 <code>.slider-list<\/code> \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u0439 <code>touchstart<\/code> \u0438 <code>mousedown<\/code>;<\/li>\n<li>\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>swipeStart<\/code> \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043d\u0430\u0437\u043d\u0430\u0447\u0430\u0442\u044c \u0443\u0436\u0435 \u043d\u0430 <code>document<\/code> \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>swipeAction<\/code> \u0438 <code>swipeEnd<\/code> \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u0439 <code>touchmove<\/code> (<code>mousemove<\/code>) \u0438 <code>touchend<\/code> (<code>mouseup<\/code>) \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u043f\u043e\u0437\u0436\u0435 \u0443\u0434\u0430\u043b\u044f\u0442\u044c;<\/li>\n<li>\u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0441\u0432\u0430\u0439\u043f\u0430 \u043f\u0440\u0438 \u043f\u0440\u043e\u0445\u043e\u0434\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0447\u0438\u0441\u043b\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u0440\u043e\u0433\u0430 <code>posThreshold<\/code>, \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0442\u044c \u0438\u043b\u0438 \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0442\u044c <code>slideIndex<\/code> \u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0441\u043b\u0430\u0439\u0434\u0430;<\/li>\n<li>\u0435\u0441\u043b\u0438 \u043f\u043e\u0440\u043e\u0433 <code>posThreshold<\/code> \u043f\u0440\u043e\u0439\u0434\u0435\u043d \u043d\u0435 \u0431\u044b\u043b, \u0442\u043e \u0432\u0435\u0440\u043d\u0435\u043c \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u0432 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435;<\/li>\n<li>\u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043d\u0430 \u0441\u0442\u0440\u0435\u043b\u043a\u0438-\u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u0435\u043b\u0438, \u0441\u043b\u0430\u0439\u0434\u044b \u0431\u0443\u0434\u0443\u0442 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u044c\u0441\u044f.<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u041f\u043e\u043b\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u043a\u043e\u0434\u0430 \u0431\u0435\u0437 \u0440\u0430\u0437\u0440\u044b\u0432\u043e\u0432 \u043d\u0430 \u043f\u043e\u044f\u0441\u043d\u0435\u043d\u0438\u044f \u0431\u0443\u0434\u0435\u0442 <a href=\"#full\">\u0441\u043d\u0438\u0437\u0443<\/a>.<br \/>  \u041f\u043e\u043b\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u043a\u043e\u0434\u0430 \u0441 \u0444\u0438\u043a\u0441\u0430\u043c\u0438 \u043d\u0435\u0436\u0435\u043b\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u043e\u0432\u0435\u0434\u043d\u0438\u044f <a href=\"#fixedFull\">\u0435\u0449\u0435 \u043d\u0438\u0436\u0435<\/a><\/p>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0432\u044b\u043c \u0434\u0435\u043b\u043e\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u043d\u0430\u0448\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u041f\u0440\u0438 \u0442\u0430\u043a\u043e\u0439 \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e\u0439 HTML-\u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435 \u0445\u043e\u0440\u043e\u0448\u0438\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u043c \u0431\u044b\u043b\u043e \u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0447\u0435\u0440\u0435\u0437 \u043e\u0434\u0438\u043d querySelector \u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 DOM, \u043d\u043e \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u044b \u0432\u043e\u0437\u044c\u043c\u0435\u043c \u0432\u0441\u0435 \u0447\u0435\u0440\u0435\u0437 querySelector. \u0422\u0430\u043a\u0436\u0435 \u043e\u0431\u044a\u044f\u0432\u0438\u043c \u0432\u0441\u0435 \u043d\u0443\u0436\u043d\u044b\u0435 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0441\u043b\u0430\u0439\u0434\u044b. \u041f\u043e\u044f\u0441\u043d\u0435\u043d\u0438\u0435 \u044f \u0434\u0430\u043c \u043d\u0438\u0436\u0435.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">let slider = document.querySelector('.slider'),   sliderList = slider.querySelector('.slider-list'),   sliderTrack = slider.querySelector('.slider-track'),   slides = slider.querySelectorAll('.slide'),   arrows = slider.querySelector('.slider-arrows'),   prev = arrows.children[0],   next = arrows.children[1],   slideWidth = slides[0].offsetWidth,   slideIndex = 0,   posInit = 0,   posX1 = 0,   posX2 = 0,   posFinal = 0,   posThreshold = slideWidth * .35,   trfRegExp = \/[-0-9.]+(?=px)\/,   slide = function() {     sliderTrack.style.transition = 'transform .5s';     sliderTrack.style.transform = `translate3d(-${slideIndex * slideWidth}px, 0px, 0px)`;      \/\/ \u0434\u0435\u043b\u0430\u0435\u043c \u0441\u0442\u0440\u0435\u043b\u043a\u0443 prev \u043d\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0439 \u043d\u0430 \u043f\u0435\u0440\u0432\u043e\u043c \u0441\u043b\u0430\u0439\u0434\u0435     \/\/ \u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0439 \u0432 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445     \/\/ \u0434\u0435\u043b\u0430\u0435\u043c \u0441\u0442\u0440\u0435\u043b\u043a\u0443 next \u043d\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0439 \u043d\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u043c \u0441\u043b\u0430\u0439\u0434\u0435     \/\/ \u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0439 \u0432 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445     prev.classList.toggle('disabled', slideIndex === 0);     next.classList.toggle('disabled', slideIndex === --slides.length);   } ...<\/code><\/pre>\n<p>  <\/p>\n<p><code>trfRegExp<\/code> \u2014 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u0441 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u043e\u0433\u043e \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0441\u0447\u0438\u0442\u044b\u0432\u0430\u043d\u0438\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>transform<\/code> \u0443 \u043d\u0430\u0448\u0435\u0433\u043e <code>.slider-track<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0434\u043b\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043c\u044b\u0448\u0438 \u043d\u0443\u0436\u043d\u044b\u0435 \u043d\u0430\u043c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u043b\u0435\u0436\u0430\u0442 \u0432 <code>event.clientX<\/code>, \u0442\u043e \u0434\u043b\u044f \u0442\u0430\u0447 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043e\u043d\u0438 \u043b\u0435\u0436\u0430\u0442 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 touches \u2014 <code>event.touches[0].clientX<\/code>. \u0417\u043d\u0430\u0447\u0438\u0442 \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u043a \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c <code>event<\/code> \u043d\u0443\u0436\u043d\u043e \u0447\u0435\u0440\u0435\u0437 \u0443\u0441\u043b\u043e\u0432\u0438\u0435 \u0438 \u0442.\u043a. \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0432 \u0434\u0432\u0443\u0445 \u043c\u0435\u0441\u0442\u0430\u0445, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u0443\u0441\u043b\u043e\u0432\u0438\u0435 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>getEvent<\/code>. \u041c\u044b \u0431\u0443\u0434\u0435\u043c \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c <code>event.type<\/code> \u043d\u0430 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435 \u043f\u043e\u0434\u0441\u0442\u0440\u043e\u043a\u0438 touch \u0438 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u043f\u0435\u0440\u0432\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 touch \u0438\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u043e event. \u0418 \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u043f\u0438\u0448\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u0430\u043b\u044c\u0448\u0435.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">getEvent = function() {   return event.type.search('touch') !== -1 ? event.touches[0] : event;   \/\/ p.s. event - \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 }, \/\/ \u0438\u043b\u0438 es6 getEvent = () =&gt; event.type.search('touch') !== -1 ? event.touches[0] : event,  swipeStart = function() {   let evt = getEvent();    \/\/ \u0431\u0435\u0440\u0435\u043c \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0443\u044e \u043f\u043e\u0437\u0438\u0446\u0438\u044e \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u043f\u043e \u043e\u0441\u0438 \u0425   posInit = posX1 = evt.clientX;    \/\/ \u0443\u0431\u0438\u0440\u0430\u0435\u043c \u043f\u043b\u0430\u0432\u043d\u044b\u0439 \u043f\u0435\u0440\u0435\u0445\u043e\u0434, \u0447\u0442\u043e\u0431\u044b track \u0434\u0432\u0438\u0433\u0430\u043b\u0441\u044f \u0437\u0430 \u043a\u0443\u0440\u0441\u043e\u0440\u043e\u043c \u0431\u0435\u0437 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0438   \/\/ \u0442.\u043a. \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 slide()   sliderTrack.style.transition = '';    \/\/ \u0438 \u0441\u0440\u0430\u0437\u0443 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043d\u0430 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0435   document.addEventListener('touchmove', swipeAction);   document.addEventListener('touchend', swipeEnd);   document.addEventListener('mousemove', swipeAction);   document.addEventListener('mouseup', swipeEnd); }, swipeAction = function() {   let evt = getEvent(),     \/\/ \u0434\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u043a\u0440\u0430\u0441\u0438\u0432\u043e\u0439 \u0437\u0430\u043f\u0438\u0441\u0438 \u0432\u043e\u0437\u044c\u043c\u0435\u043c \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e transform     style = sliderTrack.style.transform,     \/\/ \u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u043c \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u043e\u0433\u043e \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438 \u0441\u0440\u0430\u0437\u0443 \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0432 \u0447\u0438\u0441\u043b\u043e     transform = +style.match(trfRegExp)[0];    posX2 = posX1 - evt.clientX;   posX1 = evt.clientX;    sliderTrack.style.transform = `translate3d(${transform - posX2}px, 0px, 0px)`;   \/\/ \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434 \u0441\u0442\u0440\u043e\u043a .replace():   \/\/ sliderTrack.style.transform = style.replace(trfRegExp, match =&gt; match - posX2);   \/\/ \u043d\u043e \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u0442\u0435\u043a\u0443\u0449\u0430\u044f \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 } ...<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u044f\u0441\u043d\u0435\u043d\u0438\u0435 \u043a \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>swipeAction<\/code>:<br \/>  \u0412 \u044d\u0442\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043c\u044b \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>transform<\/code>. \u0420\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435:<br \/>  \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u043e\u0433\u043e \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438\u0449\u0435\u043c \u0432 \u0441\u0442\u0440\u043e\u043a\u0435 <code>translate3d(0px, 0px, 0px)<\/code> \u043f\u0435\u0440\u0432\u043e\u0435 \u0432\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u0435 \u043f\u043e\u0434\u0441\u0442\u0440\u043e\u043a\u0438 &quot;<code>\u0427\u0418\u0421\u041b\u041epx<\/code>&quot;. \u0418\u0437\u043c\u0435\u043d\u044f\u0435\u043c \u0435\u0433\u043e \u0438 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u043e\u0435 \u0447\u0438\u0441\u043b\u043e \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>transform<\/code>. \u041e\u043d\u043e \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0441\u0434\u0432\u0438\u0433 \u043f\u043e \u043e\u0441\u0438 \u0425.<br \/>  \u0420\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u043e\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a: <code>[-0-9.]+(?=px)<\/code>, \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u0435\u0433\u043e \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435:<\/p>\n<p>  <\/p>\n<ul>\n<li><code>[-0-9.]<\/code> \u2014 \u044d\u0442\u0430 \u0433\u0440\u0443\u043f\u043f\u0430 \u0433\u043e\u0432\u043e\u0440\u0438\u0442, \u0447\u0442\u043e \u043c\u044b \u0438\u0449\u0435\u043c \u0438\u043b\u0438 &quot;\u0442\u0438\u0440\u0435&quot; \u0438\u043b\u0438 &quot;\u0446\u0438\u0444\u0440\u0443 \u043e\u0442 0 \u0434\u043e 9&quot; \u0438\u043b\u0438 &quot;\u0442\u043e\u0447\u043a\u0443&quot;;<\/li>\n<li><code>+<\/code> \u2014 \u043f\u043e\u0441\u043b\u0435 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0433\u0440\u0443\u043f\u043f\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u0442, \u0447\u0442\u043e \u043b\u044e\u0431\u043e\u0439 \u0438\u0437 \u044d\u0442\u0438\u0445 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c 1 \u0438\u043b\u0438 \u0431\u043e\u043b\u0435\u0435 \u0440\u0430\u0437, \u044d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043d\u0430\u043c \u043d\u0430\u0439\u0442\u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u044f, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440: 5, 101.10, -19, -12.5 \u0438 \u0442.\u0434.;<\/li>\n<li><code>(?=px)<\/code> \u2014 \u0433\u0432\u043e\u0440\u0438\u0442, \u0447\u0442\u043e \u043c\u044b \u0438\u0449\u0435\u043c \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0443\u044e \u0433\u0440\u0443\u043f\u043f\u0443 \u0446\u0438\u0444\u0440, \u0442\u043e\u043b\u044c\u043a\u043e \u0435\u0441\u043b\u0438 \u0437\u0430 \u043d\u0438\u043c\u0438 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 &quot;px&quot;.<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0418 \u043d\u0430 \u044d\u0442\u043e\u043c \u043c\u043e\u043c\u0435\u043d\u0442\u0435 \u043d\u0430\u0448 <code>.slider-track<\/code> \u0443\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0434\u0432\u0438\u0433\u0430\u0442\u044c, \u043d\u043e \u043d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0435\u043c \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0435\u043c\u0443 <code>sliderTrack.style.transform = 'translate3d(0px, 0px, 0px)'<\/code>, \u0447\u0442\u043e\u0431\u044b \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>swipeAction<\/code> \u0431\u044b\u043b\u043e \u0447\u0442\u043e \u043c\u0435\u043d\u044f\u0442\u044c. \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/4-\/bn\/wc\/4-bnwcpct0an3z9ugo_fwrjhvgi.gif\"><\/p>\n<p>  <\/p>\n<p>\u041d\u043e \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0437\u0430\u0432\u0435\u0440\u0448\u0430\u0435\u043c \u0441\u0432\u0430\u0439\u043f (\u043e\u0442\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043c\u044b\u0448\u044c \u0438\u043b\u0438 \u0443\u0431\u0438\u0440\u0430\u0435\u043c \u043f\u0430\u043b\u0435\u0446 \u043e\u0442 \u044d\u043a\u0440\u0430\u043d\u0430) \u2014 \u0444\u0443\u043d\u043a\u0446\u0438\u044f <code>swipeAction<\/code> \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f, <code>.slider-track<\/code> \u0434\u0432\u0438\u0433\u0430\u0435\u0442\u0441\u044f \u0437\u0430 \u043c\u044b\u0448\u044c\u044e \u043f\u043e \u043e\u0441\u0438 \u0425. \u041c\u044b \u0443\u0436\u0435 \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043b\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>swipeEnd<\/code> \u043a \u043d\u0443\u0436\u043d\u044b\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u044f\u043c\u0438, \u043d\u043e \u0434\u043e \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043d\u0435 \u0434\u043e\u0448\u043b\u0438, \u043e\u0431\u044a\u044f\u0432\u0438\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0438 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u043f\u043e\u044f\u0441\u043d\u0435\u043d\u0438\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">swipeEnd = function() {   \/\/ \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u0430\u044f \u043f\u043e\u0437\u0438\u0446\u0438\u044f \u043a\u0443\u0440\u0441\u043e\u0440\u0430   posFinal = posInit - posX1;    document.removeEventListener('touchmove', swipeAction);   document.removeEventListener('mousemove', swipeAction);   document.removeEventListener('touchend', swipeEnd);   document.removeEventListener('mouseup', swipeEnd);    \/\/ \u0443\u0431\u0438\u0440\u0430\u0435\u043c \u0437\u043d\u0430\u043a \u043c\u0438\u043d\u0443\u0441 \u0438 \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u043c \u0441 \u043f\u043e\u0440\u043e\u0433\u043e\u043c \u0441\u0434\u0432\u0438\u0433\u0430 \u0441\u043b\u0430\u0439\u0434\u0430   if (Math.abs(posFinal) &gt; posThreshold) {     \/\/ \u0435\u0441\u043b\u0438 \u043c\u044b \u0442\u044f\u043d\u0443\u043b\u0438 \u0432\u043f\u0440\u0430\u0432\u043e, \u0442\u043e \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u043c \u043d\u043e\u043c\u0435\u0440 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0441\u043b\u0430\u0439\u0434\u0430     if (posInit &lt; posX1) {       slideIndex--;     \/\/ \u0435\u0441\u043b\u0438 \u043c\u044b \u0442\u044f\u043d\u0443\u043b\u0438 \u0432\u043b\u0435\u0432\u043e, \u0442\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u043c \u043d\u043e\u043c\u0435\u0440 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0441\u043b\u0430\u0439\u0434\u0430     } else if (posInit &gt; posX1) {       slideIndex++;     }   }    \/\/ \u0435\u0441\u043b\u0438 \u043a\u0443\u0440\u0441\u043e\u0440 \u0434\u0432\u0438\u0433\u0430\u043b\u0441\u044f, \u0442\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0441\u043b\u0430\u0439\u0434\u043e\u0432   if (posInit !== posX1) {     slide();   }  };<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c touch \u0438 drag \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0434\u043b\u044f \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442, \u0441\u043b\u0430\u0439\u0434\u044b \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u044e\u0442\u0441\u044f. \u041d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u044e: \u0435\u0441\u043b\u0438 <code>posFinal<\/code> \u0431\u0443\u0434\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u0435 <code>posThreshold<\/code>, \u0442\u043e \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0441\u043b\u0430\u0439\u0434, \u0438\u043d\u0430\u0447\u0435, \u043e\u043d \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>Math.abs()<\/code> \u0437\u043d\u0430\u043a \u043c\u0438\u043d\u0443\u0441 \u043e\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ap\/nl\/va\/apnlvaasqnkfe_cfdcfi8nxjkjq.gif\"><\/p>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0434\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0441\u0442\u0440\u0435\u043b\u043a\u0430\u043c\u0438. \u041f\u0440\u0438\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043a\u043b\u0438\u043a\u0430 \u043d\u0430 \u0431\u043b\u043e\u043a \u0441\u043e \u0441\u0442\u0440\u0435\u043b\u043a\u0430\u043c\u0438, \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u043d\u0430 \u043a\u0430\u043a\u043e\u0439 \u0438\u0437 \u043d\u0438\u0445 \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u0435\u043b \u043a\u043b\u0438\u043a \u0438 \u0432\u044b\u0437\u044b\u0430\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0441\u043b\u0430\u0439\u0434\u043e\u0432.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">arrows.addEventListener('click', function() {   let target = event.target;    if (target === next) {     slideIndex++;   } else if (target === prev) {     slideIndex--;   } else {     return;   }    slide(); });  sliderTrack.style.transform = 'translate3d(0px, 0px, 0px)';  slider.addEventListener('touchstart', swipeStart); slider.addEventListener('mousedown', swipeStart);<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u044c\u0441\u044f \u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0442\u0440\u0435\u043b\u043e\u043a. \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0441\u043d\u0438\u0437\u0443 \u043f\u0440\u0438\u0432\u044f\u0437\u044b\u0432\u0430\u044e\u0442 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043d\u0430 \u0441\u043b\u0430\u0439\u0434\u0435\u0440.<\/p>\n<p>  <a name=\"5\"><\/a>  <\/p>\n<h3 id=\"itogo\">\u0418\u0442\u043e\u0433\u043e<\/h3>\n<p>  <\/p>\n<p>\u0418 \u0432\u043e\u0442 \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u0421\u043b\u0430\u0439\u0434\u044b \u043f\u0435\u0440\u0435\u043b\u0438\u0441\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f tocuh \u0441\u043e\u0431\u044b\u0442\u0438\u044f\u043c\u0438, drag \u0441\u043e\u0431\u044b\u0442\u0438\u044f\u043c\u0438 \u0438 \u0441\u0442\u0440\u0435\u043b\u043a\u0430\u043c\u0438-\u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u0435\u043b\u044f\u043c\u0438. \u041d\u043e \u0435\u0441\u0442\u044c \u0435\u0449\u0435 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u043e\u0436\u0435\u0442 \u0435\u0433\u043e \u0441\u043b\u043e\u043c\u0430\u0442\u044c, \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445 \u043d\u0438\u0436\u0435:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u0441\u043a\u0440\u043e\u043b\u043b\u0438\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0432\u0432\u0435\u0440\u0445 \u0438\u043b\u0438 \u0432\u043d\u0438\u0437 \u0441 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430, \u043c\u044b \u043f\u0440\u0438\u0441\u043b\u043e\u043d\u044f\u0435\u043c \u043f\u0430\u043b\u0435\u0446 \u043a \u044d\u043a\u0440\u0430\u043d\u0443 \u0438 \u0434\u0435\u043b\u0430\u0435\u043c \u0438\u043c \u0432\u0437\u043c\u0430\u0445. \u0412 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u0437\u043c\u0430\u0445\u0430, \u043f\u0430\u043b\u0435\u0446 \u043c\u043e\u0436\u0435\u0442 \u0443\u0445\u043e\u0434\u0438\u0442\u044c \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u0443 \u0438 \u0435\u0441\u043b\u0438 \u044d\u0442\u043e\u0442 \u0432\u0437\u043c\u0430\u0445 \u0431\u044b\u043b \u043d\u0430 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0435, \u0442\u043e \u043d\u0430\u0448\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u0434\u0432\u0438\u0433\u0430\u0442\u044c \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u0443:<\/li>\n<\/ul>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/tb\/hs\/ze\/tbhszevifizhaslvl6ecu-atqzc.gif\"><\/p>\n<p>  <\/p>\n<p>\u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u0438 \u043f\u043e \u043e\u0441\u0438 Y, \u0437\u0430\u0442\u0435\u043c \u0440\u0430\u0437\u0440\u0435\u0448\u0430\u0442\u044c \u0438\u043b\u0438 \u0437\u0430\u043f\u0440\u0435\u0449\u0430\u0442\u044c \u0441\u0432\u0430\u0439\u043f, \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u043e\u0433\u043e \u043a\u0430\u043a\u043e\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043c\u044b \u0441\u043e\u0432\u0435\u0440\u0448\u0430\u0435\u043c (\u0441\u0432\u0430\u0439\u043f \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u0438\u043b\u0438 \u0441\u043a\u0440\u043e\u043b\u043b \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b).<\/p>\n<p>  <\/p>\n<ul>\n<li>\u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0442\u044f\u043d\u0443\u0442\u044c \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u0443, \u043a\u043e\u0433\u0434\u0430 \u0441 \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u043f\u0443\u0441\u0442\u043e:<\/li>\n<\/ul>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/sd\/63\/pt\/sd63pt4pzjjnf8vuo4mrbvvexsq.gif\"><\/p>\n<p>  <\/p>\n<p>\u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0443\u0436\u043d\u043e \u043d\u0430 \u043f\u0435\u0440\u0432\u043e\u043c \u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u043c \u0441\u043b\u0430\u0439\u0434\u0435 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u0432 \u043a\u0430\u043a\u0443\u044e \u0441\u0442\u043e\u0440\u043e\u043d\u0443 \u043c\u044b \u0442\u044f\u043d\u0435\u043c \u0441\u043b\u0430\u0439\u0434 \u0438 \u0437\u0430\u0432\u0435\u0440\u0448\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0435\u0441\u043b\u0438 \u043d\u0430 \u043f\u0435\u0440\u0432\u043e\u043c \u0441\u043b\u0430\u0439\u0434\u0435 \u043c\u044b \u0442\u044f\u043d\u0435\u043c \u0432\u043f\u0440\u0430\u0432\u043e, \u0430 \u043d\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u043c \u0441\u043b\u0430\u0439\u0434\u0435 \u0442\u044f\u043d\u0435\u043c \u0432\u043b\u0435\u0432\u043e.<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0421\u043b\u0430\u0439\u0434\u044b \u043c\u043e\u0436\u043d\u043e \u0442\u0430\u0449\u0438\u0442\u044c \u0432 \u043b\u044e\u0431\u0443\u044e \u0441\u0442\u043e\u0440\u043e\u043d\u0443, \u043f\u043e\u043a\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0448\u0438\u0440\u0438\u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0430:<\/li>\n<\/ul>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ek\/yh\/u0\/ekyhu0zljt-xdjiixmxmw7yeslq.gif\"><\/p>\n<p>  <\/p>\n<p>\u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0442\u0430\u043a\u0436\u0435 \u043d\u0443\u0436\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0432 \u043a\u0430\u043a\u0443\u044e \u0441\u0442\u043e\u0440\u043e\u043d\u0443 \u043c\u044b \u0442\u044f\u043d\u0435\u043c \u0441\u043b\u0430\u0439\u0434 \u0438 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0441\u0442\u043e\u0440\u043e\u043d\u044b, \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c \u0442\u0435\u043a\u0443\u0449\u0443\u044e \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0441 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0435\u0439 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0438\u043b\u0438 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e \u0441\u043b\u0430\u0439\u0434\u0430. \u0427\u0442\u043e\u0431\u044b \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043d\u0435 \u0441\u0447\u0438\u0442\u0430\u0442\u044c \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0438 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e \u0441\u043b\u0430\u0439\u0434\u0430 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>swipeAction<\/code>, \u043d\u0443\u0436\u043d\u043e \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>swipeStart<\/code> \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u0438\u0445 1 \u0440\u0430\u0437.<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0421\u043b\u0430\u0439\u0434\u0435\u0440 \u043c\u043e\u0436\u043d\u043e &quot;\u0441\u0445\u0432\u0430\u0442\u0438\u0442\u044c&quot;, \u043a\u043e\u0433\u0434\u0430 \u0441\u043b\u0430\u0439\u0434 \u0435\u0449\u0435 \u043d\u0435 \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043b \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u0435.<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u044a\u044f\u0432\u0438\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <code>allowSwipe<\/code> \u0438 \u0440\u0435\u0433\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0435\u0439 \u0437\u0430\u043f\u0440\u0435\u0442 \u0441\u0432\u0430\u0439\u043f\u0430.<\/p>\n<p>  <\/p>\n<p>\u041e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u044d\u0442\u043e \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u044f \u0443\u0436\u0435 \u043d\u0435 \u0431\u0443\u0434\u0443. \u041f\u0440\u043e\u0441\u0442\u043e \u0432\u044b\u043b\u043e\u0436\u0443 \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 <a href=\"#fixedFull\">\u043d\u0438\u0436\u0435<\/a>.<br \/>  \u0418 \u0432 <a href=\"https:\/\/codepen.io\/i-did\/pen\/yLYRvVL\" title=\"codepen.io\" rel=\"nofollow\">\u043f\u0440\u0438\u043c\u0435\u0440\u0435<\/a> \u0432\u0441\u0435 \u044d\u0442\u0438 \u0443\u0441\u043b\u043e\u0432\u0438\u044f \u0443\u0436\u0435 \u0431\u0443\u0434\u0443\u0442 \u0441\u0434\u0435\u043b\u0430\u043d\u044b. \u0422\u0430\u043a\u0436\u0435 \u0434\u043b\u044f \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u0438 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043a\u0443\u0440\u0441\u043e\u0440 \u043d\u0430 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0435.<\/p>\n<p>  <a name=\"full\"><\/a>  <\/p>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">\u041f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u0434 (swipe, drag, arrows)<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">let slider = document.querySelector('.slider'),   sliderList = slider.querySelector('.slider-list'),   sliderTrack = slider.querySelector('.slider-track'),   slides = slider.querySelectorAll('.slide'),   arrows = slider.querySelector('.slider-arrows'),   prev = arrows.children[0],   next = arrows.children[1],   slideWidth = slides[0].offsetWidth,   slideIndex = 0,   posInit = 0,   posX1 = 0,   posX2 = 0,   posFinal = 0,   posThreshold = slides[0].offsetWidth * 0.35,   trfRegExp = \/([-0-9.]+(?=px))\/,   getEvent = function() {     return (event.type.search('touch') !== -1) ? event.touches[0] : event;   },   slide = function() {     if (transition) {       sliderTrack.style.transition = 'transform .5s';     }     sliderTrack.style.transform = `translate3d(-${slideIndex * slideWidth}px, 0px, 0px)`;      prev.classList.toggle('disabled', slideIndex === 0);     next.classList.toggle('disabled', slideIndex === --slides.length);   },   swipeStart = function() {     let evt = getEvent();      posInit = posX1 = evt.clientX;      sliderTrack.style.transition = '';      document.addEventListener('touchmove', swipeAction);     document.addEventListener('mousemove', swipeAction);     document.addEventListener('touchend', swipeEnd);     document.addEventListener('mouseup', swipeEnd);   },   swipeAction = function() {      let evt = getEvent(),       style = sliderTrack.style.transform,       transform = +style.match(trfRegExp)[0];      posX2 = posX1 - evt.clientX;     posX1 = evt.clientX;      sliderTrack.style.transform = `translate3d(${transform - posX2}px, 0px, 0px)`;   },   swipeEnd = function() {     posFinal = posInit - posX1;      document.removeEventListener('touchmove', swipeAction);     document.removeEventListener('mousemove', swipeAction);     document.removeEventListener('touchend', swipeEnd);     document.removeEventListener('mouseup', swipeEnd);      if (Math.abs(posFinal) &gt; posThreshold) {       if (posInit &lt; posX1) {         slideIndex--;       } else if (posInit &gt; posX1) {         slideIndex++;       }     }      if (posInit !== posX1) {       slide();     }   };    sliderTrack.style.transform = 'translate3d(0px, 0px, 0px)';    slider.addEventListener('touchstart', swipeStart);   slider.addEventListener('mousedown', swipeStart);    arrows.addEventListener('click', function() {     let target = event.target;      if (target === next) {       slideIndex++;     } else if (target === prev) {       slideIndex--;     } else {       return;     }      slide();   });<\/code><\/pre>\n<\/div><\/div>\n<p>  <a name=\"fixedFull\"><\/a>  <\/p>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">\u0421\u0430\u043c\u044b\u0439 \u043f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u0434<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">let slider = document.querySelector('.slider'),   sliderList = slider.querySelector('.slider-list'),   sliderTrack = slider.querySelector('.slider-track'),   slides = slider.querySelectorAll('.slide'),   arrows = slider.querySelector('.slider-arrows'),   prev = arrows.children[0],   next = arrows.children[1],   slideWidth = slides[0].offsetWidth,   slideIndex = 0,   posInit = 0,   posX1 = 0,   posX2 = 0,   posY1 = 0,   posY2 = 0,   posFinal = 0,   isSwipe = false,   isScroll = false,   allowSwipe = true,   transition = true,   nextTrf = 0,   prevTrf = 0,   lastTrf = --slides.length * slideWidth,   posThreshold = slides[0].offsetWidth * 0.35,   trfRegExp = \/([-0-9.]+(?=px))\/,   getEvent = function() {     return (event.type.search('touch') !== -1) ? event.touches[0] : event;   },   slide = function() {     if (transition) {       sliderTrack.style.transition = 'transform .5s';     }     sliderTrack.style.transform = `translate3d(-${slideIndex * slideWidth}px, 0px, 0px)`;      prev.classList.toggle('disabled', slideIndex === 0);     next.classList.toggle('disabled', slideIndex === --slides.length);   },   swipeStart = function() {     let evt = getEvent();      if (allowSwipe) {        transition = true;        nextTrf = (slideIndex + 1) * -slideWidth;       prevTrf = (slideIndex - 1) * -slideWidth;        posInit = posX1 = evt.clientX;       posY1 = evt.clientY;        sliderTrack.style.transition = '';        document.addEventListener('touchmove', swipeAction);       document.addEventListener('mousemove', swipeAction);       document.addEventListener('touchend', swipeEnd);       document.addEventListener('mouseup', swipeEnd);        sliderList.classList.remove('grab');       sliderList.classList.add('grabbing');     }   },   swipeAction = function() {      let evt = getEvent(),       style = sliderTrack.style.transform,       transform = +style.match(trfRegExp)[0];      posX2 = posX1 - evt.clientX;     posX1 = evt.clientX;      posY2 = posY1 - evt.clientY;     posY1 = evt.clientY;      \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441\u0432\u0430\u0439\u043f \u0438\u043b\u0438 \u0441\u043a\u0440\u043e\u043b\u043b     if (!isSwipe &amp;&amp; !isScroll) {       let posY = Math.abs(posY2);       if (posY &gt; 7 || posX2 === 0) {         isScroll = true;         allowSwipe = false;       } else if (posY &lt; 7) {         isSwipe = true;       }     }      if (isSwipe) {       \/\/ \u0437\u0430\u043f\u0440\u0435\u0442 \u0443\u0445\u043e\u0434\u0430 \u0432\u043b\u0435\u0432\u043e \u043d\u0430 \u043f\u0435\u0440\u0432\u043e\u043c \u0441\u043b\u0430\u0439\u0434\u0435       if (slideIndex === 0) {         if (posInit &lt; posX1) {           setTransform(transform, 0);           return;         } else {           allowSwipe = true;         }       }        \/\/ \u0437\u0430\u043f\u0440\u0435\u0442 \u0443\u0445\u043e\u0434\u0430 \u0432\u043f\u0440\u0430\u0432\u043e \u043d\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u043c \u0441\u043b\u0430\u0439\u0434\u0435       if (slideIndex === --slides.length) {         if (posInit &gt; posX1) {           setTransform(transform, lastTrf);           return;         } else {           allowSwipe = true;         }       }        \/\/ \u0437\u0430\u043f\u0440\u0435\u0442 \u043f\u0440\u043e\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u043d\u0438\u044f \u0434\u0430\u043b\u044c\u0448\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u0441\u043b\u0430\u0439\u0434\u0430       if (posInit &gt; posX1 &amp;&amp; transform &lt; nextTrf || posInit &lt; posX1 &amp;&amp; transform &gt; prevTrf) {         reachEdge();         return;       }        \/\/ \u0434\u0432\u0438\u0433\u0430\u0435\u043c \u0441\u043b\u0430\u0439\u0434       sliderTrack.style.transform = `translate3d(${transform - posX2}px, 0px, 0px)`;     }    },   swipeEnd = function() {     posFinal = posInit - posX1;      isScroll = false;     isSwipe = false;      document.removeEventListener('touchmove', swipeAction);     document.removeEventListener('mousemove', swipeAction);     document.removeEventListener('touchend', swipeEnd);     document.removeEventListener('mouseup', swipeEnd);      sliderList.classList.add('grab');     sliderList.classList.remove('grabbing');      if (allowSwipe) {       if (Math.abs(posFinal) &gt; posThreshold) {         if (posInit &lt; posX1) {           slideIndex--;         } else if (posInit &gt; posX1) {           slideIndex++;         }       }        if (posInit !== posX1) {         allowSwipe = false;         slide();       } else {         allowSwipe = true;       }      } else {       allowSwipe = true;     }    },   setTransform = function(transform, comapreTransform) {     if (transform &gt;= comapreTransform) {       if (transform &gt; comapreTransform) {         sliderTrack.style.transform = `translate3d(${comapreTransform}px, 0px, 0px)`;       }     }     allowSwipe = false;   },   reachEdge = function() {     transition = false;     swipeEnd();     allowSwipe = true;   };  sliderTrack.style.transform = 'translate3d(0px, 0px, 0px)'; sliderList.classList.add('grab');  sliderTrack.addEventListener('transitionend', () =&gt; allowSwipe = true); slider.addEventListener('touchstart', swipeStart); slider.addEventListener('mousedown', swipeStart);  arrows.addEventListener('click', function() {   let target = event.target;    if (target.classList.contains('next')) {     slideIndex++;   } else if (target.classList.contains('prev')) {     slideIndex--;   } else {     return;   }    slide(); });<\/code><\/pre>\n<\/div><\/div>\n<p>  <\/p>\n<p><a href=\"https:\/\/codepen.io\/i-did\/pen\/yLYRvVL\" title=\"codepen.io\" rel=\"nofollow\">codepen.io<\/a><\/p>\n<\/div>\n<p> \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:\/\/habr.com\/ru\/post\/501258\/\"> https:\/\/habr.com\/ru\/post\/501258\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/501258\/\">\n<p>\u041a\u043e\u0433\u0434\u0430 \u044f \u043d\u0430\u0447\u0438\u043d\u0430\u043b \u0438\u0437\u0443\u0447\u0430\u0442\u044c JavaScript, \u043c\u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u043f\u043e\u043d\u044f\u0442\u044c \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0438 \u0434\u0435\u043b\u0430\u044e\u0442\u0441\u044f \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043b\u0438\u0441\u0442\u044b\u0432\u0430\u0442\u044c \u0441\u0432\u0430\u0439\u043f\u0430\u043c\u0438 \u0438\u043b\u0438 \u043c\u044b\u0448\u044c\u044e, \u043d\u043e \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u043e\u0432 \u0441 \u0445\u043e\u0440\u043e\u0448\u0438\u043c \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435\u043c \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043c\u043d\u0435 \u043d\u0430\u0434\u043e, \u044f \u043d\u0435 \u043d\u0430\u0448\u0435\u043b. \u0427\u0435\u0440\u0435\u0437 \u043a\u0430\u043a\u043e\u0435-\u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043c\u043d\u0435 \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435\u0447\u0442\u043e \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0435. \u0418 \u0442\u0435\u043f\u0435\u0440\u044c \u044f \u0445\u043e\u0447\u0443 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043e\u0431 \u044d\u0442\u043e\u043c \u0441\u0442\u0430\u0442\u044c\u044e, \u0447\u0442\u043e\u0431\u044b \u0434\u0440\u0443\u0433\u0438\u043c \u043b\u044e\u0434\u044f\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0445\u043e\u0442\u044f\u0442 \u043f\u043e\u043d\u044f\u0442\u044c \u043a\u0430\u043a \u044d\u0442\u043e \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c touch \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0434\u043b\u044f \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 (\u0438 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e), \u0431\u044b\u043b\u043e \u043f\u0440\u043e\u0449\u0435 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f. \u042f \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u044e\u0441\u044c \u0438\u0437\u043b\u0430\u0433\u0430\u0442\u044c \u043f\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0443 \u0438 \u043f\u043e\u0434\u043a\u0440\u0435\u043f\u043b\u044f\u0442\u044c \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u044f \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u044b\u043c\u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438.<\/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-303749","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/303749","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=303749"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/303749\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=303749"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=303749"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=303749"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}