{"id":5504,"date":"2024-01-11T16:40:00","date_gmt":"2024-01-11T16:40:00","guid":{"rendered":"https:\/\/codehim.com\/?p=5504"},"modified":"2024-01-22T14:44:55","modified_gmt":"2024-01-22T09:44:55","slug":"automatic-animated-image-slider-in-javascript","status":"publish","type":"post","link":"https:\/\/codehim.com\/carousel\/automatic-animated-image-slider-in-javascript\/","title":{"rendered":"Automatic Animated Image Slider in JavaScript"},"content":{"rendered":"

Yet another feature-rich responsive image slider to slide images with text. This JavaScript plugin helps you to create an animated automatic image slider<\/a>. It comes with multiple controls (next\/previous button, touch-swipe, and numbers navigation) to slide the images. You can integrate this slider into the hero section of the webpage to display products\/posts with animated text.<\/p>\n

This slider comes with a colorful user interface with SVG icons. Basically, it has an autoplay feature to automatically slide to the next image after a certain time period. Besides this, users can also navigate slider content through next\/prev buttons or swipe (on touch devices).<\/p>\n

You can control the sliding delay, transform value, and index value where to start the slider on load. Similarly, you can also customize its layout, size, and color by minor changes in CSS.<\/p>\n

How to Create JavaScript Automatic Image Slider<\/h2>\n

1. Download this code snippet and include the slider CSS file into the head tag of your HTML document.<\/p>\n

<!-- Animated Slider CSS -->\r\n<link rel=\"stylesheet\" href=\"css\/animated-slider.css\">\r\n<\/pre>\n
2. Create HTML structure for the automatic animated slider as follows:<\/p>\n
<div class=\"container\">\r\n   <div class=\"slider\">\r\n      <div class=\"box1 box\">\r\n         <div class=\"bg\"><\/div>\r\n         <div class=\"details\">\r\n            <h1>Your heading<\/h1>\r\n            <p>\r\n               Description goes here...\r\n            <\/p>\r\n            <button onclick=\"location.href='https:\/\/codehim.com'\">Check Now<\/button>\r\n         <\/div>\r\n         <div class=\"illustration\">\r\n            <div class=\"inner\"><\/div>\r\n         <\/div>\r\n      <\/div>\r\n      <div class=\"box2 box\">\r\n         <div class=\"bg\"><\/div>\r\n         <div class=\"details\">\r\n            <h1>You second heading<\/h1>\r\n            <p>\r\n               animated text goes here...\r\n            <\/p>\r\n            <button>Check Now<\/button>\r\n         <\/div>\r\n         <div class=\"illustration\">\r\n            <div class=\"inner\"><\/div>\r\n         <\/div>\r\n      <\/div>\r\n      <div class=\"box3 box\">\r\n         <div class=\"bg\"><\/div>\r\n         <div class=\"details\">\r\n            <h1>Your third heading<\/h1>\r\n            <p>\r\n              Your description goes here...\r\n            <\/p>\r\n            <button>Check Now<\/button>\r\n         <\/div>\r\n         <div class=\"illustration\">\r\n            <div class=\"inner\"><\/div>\r\n         <\/div>\r\n      <\/div>\r\n      <div class=\"box4 box\">\r\n         <div class=\"bg\"><\/div>\r\n         <div class=\"details\">\r\n            <h1>Your fourth heading<\/h1>\r\n            <p>\r\n             Your description goes here... \r\n            <\/p>\r\n            <button>Check Now<\/button>\r\n         <\/div>\r\n         <div class=\"illustration\">\r\n            <div class=\"inner\"><\/div>\r\n         <\/div>\r\n      <\/div>\r\n      <div class=\"box5 box\">\r\n         <div class=\"bg\"><\/div>\r\n         <div class=\"details\">\r\n            <h1>Your fifth heading<\/h1>\r\n            <p>\r\n               Your description goes here...\r\n            <\/p>\r\n            <button>Check Now<\/button>\r\n         <\/div>\r\n         <div class=\"illustration\">\r\n            <div class=\"inner\"><\/div>\r\n         <\/div>\r\n      <\/div>\r\n   <\/div>\r\n   <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"prev\" width=\"56.898\" height=\"91\" viewBox=\"0 0 56.898 91\">\r\n      <path d=\"M45.5,0,91,56.9,48.452,24.068,0,56.9Z\" transform=\"translate(0 91) rotate(-90)\" fill=\"#fff\"\/>\r\n   <\/svg>\r\n   <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"next\" width=\"56.898\" height=\"91\" viewBox=\"0 0 56.898 91\">\r\n      <path d=\"M45.5,0,91,56.9,48.452,24.068,0,56.9Z\" transform=\"translate(56.898) rotate(90)\" fill=\"#fff\"\/>\r\n   <\/svg>\r\n   <div class=\"trail\">\r\n      <div class=\"box1 active\">1<\/div>\r\n      <div class=\"box2\">2<\/div>\r\n      <div class=\"box3\">3<\/div>\r\n      <div class=\"box4\">4<\/div>\r\n      <div class=\"box5\">5<\/div>\r\n   <\/div>\r\n<\/div>\r\n<\/pre>\n
3. Load GSAP.js, CSSRulePlugin Js<\/a>, and animated slider JavaScript file before the closing of the body tag and done.<\/p>\n
 <!-- gsap js -->     \r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.3.2\/gsap.min.js\"><\/script>\r\n<!-- CSSRulePlugin JS -->\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.3.2\/CSSRulePlugin.min.js\"><\/script>\r\n<!-- Animated Slider JS -->\r\n<script src=\"js\/animated-slider.js\"><\/script>\r\n<\/pre>\n
4. In order to set the custom value for the index, transform and delay, edit the Slider JavaScript file and modify the following variables.<\/p>\n
\/\/ Transform value\r\nlet value = 0\r\n\/\/ trail index number\r\nlet trailValue = 0\r\n\/\/ interval (Duration)\r\nlet interval = 4000\r\n<\/pre>\n
That’s all! I hope you have successfully integrated this automatic image slider. If you have any questions or suggestions, let me know by comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"
Yet another feature-rich responsive image slider to slide images with text. This JavaScript plugin helps you to create an animated…<\/p>\n","protected":false},"author":1,"featured_media":5510,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[59,116],"tags":[79,66],"class_list":["post-5504","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-carousel","category-vanilla-javascript","tag-slider","tag-slideshow"],"acf":[],"yoast_head":"\nAutomatic Animated Image Slider in JavaScript — CodeHim<\/title>\n<meta name=\"description\" content=\"Here is lightweight JavaScript code snippet to create animated automatic image slider with multiple controls. You can download slider code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/carousel\/automatic-animated-image-slider-in-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Automatic Animated Image Slider in JavaScript — CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is lightweight JavaScript code snippet to create animated automatic image slider with multiple controls. You can download slider code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/carousel\/automatic-animated-image-slider-in-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-11T16:40:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T09:44:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2021\/09\/automatic-animated-image-slider-in-javascript-css.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1050\" \/>\n\t<meta property=\"og:image:height\" content=\"787\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/carousel\/automatic-animated-image-slider-in-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/carousel\/automatic-animated-image-slider-in-javascript\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Automatic Animated Image Slider in JavaScript\",\"datePublished\":\"2024-01-11T16:40:00+00:00\",\"dateModified\":\"2024-01-22T09:44:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/carousel\/automatic-animated-image-slider-in-javascript\/\"},\"wordCount\":246,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/carousel\/automatic-animated-image-slider-in-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2021\/09\/automatic-animated-image-slider-in-javascript-css.png\",\"keywords\":[\"Image Sliders\",\"Slideshow\"],\"articleSection\":[\"Carousel\",\"Vanilla JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/carousel\/automatic-animated-image-slider-in-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/carousel\/automatic-animated-image-slider-in-javascript\/\",\"url\":\"https:\/\/codehim.com\/carousel\/automatic-animated-image-slider-in-javascript\/\",\"name\":\"Automatic Animated Image Slider in JavaScript — CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/carousel\/automatic-animated-image-slider-in-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/carousel\/automatic-animated-image-slider-in-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2021\/09\/automatic-animated-image-slider-in-javascript-css.png\",\"datePublished\":\"2024-01-11T16:40:00+00:00\",\"dateModified\":\"2024-01-22T09:44:55+00:00\",\"description\":\"Here is lightweight JavaScript code snippet to create animated automatic image slider with multiple controls. You can download slider code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/carousel\/automatic-animated-image-slider-in-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/carousel\/automatic-animated-image-slider-in-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/carousel\/automatic-animated-image-slider-in-javascript\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2021\/09\/automatic-animated-image-slider-in-javascript-css.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2021\/09\/automatic-animated-image-slider-in-javascript-css.png\",\"width\":1050,\"height\":787,\"caption\":\"Automatic Animated Image Slider in JavaScript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/carousel\/automatic-animated-image-slider-in-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Carousel\",\"item\":\"https:\/\/codehim.com\/category\/carousel\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Automatic Animated Image Slider in JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Automatic Animated Image Slider in JavaScript — CodeHim","description":"Here is lightweight JavaScript code snippet to create animated automatic image slider with multiple controls. You can download slider code.","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:\/\/codehim.com\/carousel\/automatic-animated-image-slider-in-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Automatic Animated Image Slider in JavaScript — CodeHim","og_description":"Here is lightweight JavaScript code snippet to create animated automatic image slider with multiple controls. You can download slider code.","og_url":"https:\/\/codehim.com\/carousel\/automatic-animated-image-slider-in-javascript\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-11T16:40:00+00:00","article_modified_time":"2024-01-22T09:44:55+00:00","og_image":[{"width":1050,"height":787,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2021\/09\/automatic-animated-image-slider-in-javascript-css.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/carousel\/automatic-animated-image-slider-in-javascript\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/carousel\/automatic-animated-image-slider-in-javascript\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Automatic Animated Image Slider in JavaScript","datePublished":"2024-01-11T16:40:00+00:00","dateModified":"2024-01-22T09:44:55+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/carousel\/automatic-animated-image-slider-in-javascript\/"},"wordCount":246,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/carousel\/automatic-animated-image-slider-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2021\/09\/automatic-animated-image-slider-in-javascript-css.png","keywords":["Image Sliders","Slideshow"],"articleSection":["Carousel","Vanilla JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/carousel\/automatic-animated-image-slider-in-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/carousel\/automatic-animated-image-slider-in-javascript\/","url":"https:\/\/codehim.com\/carousel\/automatic-animated-image-slider-in-javascript\/","name":"Automatic Animated Image Slider in JavaScript — CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/carousel\/automatic-animated-image-slider-in-javascript\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/carousel\/automatic-animated-image-slider-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2021\/09\/automatic-animated-image-slider-in-javascript-css.png","datePublished":"2024-01-11T16:40:00+00:00","dateModified":"2024-01-22T09:44:55+00:00","description":"Here is lightweight JavaScript code snippet to create animated automatic image slider with multiple controls. You can download slider code.","breadcrumb":{"@id":"https:\/\/codehim.com\/carousel\/automatic-animated-image-slider-in-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/carousel\/automatic-animated-image-slider-in-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/carousel\/automatic-animated-image-slider-in-javascript\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2021\/09\/automatic-animated-image-slider-in-javascript-css.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2021\/09\/automatic-animated-image-slider-in-javascript-css.png","width":1050,"height":787,"caption":"Automatic Animated Image Slider in JavaScript"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/carousel\/automatic-animated-image-slider-in-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Carousel","item":"https:\/\/codehim.com\/category\/carousel\/"},{"@type":"ListItem","position":3,"name":"Automatic Animated Image Slider in JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":49682,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/5504","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=5504"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/5504\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/5510"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=5504"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=5504"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=5504"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}