{"id":22739,"date":"2022-11-07T07:05:37","date_gmt":"2022-11-07T15:05:37","guid":{"rendered":"https:\/\/coderpad.io\/?p=22739"},"modified":"2023-06-05T13:56:18","modified_gmt":"2023-06-05T20:56:18","slug":"how-to-build-a-draggable-slider-with-javascript","status":"publish","type":"post","link":"https:\/\/coderpad.io\/blog\/development\/how-to-build-a-draggable-slider-with-javascript\/","title":{"rendered":"How To Build A Draggable Slider With JavaScript"},"content":{"rendered":"\n<p>Multitouch gestures like pinching, swiping, and expanding are essentially native to mobile devices like our pads and phones, whereas on desktop, the swipe gesture is most likely to be carried out with mouse events, especially on sites that are specialized in entertainment, education, and we have most recently found them in web projects like e-commerce. This is because the rise of draggable interactions in our mobile browsers gave rise to recent innovations in navigation design.<\/p>\n\n\n\n<p>Its aesthetic objective is to resemble a real-world interaction, bringing skeuomorphic designs to mind. On the desktop, draggable interactions use a mouse and a finger extension to move and pick up objects as we might be able to in real-life situations. Like other gestures, draggable interactions are aesthetically pleasing and increase user interaction, allowing users to stay connected throughout their visit to a site.<\/p>\n\n\n\n<p>In this article, you will build a draggable slider intensively utilizing Javascript and CSS to express your site&#8217;s interaction and aesthetics. The GIF below resembles what you will achieve at the end of this tutorial.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video height=\"280\" style=\"aspect-ratio: 600 \/ 280;\" width=\"600\" autoplay loop muted src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/11\/1.mp4\"><\/video><figcaption class=\"wp-element-caption\">A The GIF shows a page containing several cards sliding from right to left and left to the right.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Prerequisites<\/strong><\/h2>\n\n\n\n<p>There are a few requirements that must be met to effectively follow this article:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A basic knowledge of<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\" target=\"_blank\" rel=\"noopener\"> HTML<\/a> elements.<\/li>\n\n\n\n<li>A solid foundation in<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\" target=\"_blank\" rel=\"noopener\"> JavaScript<\/a>.<\/li>\n\n\n\n<li>A basic understanding of DOM events, especially<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/MouseEvent\" target=\"_blank\" rel=\"noopener\"> mouse events<\/a>.<\/li>\n\n\n\n<li>A working understanding of<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\" target=\"_blank\" rel=\"noopener\"> CSS<\/a>.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Set up the project<\/strong><\/h2>\n\n\n\n<p>Start by creating a new folder, <code>draggable<\/code>, and open the folder in your code editor. In your code editor, create three files: <code>index.html<\/code>, <code>index.js<\/code>, and <code>style.css<\/code>:&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/11\/img_63657415ac415.png\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Visual Studio Code editor showing three files <code>index.html<\/code>, <code>index.js<\/code> and <code>style.css<\/code> in the sidebar.<\/figcaption><\/figure>\n<\/div>\n\n\n<p>In the <code>index.html<\/code> file, link the <code>style.css<\/code> and <code>index.js<\/code> files:&nbsp;<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-meta\">&lt;!DOCTYPE <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"en\"<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">\"UTF-8\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">http-equiv<\/span>=<span class=\"hljs-string\">\"X-UA-Compatible\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"IE=edge\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"viewport\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"width=device-width, initial-scale=1.0\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"stylesheet\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"style.css\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"index.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>Draggable site<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>let's code<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Open the <code>index.html<\/code> file from your browser. You should see the screen:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/11\/img_6365741724c16.png\" alt=\"\"\/><figcaption class=\"wp-element-caption\">The image shows the text <strong>Coderpad<\/strong>.<\/figcaption><\/figure>\n<\/div>\n\n\n<p>Next, you\u2019ll build the cards for the draggable slider. In your <code>index.html<\/code> file, add the following:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"container\"<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"cards\"<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/encrypted-tbn0.gstatic.com\/images?q=tbn:ANd9GcT_X3kCeWYJuVS-vouoQhCfcRWKwbBX6RG1bA&amp;usqp=CAU\"<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"\"<\/span> \/&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card__content\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>Coderpad<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n                  CoderPad is a simple yet powerful online technical assessment software that makes it easy to interview in the candidate's language of choice so hiring!\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/encrypted-tbn0.gstatic.com\/images?q=tbn:ANd9GcR-jt3d-_xLuJFSQPmo6Tqepn4_wtLlgb9RHA&amp;usqp=CAU\"<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"\"<\/span> \/&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card__content\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>Coderpad<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n                  CoderPad is a simple yet powerful online technical assessment software that makes it easy to interview in the candidate's language of choice so hiring!\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\" https:\/\/encrypted-tbn0.gstatic.com\/images?q=tbn:ANd9GcSGqsuPapsSkvE1CmgIDKLzz7wae5kXblPhan-of6_uEBgiVuikb7SXAKJuhkEL-7I47Vg&amp;usqp=CAU\"<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"\"<\/span> \/&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card__content\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>Coderpad<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n                  CoderPad is a simple yet powerful online technical assessment software that makes it easy to interview in the candidate's language of choice so hiring!\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/encrypted-tbn0.gstatic.com\/images?q=tbn:ANd9GcQ8IO5pV7-yK2sN_BWo1UKij8xoRE9g2RoPHgqVD44wG0UAwXJyhPLGr4_-intJUVg-I0w&amp;usqp=CAU\n            \"<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"\"<\/span> \/&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card__content\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>Coderpad<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n                  CoderPad is a simple yet powerful online technical assessment software that makes it easy to interview in the candidate's language of choice so hiring!\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/encrypted-tbn0.gstatic.com\/images?q=tbn:ANd9GcTykw4RpJXpvKdG2mioMW0HfzNjXfGtzS_ojZ3adk_IBqp3xSbSVBIv0jJ2khhML_sZv5s&amp;usqp=CAU\"<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"\"<\/span> \/&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card__content\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>Coderpad<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n                  CoderPad is a simple yet powerful online technical assessment software that makes it easy to interview in the candidate's language of choice so hiring!\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/encrypted-tbn0.gstatic.com\/images?q=tbn:ANd9GcQX5G4dIuaf2GvJH8qrsqK8fJI8jcJbxo_SLQapss5k0fgcS0weQz8T2iL19MoQhBLzJQw&amp;usqp=CAU\"<\/span>\n            <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"\"<\/span> \/&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card__content\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>Coderpad<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n                  CoderPad is a simple yet powerful online technical assessment software that makes it easy to interview in the candidate's language of choice so hiring!\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"index.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Refresh the page in your browser to view the cards you created:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/11\/img_63657417d3db6.png\" alt=\"\"\/><figcaption class=\"wp-element-caption\">The page containing cards with the text &#8220;CoderPad is a simple yet powerful online technical assessment software that makes it easy to interview in the candidate&#8217;s language of choice so hiring!&#8221;<\/figcaption><\/figure>\n<\/div>\n\n\n<p>Next, add some styling in <code>style.css<\/code>:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\">*,\n*<span class=\"hljs-selector-pseudo\">::before<\/span>,\n*<span class=\"hljs-selector-pseudo\">::after<\/span> {\n  <span class=\"hljs-attribute\">box-sizing<\/span>: border-box;\n}\n\n<span class=\"hljs-selector-tag\">body<\/span> {\n  <span class=\"hljs-attribute\">font-family<\/span>:  sans-serif;\n  <span class=\"hljs-attribute\">min-height<\/span>: <span class=\"hljs-number\">100vh<\/span>;\n  <span class=\"hljs-attribute\">display<\/span>: flex;\n  <span class=\"hljs-attribute\">justify-content<\/span>: center;\n  <span class=\"hljs-attribute\">align-items<\/span>: center;\n  <span class=\"hljs-attribute\">background<\/span>: black;\n}\n\n<span class=\"hljs-comment\">\/* global *\/<\/span>\n<span class=\"hljs-selector-tag\">img<\/span> {\n  <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n}\n\n<span class=\"hljs-selector-tag\">h1<\/span> {\n  <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">0.7rem<\/span> <span class=\"hljs-number\">0<\/span>;\n}\n\n<span class=\"hljs-comment\">\/* container *\/<\/span>\n<span class=\"hljs-selector-class\">.container<\/span> {\n  <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">1000px<\/span>;\n  <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">500px<\/span>;\n  <span class=\"hljs-attribute\">position<\/span>: relative;\n \n}\n\n<span class=\"hljs-comment\">\/*cards *\/<\/span>\n<span class=\"hljs-selector-class\">.cards<\/span> {\n  <span class=\"hljs-attribute\">position<\/span>: absolute;\n  <span class=\"hljs-attribute\">top<\/span>: <span class=\"hljs-number\">0<\/span>;\n  <span class=\"hljs-attribute\">left<\/span>: <span class=\"hljs-number\">0<\/span>;\n  <span class=\"hljs-attribute\">display<\/span>: grid;\n  <span class=\"hljs-attribute\">grid-template-columns<\/span>: <span class=\"hljs-built_in\">repeat<\/span>(<span class=\"hljs-number\">6<\/span>, <span class=\"hljs-number\">400px<\/span>);\n  <span class=\"hljs-attribute\">grid-gap<\/span>: <span class=\"hljs-number\">20px<\/span>;\n}\n\n<span class=\"hljs-comment\">\/* card *\/<\/span>\n<span class=\"hljs-selector-class\">.card<\/span> {\n  <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">1px<\/span> solid <span class=\"hljs-built_in\">rgb<\/span>(<span class=\"hljs-number\">204<\/span>, <span class=\"hljs-number\">204<\/span>, <span class=\"hljs-number\">204<\/span>);\n  <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">10px<\/span>;\n  <span class=\"hljs-attribute\">overflow<\/span>: hidden;\n  <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-number\">0px<\/span> <span class=\"hljs-number\">5px<\/span> <span class=\"hljs-number\">20px<\/span> <span class=\"hljs-number\">0px<\/span> <span class=\"hljs-built_in\">rgba<\/span>(<span class=\"hljs-number\">69<\/span>, <span class=\"hljs-number\">67<\/span>, <span class=\"hljs-number\">96<\/span>, <span class=\"hljs-number\">0.2<\/span>);\n\n}\n\n<span class=\"hljs-comment\">\/* card_content *\/<\/span>\n<span class=\"hljs-selector-class\">.card__content<\/span> {\n  <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-built_in\">rgb<\/span>(<span class=\"hljs-number\">139<\/span>, <span class=\"hljs-number\">137<\/span>, <span class=\"hljs-number\">137<\/span>);\n  <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">10px<\/span>;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>After styling, your page on the browser should look like this:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/11\/img_63657418c4af8.png\" alt=\"\"\/><figcaption class=\"wp-element-caption\">The cards are aligned horizontally in a black background and white text font.<\/figcaption><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\"><strong>Implement mouse events<\/strong><\/h2>\n\n\n\n<p>The<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/MouseEvent#:~:text=The%20MouseEvent%20interface%20represents%20events,Though%20the%20MouseEvent.\" target=\"_blank\" rel=\"noopener\"> MouseEvent<\/a> interface displays actions taken due to a user&#8217;s interaction with a pointing device (such as a mouse). The most frequent actions performed on this interface are <code>click<\/code>, <code>dblclick<\/code>, <code>mouseup<\/code>, <code>mousedown<\/code>, and in our case <code>mousemove<\/code>.<\/p>\n\n\n\n<p>Implement the draggable gesture in your application using JavaScript by following the steps outlined below:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Select the <code>container<\/code> and <code>cards<\/code> elements and store them in their respective variables:<\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> slider = <span class=\"hljs-built_in\">document<\/span>.querySelector(<span class=\"hljs-string\">'.container'<\/span>)\n<span class=\"hljs-keyword\">const<\/span> cards = <span class=\"hljs-built_in\">document<\/span>.querySelector(<span class=\"hljs-string\">'.cards'<\/span>)<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li>Create a variable to keep track of the user&#8217;s mouse event:<\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">let<\/span> isPressed = <span class=\"hljs-literal\">false<\/span>;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li>Declare a variable to store the cursor&#8217;s horizontal distance from the inner container:<\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">let<\/span> cursorX;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li>Lastly, add a <code>mousedown<\/code> <a href=\"https:\/\/coderpad.io\/blog\/development\/addeventlistener-javascript\/\">event listener<\/a> to the slider variable:<\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\">slider.addEventListener(<span class=\"hljs-string\">\"mousedown\"<\/span>, (e) =&gt; {\n    isPressed = <span class=\"hljs-keyword\">true<\/span>;\n    cursorX = e.offsetX - cards.offsetLeft;\n    slider.style.cursor = <span class=\"hljs-string\">\"grabbing\"<\/span>;\n});<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The <code>mousedown<\/code> event triggers when your mouse is pushed down. In the code block above, the isPressed&nbsp;variable is set to true whenever the mouse is down. Beneath it, the <code>cursorX<\/code> is defined as the difference of <code>e.offsetX<\/code> and <code>cards.offsetLeft<\/code>, and lastly, the slider&#8217;s cursor style is set to <code>grabbing<\/code> which will only run when the mouse cursor hovers over the cards.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u2139\ufe0f <strong>OffsetX<\/strong> retrieves the horizontal position of the mouse pointer in pixels relative to the target element.<\/p>\n<\/blockquote>\n\n\n\n<p>If you console log <code>e.offsetX<\/code> and you click on your first card as seen in the GIF below, you have 400pixels, which makes much sense as the grid template column was set to 400pixels:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/11\/img_63657419eaa42.gif\" alt=\"\"\/><figcaption class=\"wp-element-caption\">The horizontal position of the mouse pointer in pixels is logged in the console.<\/figcaption><\/figure>\n<\/div>\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u2139\ufe0f <strong>OffsetLeft <\/strong>returns the left position in pixels relative to the left side of the offset parent<\/p>\n<\/blockquote>\n\n\n\n<p>Next, you&#8217;ll add an <a href=\"https:\/\/coderpad.io\/blog\/development\/addeventlistener-javascript\/\">event listener<\/a> to listen to the <code>mousemove<\/code> event:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">slider.addEventListener(<span class=\"hljs-string\">\"mousemove\"<\/span>, (e) =&gt; {\n   <span class=\"hljs-keyword\">if<\/span> (!isPressed) <span class=\"hljs-keyword\">return<\/span>;\n   e.preventDefault();\n   cards.style.left = <span class=\"hljs-string\">`<span class=\"hljs-subst\">${e.offsetX - cursorX}<\/span>px`<\/span>;\n});<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>In the code block above, the slider listens for the <code>mousemove<\/code> event. If the mouse moves, the function then updates the card&#8217;s left property with the difference between the <code>offsetX<\/code> and <code>cursorX<\/code> values.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video height=\"310\" style=\"aspect-ratio: 600 \/ 310;\" width=\"600\" autoplay loop muted src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/11\/1-1.mp4\"><\/video><figcaption class=\"wp-element-caption\">The <code>mousemove<\/code> event in action. The page responds by moving left and right depending on the movement of the mouse.<\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>You must&#8217;ve noticed that the sliding experience isn&#8217;t smooth and has a forceful drag back. To fix this, add a <code>pointer-events: none;<\/code> to the <code>cards<\/code> element in your stylesheet:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-class\">.cards<\/span> {\n  <span class=\"hljs-attribute\">position<\/span>: absolute;\n  <span class=\"hljs-attribute\">top<\/span>: <span class=\"hljs-number\">0<\/span>;\n  <span class=\"hljs-attribute\">left<\/span>: <span class=\"hljs-number\">0<\/span>;\n  <span class=\"hljs-attribute\">display<\/span>: grid;\n  <span class=\"hljs-attribute\">grid-template-columns<\/span>: <span class=\"hljs-built_in\">repeat<\/span>(<span class=\"hljs-number\">6<\/span>, <span class=\"hljs-number\">400px<\/span>);\n  <span class=\"hljs-attribute\">grid-gap<\/span>: <span class=\"hljs-number\">20px<\/span>;\n  <span class=\"hljs-attribute\">pointer-events<\/span>: none;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<figure class=\"wp-block-video aligncenter\"><video height=\"304\" style=\"aspect-ratio: 600 \/ 304;\" width=\"600\" autoplay loop muted src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/11\/1-2.mp4\"><\/video><figcaption class=\"wp-element-caption\">The slider moves smoothly from a left to right direction.<\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>The GIF above indicates an improvement, but then that is not the level of smoothness desired. To get rid of this behavior, add another event listener <code>mouseup<\/code>.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-built_in\">window<\/span>.addEventListener(<span class=\"hljs-string\">\"mouseup\"<\/span>, () =&gt; {\n    isPressed = <span class=\"hljs-literal\">false<\/span>;\n});<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The <code>mouseup<\/code> event listener triggers when a user stops pressing the mouse. So whenever it triggers, isPressed is set to false. Now the slider should be harnessing the completeness of the grab gesture.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video height=\"308\" style=\"aspect-ratio: 600 \/ 308;\" width=\"600\" autoplay loop muted src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/11\/1-3.mp4\"><\/video><figcaption class=\"wp-element-caption\">The slider works perfectly with the grab gestures implemented.<\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>The slider is now draggable. The slider gets the current coordinates relative to the left-hand side of the cards and then subtracts that from the offset of the parent div which is the container.<\/p>\n\n\n\n<p>Although the grab gesture is operational, the slider continues to scroll off the page after the cards. To fix this, create a <code>boundSlides<\/code> function which disables the cards if they extend over the container&#8217;s width on both sides while sliding. In <code>index.js<\/code>, add the following:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-11\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">boundSlides<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">const<\/span> containerRect = slider.getBoundingClientRect();\n  <span class=\"hljs-keyword\">const<\/span> cardsRect = cards.getBoundingClientRect();\n\n  <span class=\"hljs-keyword\">if<\/span> (<span class=\"hljs-built_in\">parseInt<\/span>(cards.style.left) &gt; <span class=\"hljs-number\">0<\/span>) {\n    cards.style.left = <span class=\"hljs-number\">0<\/span>;\n  } <span class=\"hljs-keyword\">else<\/span> <span class=\"hljs-keyword\">if<\/span> (cardsRect.right &lt; containerRect.right) {\n    cards.style.left = <span class=\"hljs-string\">`-<span class=\"hljs-subst\">${cardsRect.width - containerRect.width}<\/span>px`<\/span>;\n  }\n} <\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-11\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>In the <code>boundSlides()<\/code> function, you defined two variables <code>containerRect<\/code> and <code>cardsRect<\/code> to retrieve and store the information on the size of an element and its position relative to the viewport using the <code>getBoundingClientRect()<\/code> method.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\ud83d\udca1 <strong>What is this<\/strong><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/getBoundingClientRect\" target=\"_blank\" rel=\"noopener\"><strong> <\/strong><strong>getBoundingClientRect<\/strong><\/a><strong>?<\/strong><\/p>\n\n\n\n<p>For a better understanding, the values from the <code>getBoundingClientRec<\/code>t() for <code>cards<\/code> and <code>container<\/code> elements are logged in the console when the slider is used:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/11\/img_63691ec12a210.png\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Values of <code>container<\/code> and <code>cards<\/code>. <\/figcaption><\/figure>\n<\/div>\n\n\n<p>The <code>getBoundingClientRect()<\/code> returns an object providing information on the size of an element and its position relative to the<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Viewport\" target=\"_blank\" rel=\"noopener\"> viewport<\/a>.<\/p>\n<\/blockquote>\n\n\n\n<p>The left side of the card is greater than zero whenever you slide, and it is at zero without the slide action. In the <code>boundSlides()<\/code> function, if the left property of the cards container is greater than zero, the value of the left property is set to 0. With the GIF below, you can observe that it no longer goes over zero.<\/p>\n\n\n\n<p>Lastly, you need to also do the same to the right. The <code>boundSlides()<\/code> function checks if the cards&#8217; right position is less than the containers&#8217; and then assign the cards&#8217; left position value to the difference of their width.<\/p>\n\n\n\n<p>In the <code>mousemove<\/code> event listener, call the <code>boundSlides()<\/code> function:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-12\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"> slider.addEventListener(<span class=\"hljs-string\">\"mousemove\"<\/span>, (e) =&gt; {\n    <span class=\"hljs-keyword\">if<\/span> (!isPressed) <span class=\"hljs-keyword\">return<\/span>;\n    e.preventDefault();\n    cards.style.left = <span class=\"hljs-string\">`<span class=\"hljs-subst\">${e.offsetX - cursorX}<\/span>px`<\/span>;\n    boundSlides();\n});<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-12\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Our draggable gesture is complete! View the draggable slider in action in the sandbox below:<\/p>\n\n\n<div\n\tclass=\"sandbox-embed responsive-embed  sandbox-embed--full-width\"\n\tstyle=\"padding-top: 125%\"\ndata-block-name=\"coderpad-sandbox-embed\">\n\t<iframe src=\"https:\/\/embed.coderpad.io\/sandbox?question_id=234221&#038;use_question_button\" width=\"640\" height=\"800\" loading=\"lazy\" aria-label=\"Try out the CoderPad sandbox\"><\/iframe>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>ta-da \ud83c\udf89<\/strong><\/h2>\n\n\n\n<p>In this article, you learned how to build a draggable carousel from scratch using vanilla JavaScript leveraging the power of mouse events. Tools of this kind are aesthetically pleasing, which is always a benefit for websites that ask for greater user interaction. I want to take this opportunity to thank you for reading this far.<\/p>\n\n\n\n<p><em>Uma Victor is a software developer based in Nigeria who is familiar with a variety of different web technologies and frameworks. He is also keen on finding ways to explain things as simple as possible. You can reach out to me on&nbsp;<a href=\"https:\/\/twitter.com\/umavictor_\" target=\"_blank\" rel=\"noreferrer noopener\">twitter<\/a>.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>On the desktop, draggable interactions use a mouse and a finger extension to move and pick up objects as we might be able to in real-life situations. Like other gestures, draggable interactions are aesthetically pleasing and increase user interaction, allowing users to stay connected throughout their visit to a site.<\/p>\n<p>This blog post will teach you how to implement a draggable slider with JavaScript.<\/p>\n","protected":false},"author":1,"featured_media":22889,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[],"persona":[29],"blog-programming-language":[62],"keyword-cluster":[],"class_list":["post-22739","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development"],"acf":[],"_links":{"self":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/22739","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/comments?post=22739"}],"version-history":[{"count":122,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/22739\/revisions"}],"predecessor-version":[{"id":32637,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/22739\/revisions\/32637"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media\/22889"}],"wp:attachment":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media?parent=22739"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/categories?post=22739"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/tags?post=22739"},{"taxonomy":"persona","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/persona?post=22739"},{"taxonomy":"blog-programming-language","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/blog-programming-language?post=22739"},{"taxonomy":"keyword-cluster","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/keyword-cluster?post=22739"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}