{"id":9522,"date":"2024-01-09T18:03:00","date_gmt":"2024-01-09T18:03:00","guid":{"rendered":"https:\/\/codehim.com\/?p=9522"},"modified":"2024-01-22T16:05:09","modified_gmt":"2024-01-22T11:05:09","slug":"slideshow-javascript-with-buttons","status":"publish","type":"post","link":"https:\/\/codehim.com\/gallery\/slideshow-javascript-with-buttons\/","title":{"rendered":"Slideshow JavaScript with Buttons"},"content":{"rendered":"

This code creates a JavaScript-powered image slideshow with left and right navigation buttons. It allows you to showcase a series of images with thumbnails and interactive controls. The code works by controlling the visibility of images and their corresponding thumbnails. It’s helpful for creating engaging image galleries or sliders on your web page, enhancing user experience and visual content presentation.<\/p>\n

You can use this code on your website to enhance user engagement and showcase image galleries<\/a> or sliders. It adds interactivity to your site, allowing visitors to navigate through images easily.<\/p>\n

How to Create Slideshow with Buttons in JavaScript<\/h2>\n

1. First, create an HTML structure for your slideshow. Use the following HTML code as a template. Make sure to replace image URLs with your own.<\/p>\n

<div class=\"slide-content\">\r\n        <div class=\"mySlides\">\r\n            <img src=\"https:\/\/www.naturespicsonline.com\/system\/carousel_image\/file\/199\/8.jpg\" style=\"width:100%\">\r\n        <\/div>\r\n        <div class=\"mySlides\">\r\n            <img src=\"https:\/\/www.naturespicsonline.com\/system\/carousel_image\/file\/202\/50.jpg\" style=\"width:100%\">\r\n        <\/div>\r\n        <div class=\"mySlides\">\r\n            <img src=\"https:\/\/www.naturespicsonline.com\/system\/carousel_image\/file\/206\/69.jpg\" style=\"width:100%\">\r\n        <\/div>\r\n        <div class=\"mySlides\">\r\n            <img src=\"https:\/\/www.naturespicsonline.com\/system\/carousel_image\/file\/205\/71.jpg\" style=\"width:100%\">\r\n        <\/div>\r\n        <a class=\"arrow arrow-left\" id=\"arrow-left\"><\/a>\r\n        <a class=\"arrow arrow-right\" id=\"arrow-right\"><\/a>\r\n        <div class=\"thumbnail\">\r\n            <div class=\"column\">\r\n                <img class=\"demo cursor\" src=\"https:\/\/www.naturespicsonline.com\/system\/carousel_image\/file\/199\/8.jpg\" style=\"width:100%\"data-slide=\"0\" alt=\"The Woods\">\r\n            <\/div>\r\n            <div class=\"column\">\r\n                <img class=\"demo cursor\" src=\"https:\/\/www.naturespicsonline.com\/system\/carousel_image\/file\/202\/50.jpg\" style=\"width:100%\" data-slide=\"1\"   alt=\"Trolltunga, Norway\">\r\n            <\/div>\r\n            <div class=\"column\">\r\n                <img class=\"demo cursor\" src=\"https:\/\/www.naturespicsonline.com\/system\/carousel_image\/file\/206\/69.jpg\" style=\"width:100%\"   data-slide=\"2\" alt=\"Mountains and fjords\">\r\n            <\/div>\r\n            <div class=\"column\">\r\n                <img class=\"demo cursor\" src=\"https:\/\/www.naturespicsonline.com\/system\/carousel_image\/file\/205\/71.jpg\" style=\"width:100%\"  data-slide=\"3\" alt=\"Mountains and fjords\">\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/pre>\n
2. The following CSS code ensures the proper styling and layout of the slideshow. You can customize it to match your website’s design.<\/p>\n
* {\r\n  \t\tbox-sizing: border-box;\r\n  \t\tmargin:0;\r\n  \t\tpadding:0;\r\n\t\t}\r\n\r\n\t\timg {\r\n\t\t  vertical-align: middle;\r\n\t\t      width: 100%;\r\n                     height: auto;\r\n\t\t}\r\n    .mySlides {\r\n        width: 100%;\r\n        display:none;\r\n         min-height:300px;\r\n         height:90vh;\r\n    }\r\n\t.slide-content {\r\n\t\t position: relative;\r\n  margin: 0;\r\n   padding: 0;\r\n   font-family: Arial, Helvetica, sans-serif;\r\n   width: 100%;\r\n  \r\n   height:100vh;\r\n\t}\r\n    .arrow {\r\n        cursor: pointer;\r\n        position: absolute;\r\n        top: 50%;\r\n        margin-top: -35px;\r\n        width: 0;\r\n        height: 0;\r\n        border-style: solid;\r\n    }\r\n\r\n    .arrow-left {\r\n        border-width: 30px 40px 30px 0;\r\n        border-color: transparent #fff transparent transparent;\r\n        left: 0;\r\n        margin-left: 30px;\r\n    }\r\n\r\n    .arrow-right {\r\n        border-width: 30px 0 30px 40px;\r\n        border-color: transparent transparent transparent #fff;\r\n        right: 0;\r\n        margin-right: 30px;\r\n    }\r\n\r\n    .thumbnail {\r\n        display: flex;\r\n    }\r\n\r\n    .column {\r\n        flex: 1;\r\n    }\r\n\r\n    .column img {\r\n        width: 100%;\r\n        height: 100%;\r\n    }\r\n\r\n    .demo {\r\n        opacity: 0.6;\r\n    }\r\n\r\n    .demo:hover,\r\n    .active {\r\n        opacity: 1;\r\n    }<\/pre>\n
3. Finally, add the following JavaScript code to your project. It controls the slideshow’s functionality. It’s responsible for image transitions and button interactions. Ensure you keep this code intact, and you can customize it as needed.<\/p>\n
var strIndex = 0;\r\n    var slides = document.querySelectorAll(\".mySlides\");\r\n    var demo = document.querySelectorAll(\".demo\");\r\n\r\n    var leftarr = document.getElementById(\"arrow-left\");\r\n    var rightarr = document.getElementById(\"arrow-right\");\r\n    leftarr.addEventListener(\"click\", function() {\r\n        arrSlides(-1);\r\n    });\r\n\r\n\r\ndemo.forEach(function (element){\r\n  element.addEventListener(\"click\", function(){\r\n    var note = element.getAttribute('data-slide');\r\n        currentSlide(parseInt(note));\r\n  });\r\n});\r\n\r\n  \r\n\r\n    rightarr.addEventListener(\"click\", function() { arrSlides(1) });\r\n\r\n    function reset() {\r\n        for (let i = 0; i < slides.length; i++) {\r\n            slides[i].style.display = \"none\";\r\n        }\r\n        for (i = 0; i < demo.length; i++) {\r\n            demo[i].className = demo[i].className.replace(\" active\", \"\");\r\n        }\r\n    }\r\n\r\n    function arrSlides(n) {\r\n        slideShow(strIndex += n);\r\n    }\r\n\r\n    function currentSlide(n) {\r\n        slideShow(strIndex = n);\r\n    }\r\n\r\n    function slideShow(n) {\r\n        reset();\r\n        var lengt = slides.length - 1;\r\n        if (n < 0) { strIndex = lengt }\r\n        if (n > lengt ) { strIndex = 0 }\r\n        slides[strIndex].style.display = \"block\";\r\n        demo[strIndex].classList += \" active\";\r\n    }\r\n\r\nslideShow();<\/pre>\n
That’s all! hopefully, you have successfully created a slideshow in JavaScript with buttons. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"
This code creates a JavaScript-powered image slideshow with left and right navigation buttons. It allows you to showcase a series…<\/p>\n","protected":false},"author":1,"featured_media":9539,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[51],"tags":[79,66],"class_list":["post-9522","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gallery","tag-slider","tag-slideshow"],"acf":[],"yoast_head":"\nSlideshow JavaScript with Buttons — CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a Slideshow JavaScript with Buttons. 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\/gallery\/slideshow-javascript-with-buttons\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Slideshow JavaScript with Buttons — CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a Slideshow JavaScript with Buttons. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/gallery\/slideshow-javascript-with-buttons\/\" \/>\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-09T18:03:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T11:05:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Slideshow-JavaScript-with-Buttons.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=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/gallery\/slideshow-javascript-with-buttons\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/gallery\/slideshow-javascript-with-buttons\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Slideshow JavaScript with Buttons\",\"datePublished\":\"2024-01-09T18:03:00+00:00\",\"dateModified\":\"2024-01-22T11:05:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/gallery\/slideshow-javascript-with-buttons\/\"},\"wordCount\":215,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/gallery\/slideshow-javascript-with-buttons\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Slideshow-JavaScript-with-Buttons.png\",\"keywords\":[\"Image Sliders\",\"Slideshow\"],\"articleSection\":[\"Gallery\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/gallery\/slideshow-javascript-with-buttons\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/gallery\/slideshow-javascript-with-buttons\/\",\"url\":\"https:\/\/codehim.com\/gallery\/slideshow-javascript-with-buttons\/\",\"name\":\"Slideshow JavaScript with Buttons — CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/gallery\/slideshow-javascript-with-buttons\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/gallery\/slideshow-javascript-with-buttons\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Slideshow-JavaScript-with-Buttons.png\",\"datePublished\":\"2024-01-09T18:03:00+00:00\",\"dateModified\":\"2024-01-22T11:05:09+00:00\",\"description\":\"Here is a free code snippet to create a Slideshow JavaScript with Buttons. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/gallery\/slideshow-javascript-with-buttons\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/gallery\/slideshow-javascript-with-buttons\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/gallery\/slideshow-javascript-with-buttons\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Slideshow-JavaScript-with-Buttons.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Slideshow-JavaScript-with-Buttons.png\",\"width\":1280,\"height\":960,\"caption\":\"Slideshow JavaScript with Buttons\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/gallery\/slideshow-javascript-with-buttons\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Gallery\",\"item\":\"https:\/\/codehim.com\/category\/gallery\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Slideshow JavaScript with Buttons\"}]},{\"@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":"Slideshow JavaScript with Buttons — CodeHim","description":"Here is a free code snippet to create a Slideshow JavaScript with Buttons. 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\/gallery\/slideshow-javascript-with-buttons\/","og_locale":"en_US","og_type":"article","og_title":"Slideshow JavaScript with Buttons — CodeHim","og_description":"Here is a free code snippet to create a Slideshow JavaScript with Buttons. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/gallery\/slideshow-javascript-with-buttons\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-09T18:03:00+00:00","article_modified_time":"2024-01-22T11:05:09+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Slideshow-JavaScript-with-Buttons.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":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/gallery\/slideshow-javascript-with-buttons\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/gallery\/slideshow-javascript-with-buttons\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Slideshow JavaScript with Buttons","datePublished":"2024-01-09T18:03:00+00:00","dateModified":"2024-01-22T11:05:09+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/gallery\/slideshow-javascript-with-buttons\/"},"wordCount":215,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/gallery\/slideshow-javascript-with-buttons\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Slideshow-JavaScript-with-Buttons.png","keywords":["Image Sliders","Slideshow"],"articleSection":["Gallery"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/gallery\/slideshow-javascript-with-buttons\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/gallery\/slideshow-javascript-with-buttons\/","url":"https:\/\/codehim.com\/gallery\/slideshow-javascript-with-buttons\/","name":"Slideshow JavaScript with Buttons — CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/gallery\/slideshow-javascript-with-buttons\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/gallery\/slideshow-javascript-with-buttons\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Slideshow-JavaScript-with-Buttons.png","datePublished":"2024-01-09T18:03:00+00:00","dateModified":"2024-01-22T11:05:09+00:00","description":"Here is a free code snippet to create a Slideshow JavaScript with Buttons. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/gallery\/slideshow-javascript-with-buttons\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/gallery\/slideshow-javascript-with-buttons\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/gallery\/slideshow-javascript-with-buttons\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Slideshow-JavaScript-with-Buttons.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Slideshow-JavaScript-with-Buttons.png","width":1280,"height":960,"caption":"Slideshow JavaScript with Buttons"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/gallery\/slideshow-javascript-with-buttons\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Gallery","item":"https:\/\/codehim.com\/category\/gallery\/"},{"@type":"ListItem","position":3,"name":"Slideshow JavaScript with Buttons"}]},{"@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":1845,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/9522","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=9522"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/9522\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/9539"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=9522"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=9522"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=9522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}