{"id":7208,"date":"2024-01-10T17:47:00","date_gmt":"2024-01-10T17:47:00","guid":{"rendered":"https:\/\/codehim.com\/?p=7208"},"modified":"2024-01-22T15:48:25","modified_gmt":"2024-01-22T10:48:25","slug":"flex-box-image-slider-using-javascript","status":"publish","type":"post","link":"https:\/\/codehim.com\/carousel\/flex-box-image-slider-using-javascript\/","title":{"rendered":"Flex Box Image Slider using JavaScript"},"content":{"rendered":"<p>This JavaScript code snippet helps you to create a flex box image slider. It comes with arrow buttons to navigate the next and previous slide with fading animation.<\/p>\n<p>You just need to place your images inside the slider, then this code snippet automatically renders a flexbox image carousel. You can customize the slider container according to your needs with additional CSS.<\/p>\n<h2>How to Create Flex Box Image Slider using JavaScript<\/h2>\n<p>1. First of all, load the icons CSS into the head tag of your webpage.<\/p>\n<pre class=\"prettyprint linenums lang-html\">&lt;link rel='stylesheet' href='https:\/\/code.ionicframework.com\/ionicons\/2.0.1\/css\/ionicons.min.css'&gt;\r\n<\/pre>\n<p>2. After that, create a div element with a class name &#8220;slider&#8221; and place your images inside it. Similarly, create nav element with a class name &#8220;slider-nav&#8221; and place the markup for the next and previous buttons as described below. Wrap all these elements into a div tag and define its class name &#8220;container&#8221;. The complete HTML structure for the flexbox image slider is as follows:<\/p>\n<pre class=\"prettyprint linenums lang-html\">&lt;div class=\"container\"&gt;\r\n  &lt;div class=\"slider\"&gt;\r\n    &lt;img class=\"active\" src=\"https:\/\/source.unsplash.com\/gKk9rpyDryU\"&gt;\r\n    &lt;img src=\"https:\/\/source.unsplash.com\/VFGEhLznjPU\"&gt;\r\n    &lt;img src=\"https:\/\/source.unsplash.com\/InR-EhiO_js\"&gt;\r\n  &lt;\/div&gt;\r\n  &lt;nav class=\"slider-nav\"&gt;\r\n    &lt;ul&gt;\r\n      &lt;li class=\"arrow\"&gt;\r\n        &lt;button class=\"previous\"&gt;\r\n          &lt;span&gt;\r\n            &lt;i class=\"ion-arrow-left-c\"&gt;&lt;\/i&gt;\r\n          &lt;\/span&gt;\r\n        &lt;\/button&gt;\r\n      &lt;\/li&gt;\r\n      &lt;li class=\"arrow\"&gt;\r\n        &lt;button class=\"next\"&gt;\r\n          &lt;span&gt;\r\n            &lt;i class=\"ion-arrow-right-c\"&gt;&lt;\/i&gt;\r\n          &lt;\/span&gt;\r\n        &lt;\/button&gt;\r\n      &lt;\/li&gt;\r\n    &lt;\/ul&gt;\r\n  &lt;\/nav&gt;\r\n&lt;\/div&gt;<\/pre>\n<p>3. After creating the HTML structure, now it&#8217;s time to style the image slider. To do so, add the following CSS styles into your project. You can set the custom size for the container and slider according to your needs. Likewise, you can also set the custom values or additional CSS to fully customize it.<\/p>\n<pre class=\"prettyprint linenums lang-css\">* {\r\n  box-sizing: border-box;\r\n}\r\n*::before, *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n  margin: 0;\r\n}\r\n\r\n.container {\r\n  max-width: 800px;\r\n  margin: 0 auto;\r\n  padding: 50px;\r\n}\r\n\r\nbutton {\r\n  position: relative;\r\n  display: inline-block;\r\n  cursor: pointer;\r\n  outline: none;\r\n  border: 0;\r\n  vertical-align: middle;\r\n  text-decoration: none;\r\n  background: transparent;\r\n  padding: 20px 5px;\r\n  color: #3c376f;\r\n  font-size: 2rem;\r\n}\r\n\r\nbutton span {\r\n  position: relative;\r\n  display: inline-block;\r\n  transform: translateX(0);\r\n  transition: transform 0.3s ease;\r\n}\r\n\r\n.previous:hover span {\r\n  transform: translateX(-10px) scale(1.2);\r\n}\r\n\r\n.next:hover span {\r\n  transform: translateX(10px) scale(1.2);\r\n}\r\n\r\n.slider-nav ul {\r\n  list-style: none;\r\n  margin: 0;\r\n  padding: 0;\r\n  display: flex;\r\n  justify-content: center;\r\n}\r\n\r\n.slider-nav li {\r\n  display: flex;\r\n  flex: 2;\r\n  text-align: center;\r\n}\r\n\r\nimg {\r\n  max-width: 100%;\r\n  display: none;\r\n  box-shadow: 10px 10px 20px 0 rgba(94, 47, 59, 0.2);\r\n}\r\n\r\nimg.active {\r\n  display: block;\r\n  -webkit-animation: fadeImg 0.8s;\r\n          animation: fadeImg 0.8s;\r\n}\r\n\r\n.slider-nav .arrow {\r\n  flex: 0 0 15%;\r\n}\r\n\r\n.slider-nav a {\r\n  flex-basis: 100%;\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.slider-nav span {\r\n  display: block;\r\n  width: 100%;\r\n}\r\n\r\n@-webkit-keyframes fadeImg {\r\n  from {\r\n    opacity: 0;\r\n  }\r\n  to {\r\n    opacity: 1;\r\n  }\r\n}\r\n\r\n@keyframes fadeImg {\r\n  from {\r\n    opacity: 0;\r\n  }\r\n  to {\r\n    opacity: 1;\r\n  }\r\n}<\/pre>\n<p>4. In the final step, add the following JavaScript function to activate the flexbox image slider.<\/p>\n<pre class=\"prettyprint linenums lang-js\">const items = document.querySelectorAll('img');\r\nconst itemCount = items.length;\r\nconst nextItem = document.querySelector('.next');\r\nconst previousItem = document.querySelector('.previous');\r\nlet count = 0;\r\n\r\nfunction showNextItem() {\r\n  items[count].classList.remove('active');\r\n\r\n  if(count &lt; itemCount - 1) {\r\n    count++;\r\n  } else {\r\n    count = 0;\r\n  }\r\n\r\n  items[count].classList.add('active');\r\n  console.log(count);\r\n}\r\n\r\nfunction showPreviousItem() {\r\n  items[count].classList.remove('active');\r\n\r\n  if(count &gt; 0) {\r\n    count--;\r\n  } else {\r\n    count = itemCount - 1;\r\n  }\r\n\r\n  items[count].classList.add('active');\r\n  console.log(count);\r\n}\r\n\r\nfunction keyPress(e) {\r\n  e = e || window.event;\r\n  \r\n  if (e.keyCode == '37') {\r\n    showPreviousItem();\r\n  } else if (e.keyCode == '39') {\r\n    showNextItem();\r\n  }\r\n}\r\n\r\nnextItem.addEventListener('click', showNextItem);\r\npreviousItem.addEventListener('click', showPreviousItem);\r\ndocument.addEventListener('keydown', keyPress);<\/pre>\n<p>That&#8217;s all! hopefully, you have successfully created flex box image slider using JavaScript. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This JavaScript code snippet helps you to create a flex box image slider. It comes with arrow buttons to navigate&#8230;<\/p>\n","protected":false},"author":1,"featured_media":7290,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[59],"tags":[],"class_list":["post-7208","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-carousel"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Flex Box Image Slider using JavaScript &#8212; CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a lightweight JavaScript code snippet to create a flex box image slider. You can view demo and download the source 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\/flex-box-image-slider-using-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Flex Box Image Slider using JavaScript &#8212; CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a lightweight JavaScript code snippet to create a flex box image slider. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/carousel\/flex-box-image-slider-using-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-10T17:47:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T10:48:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2022\/09\/flex-box-image-slider-using-javascript.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\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\/flex-box-image-slider-using-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/carousel\/flex-box-image-slider-using-javascript\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Flex Box Image Slider using JavaScript\",\"datePublished\":\"2024-01-10T17:47:00+00:00\",\"dateModified\":\"2024-01-22T10:48:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/carousel\/flex-box-image-slider-using-javascript\/\"},\"wordCount\":251,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/carousel\/flex-box-image-slider-using-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2022\/09\/flex-box-image-slider-using-javascript.png\",\"articleSection\":[\"Carousel\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/carousel\/flex-box-image-slider-using-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/carousel\/flex-box-image-slider-using-javascript\/\",\"url\":\"https:\/\/codehim.com\/carousel\/flex-box-image-slider-using-javascript\/\",\"name\":\"Flex Box Image Slider using JavaScript &#8212; CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/carousel\/flex-box-image-slider-using-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/carousel\/flex-box-image-slider-using-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2022\/09\/flex-box-image-slider-using-javascript.png\",\"datePublished\":\"2024-01-10T17:47:00+00:00\",\"dateModified\":\"2024-01-22T10:48:25+00:00\",\"description\":\"Here is a lightweight JavaScript code snippet to create a flex box image slider. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/carousel\/flex-box-image-slider-using-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/carousel\/flex-box-image-slider-using-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/carousel\/flex-box-image-slider-using-javascript\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2022\/09\/flex-box-image-slider-using-javascript.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2022\/09\/flex-box-image-slider-using-javascript.png\",\"width\":1280,\"height\":960,\"caption\":\"Flex Box Image Slider using JavaScript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/carousel\/flex-box-image-slider-using-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\":\"Flex Box Image Slider using 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":"Flex Box Image Slider using JavaScript &#8212; CodeHim","description":"Here is a lightweight JavaScript code snippet to create a flex box image slider. You can view demo and download the source 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\/flex-box-image-slider-using-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Flex Box Image Slider using JavaScript &#8212; CodeHim","og_description":"Here is a lightweight JavaScript code snippet to create a flex box image slider. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/carousel\/flex-box-image-slider-using-javascript\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-10T17:47:00+00:00","article_modified_time":"2024-01-22T10:48:25+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2022\/09\/flex-box-image-slider-using-javascript.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\/flex-box-image-slider-using-javascript\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/carousel\/flex-box-image-slider-using-javascript\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Flex Box Image Slider using JavaScript","datePublished":"2024-01-10T17:47:00+00:00","dateModified":"2024-01-22T10:48:25+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/carousel\/flex-box-image-slider-using-javascript\/"},"wordCount":251,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/carousel\/flex-box-image-slider-using-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2022\/09\/flex-box-image-slider-using-javascript.png","articleSection":["Carousel"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/carousel\/flex-box-image-slider-using-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/carousel\/flex-box-image-slider-using-javascript\/","url":"https:\/\/codehim.com\/carousel\/flex-box-image-slider-using-javascript\/","name":"Flex Box Image Slider using JavaScript &#8212; CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/carousel\/flex-box-image-slider-using-javascript\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/carousel\/flex-box-image-slider-using-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2022\/09\/flex-box-image-slider-using-javascript.png","datePublished":"2024-01-10T17:47:00+00:00","dateModified":"2024-01-22T10:48:25+00:00","description":"Here is a lightweight JavaScript code snippet to create a flex box image slider. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/carousel\/flex-box-image-slider-using-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/carousel\/flex-box-image-slider-using-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/carousel\/flex-box-image-slider-using-javascript\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2022\/09\/flex-box-image-slider-using-javascript.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2022\/09\/flex-box-image-slider-using-javascript.png","width":1280,"height":960,"caption":"Flex Box Image Slider using JavaScript"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/carousel\/flex-box-image-slider-using-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":"Flex Box Image Slider using 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":3994,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/7208","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=7208"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/7208\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/7290"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=7208"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=7208"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=7208"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}