{"id":18427,"date":"2013-10-23T21:01:13","date_gmt":"2013-10-23T13:01:13","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=18427"},"modified":"2025-04-04T01:38:00","modified_gmt":"2025-04-03T17:38:00","slug":"jquery-swipe-slider","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/jquery-swipe-slider\/","title":{"rendered":"Create a Swipe-Enabled Slider with jQuery (Step-by-Step Guide)"},"content":{"rendered":"<p><a href=\"https:\/\/www.hongkiat.com\/blog\/jquery-image-galleries-sliders-best-of\/\">Image\/Content Slider<\/a> is one of the common components we find in a website. It is quite simple to create one with jQuery. In fact; we have discussed it once <a href=\"https:\/\/www.hongkiat.com\/blog\/image-slider-photoshop-jquery-nivo-slider\/\">in our previous tutorial<\/a>. Today though, with the increasing number of people who are using <a href=\"https:\/\/www.hongkiat.com\/blog\/detect-touch-device-modernizr\/\">touch-enabled devices<\/a>, we may have to rethink how we build it.<\/p>\n<p>Commonly, a slider is equipped with <strong>Next<\/strong> and <strong>Prev<\/strong> buttons to navigate the content, which works fine in a desktop computer. But, in touch devices, it would be better if the users were also able to slide-navigate with finger swipes. In today\u2019s tutorial, we will show you how to build this using jQuery and SwipeJS.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/smart-header-footers-jquery\/\" class=\"ref-block__link\" title=\"Read More: How to Create Auto-Hiding Headers and Footers with jQuery\" rel=\"bookmark\"><span class=\"screen-reader-text\">How to Create Auto-Hiding Headers and Footers with jQuery<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/smart-header-footers-jquery.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-17417 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/smart-header-footers-jquery.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">How to Create Auto-Hiding Headers and Footers with jQuery<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tUsing a sticky header navigation on your website offers several benefits, including easy navigation to key links and...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>Requirements<\/h2>\n<p>Let\u2019s first get our ingredients and tools ready for the slider. We will need a style sheet and an HTML document, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/jquery.com\/\">jQuery<\/a>, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/swipejs.com\/\">SwipeJS<\/a>, and a few images \u2013 in this tutorial, I\u2019ll be using the fantastic photographs from <a href=\"https:\/\/www.hongkiat.com\/blog\/geometrical-urban-photography\/\">Jared Lim<\/a>.<\/p>\n<h2>Basic Setup<\/h2>\n<p>SwipeJS is very easy to set up. The following is the HTML markup. We need a <code>div<\/code> with an <code>id<\/code>, and one more <code>div<\/code> to wrap the list of the slides; each slide is also wrapped with a <code>div<\/code> and you can add anything in the slide, not just images.<\/p>\n<pre><div id=\"slider\" class=\"swipe\">\r\n  <div class=\"swipe-wrap\">\r\n    <div><img loading=\"lazy\" decoding=\"async\" src=\"img\/cellumination.jpg\" width=\"600\" height=\"350\"><\/div>\r\n    <div><img loading=\"lazy\" decoding=\"async\" src=\"img\/color-zone.jpg\" width=\"600\" height=\"350\"><\/div>\r\n    <div><img loading=\"lazy\" decoding=\"async\" src=\"img\/diagonal-path.jpg\" width=\"600\" height=\"350\"><\/div>\r\n    <div><img loading=\"lazy\" decoding=\"async\" src=\"img\/fractal-reflection.jpg\" width=\"600\" height=\"350\"><\/div>\r\n    <div><img loading=\"lazy\" decoding=\"async\" src=\"img\/origami.jpg\" width=\"600\" height=\"350\"><\/div>\r\n  <\/div>\r\n<\/div><\/pre>\n<p>SwipeJS needs a few lines of basic style rules. These style rules define the slider width, and display the slide inline.<\/p>\n<pre>\r\n.swipe {\r\n  overflow: hidden;\r\n  position: relative;\r\n  max-width: 600px;\r\n  width: 100%;\r\n  height: 350px;\r\n  margin: 100px auto 0;\r\n}\r\n\r\n.swipe-wrap {\r\n  overflow: hidden;\r\n  position: relative;\r\n}\r\n\r\n.swipe-wrap > div {\r\n  float: left;\r\n  width: 100%;\r\n  position: relative;\r\n}\r\n<\/pre>\n<p>Here is the JavaScript part that puts the slider into live. To make the script run properly, we need to ensure the whole document is loaded first. We can do so either by adding the script at the very bottom of the page, or using jQuery <code>.ready()<\/code> method, like so.<\/p>\n<pre>\r\n$(document).ready(function() {\r\n    \/\/ Your code goes here\r\n});\r\n <\/pre>\n<p>Using jQuery, we can add Swipe function like so.<\/p>\n<pre>\r\nSlider = $('#slider').Swipe().data('Swipe');\r\n <\/pre>\n<p>This is the basic setup, which will run the slider with the default configuration. SwipeJS accepts some parameters to change the default configuration. These parameters have to be set within the <code>.Swipe()<\/code>, for example:<\/p>\n<pre>\r\nSlider = $('#slider').Swipe({\r\n  auto: 3000,\r\n  continuous: false\r\n}).data('Swipe');\r\n<\/pre>\n<h2>Utilizing the APIs<\/h2>\n<p>Furthermore, we can control our slider behavior with the provided APIs. In this example, using the <code>.next()<\/code> and <code>.prev()<\/code> method in SwipeJS, we can navigate.<\/p>\n<p>First, let\u2019s add the button, like so:<\/p>\n<pre>&lt;span class=\"nav prev\"&gt;Prev&lt;\/span&gt;&lt;span class=\"nav next\"&gt;Next&lt;\/span&gt;<\/pre>\n<p>Then coupled with the jQuery <code>click<\/code> event, we can do the following, so that when the users click on the button it will show the next slide or the previous one, as assigned.<\/p>\n<pre>$('.next').on('click', Slider.next);$('.prev').on('click', Slider.prev);<\/pre>\n<p>Now, you can see the slider in action in the demo page, and it is better to try this out in a touchscreen device.<\/p>\n<ul class=\"download download-2c\">\n<li> <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/hongkiat.github.io\/jquery-swipejs\/\">View Demo<\/a> <\/li>\n<li> <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/hongkiat\/jquery-swipejs\/\">Download Source<\/a> <\/li>\n<\/ul>\n<h2>References<\/h2>\n<ul>\n<li> <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/thebird\/Swipe\">SwipeJS Repository in Github<\/a>.<\/li>\n<li> <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/api.jquery.com\/click\/\">jQuery Click Event<\/a>.<\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>Image\/Content Slider is one of the common components we find in a website. It is quite simple to create one with jQuery. In fact; we have discussed it once in our previous tutorial. Today though, with the increasing number of people who are using touch-enabled devices, we may have to rethink how we build it.&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392,352],"tags":[4642,911],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Create a Swipe-Enabled Slider with jQuery (Step-by-Step Guide) - Hongkiat<\/title>\n<meta name=\"description\" content=\"Image\/Content Slider is one of the common components we find in a website. It is quite simple to create one with jQuery. In fact; we have discussed it\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/jquery-swipe-slider\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create a Swipe-Enabled Slider with jQuery (Step-by-Step Guide)\" \/>\n<meta property=\"og:description\" content=\"Image\/Content Slider is one of the common components we find in a website. It is quite simple to create one with jQuery. In fact; we have discussed it\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/jquery-swipe-slider\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2013-10-23T13:01:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:38:00+00:00\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-swipe-slider\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-swipe-slider\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Create a Swipe-Enabled Slider with jQuery (Step-by-Step Guide)\",\"datePublished\":\"2013-10-23T13:01:13+00:00\",\"dateModified\":\"2025-04-03T17:38:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-swipe-slider\\\/\"},\"wordCount\":426,\"commentCount\":24,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"keywords\":[\"Gallery and Slideshow\",\"jQuery\"],\"articleSection\":[\"Coding\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-swipe-slider\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-swipe-slider\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-swipe-slider\\\/\",\"name\":\"Create a Swipe-Enabled Slider with jQuery (Step-by-Step Guide) - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"datePublished\":\"2013-10-23T13:01:13+00:00\",\"dateModified\":\"2025-04-03T17:38:00+00:00\",\"description\":\"Image\\\/Content Slider is one of the common components we find in a website. It is quite simple to create one with jQuery. In fact; we have discussed it\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-swipe-slider\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-swipe-slider\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-swipe-slider\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create a Swipe-Enabled Slider with jQuery (Step-by-Step Guide)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Create a Swipe-Enabled Slider with jQuery (Step-by-Step Guide) - Hongkiat","description":"Image\/Content Slider is one of the common components we find in a website. It is quite simple to create one with jQuery. In fact; we have discussed it","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/jquery-swipe-slider\/","og_locale":"en_US","og_type":"article","og_title":"Create a Swipe-Enabled Slider with jQuery (Step-by-Step Guide)","og_description":"Image\/Content Slider is one of the common components we find in a website. It is quite simple to create one with jQuery. In fact; we have discussed it","og_url":"https:\/\/www.hongkiat.com\/blog\/jquery-swipe-slider\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2013-10-23T13:01:13+00:00","article_modified_time":"2025-04-03T17:38:00+00:00","author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/jquery-swipe-slider\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-swipe-slider\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Create a Swipe-Enabled Slider with jQuery (Step-by-Step Guide)","datePublished":"2013-10-23T13:01:13+00:00","dateModified":"2025-04-03T17:38:00+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-swipe-slider\/"},"wordCount":426,"commentCount":24,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"keywords":["Gallery and Slideshow","jQuery"],"articleSection":["Coding","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/jquery-swipe-slider\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/jquery-swipe-slider\/","url":"https:\/\/www.hongkiat.com\/blog\/jquery-swipe-slider\/","name":"Create a Swipe-Enabled Slider with jQuery (Step-by-Step Guide) - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"datePublished":"2013-10-23T13:01:13+00:00","dateModified":"2025-04-03T17:38:00+00:00","description":"Image\/Content Slider is one of the common components we find in a website. It is quite simple to create one with jQuery. In fact; we have discussed it","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-swipe-slider\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/jquery-swipe-slider\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/jquery-swipe-slider\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Create a Swipe-Enabled Slider with jQuery (Step-by-Step Guide)"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-4Nd","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=18427"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18427\/revisions"}],"predecessor-version":[{"id":73631,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18427\/revisions\/73631"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=18427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=18427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=18427"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=18427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}