{"id":8522,"date":"2024-01-14T17:51:00","date_gmt":"2024-01-14T17:51:00","guid":{"rendered":"https:\/\/codehim.com\/?p=8522"},"modified":"2024-01-22T15:53:54","modified_gmt":"2024-01-22T10:53:54","slug":"vertical-image-slider-in-javascript","status":"publish","type":"post","link":"https:\/\/codehim.com\/carousel\/vertical-image-slider-in-javascript\/","title":{"rendered":"Vertical Image Slider in JavaScript"},"content":{"rendered":"

This JavaScript code creates a vertical image slider on a web page. It allows you to display multiple images with corresponding content in a stylish, sliding manner. The core functionality is to move between these images and their associated text by clicking the up and down buttons.<\/p>\n

This slider enhances user engagement and is helpful for showcasing content or products in an interactive way on your website.<\/p>\n

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

1. First of all, load the Font Awesome CSS<\/a> (for icons) by adding the following CDN link to the head tag of your website.<\/p>\n

<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/5.15.1\/css\/all.min.css\" \/>\r\n<\/pre>\n
2. Copy the following HTML structure and paste it where you want to display the slider. This structure includes the slider container, left and right slide sections, and action buttons. Replace the sample images and content with your own. Each <div><\/code> element within the .left-slide<\/code> section represents a slide. Customize the background images, headings (h1), and text (p) to match your content.<\/p>\n
<div class=\"slider-container\">\r\n      <div class=\"left-slide\">\r\n        <div style=\"background-color: #fde\">\r\n          <h1>Pink Cherrish<\/h1>\r\n          <p>to evolve into care<\/p>\r\n        <\/div>\r\n        <div style=\"background-color: rgb(254,160,0)\">\r\n          <h1>Yellow Luck<\/h1>\r\n          <p>Shinning the clouds<\/p>\r\n        <\/div>\r\n        <div style=\"background-color: rgb(231, 58, 95)\">\r\n          <h1>Redness Lust<\/h1>\r\n          <p>in the wilderness<\/p>\r\n        <\/div>\r\n        <div style=\"background-color: rgb(176, 136, 240)\">\r\n          <h1>Lavanda Love<\/h1>\r\n          <p>in the sunset<\/p>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"right-slide\">\r\n        <div style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1528756514091-dee5ecaa3278?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8Zmxvd2Vyc3xlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1296&q=60');\"><\/div>\r\n        <div style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1519378058457-4c29a0a2efac?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mnx8Zmxvd2Vyc3xlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1296&q=60');\"><\/div>\r\n        <div style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1490750967868-88aa4486c946?ixid=MXwxMjA3fDB8MHxzZWFyY2h8M3x8Zmxvd2Vyc3xlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1296&q=60');\"><\/div>\r\n        <div style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1462275646964-a0e3386b89fa?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=80');\"><\/div>\r\n      <\/div>\r\n      <div class=\"action-buttons\">\r\n        <button class=\"down-button\">\r\n          <i class=\"fas fa-arrow-down\"><\/i>\r\n        <\/button>\r\n        <button class=\"up-button\">\r\n          <i class=\"fas fa-arrow-up\"><\/i>\r\n        <\/button>\r\n      <\/div>\r\n    <\/div><\/pre>\n
3. The code relies on CSS styles for layout and appearance. Make sure to include the following CSS code by adding it to the <style><\/code> tag in your website’s HTML file or by linking to an external CSS file.<\/p>\n
@import url('https:\/\/fonts.googleapis.com\/css2?family=Lato&display=swap');\r\n\r\n* {\r\n  box-sizing: border-box;\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\nbody {\r\n  font-family: 'Lato', sans-serif;\r\n  height: 100vh;\r\n}\r\n\r\n.slider-container {\r\n  position: relative;\r\n  overflow: hidden;\r\n  width: 100vw;\r\n  height: 100vh;\r\n}\r\n\r\n.left-slide {\r\n  height: 100%;\r\n  width: 35%;\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  transition: transform 0.5s ease-in-out;\r\n}\r\n\r\n.left-slide > div {\r\n  height: 100%;\r\n  width: 100%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  color: #fff;\r\n}\r\n\r\n.left-slide h1 {\r\n  font-size: 40px;\r\n  margin-bottom: 10px;\r\n  margin-top: -30px;\r\n}\r\n\r\n.right-slide {\r\n  height: 100%;\r\n  position: absolute;\r\n  top: 0;\r\n  left: 35%;\r\n  width: 65%;\r\n  transition: transform 0.5s ease-in-out;\r\n}\r\n\r\n.right-slide > div {\r\n  background-repeat: no-repeat;\r\n  background-size: cover;\r\n  background-position: center center;\r\n  height: 100%;\r\n  width: 100%;\r\n}\r\n\r\nbutton {\r\n  background-color: #fff;\r\n  border: none;\r\n  color: #aaa;\r\n  cursor: pointer;\r\n  font-size: 16px;\r\n  padding: 15px;\r\n}\r\n\r\nbutton:hover {\r\n  color: #222;\r\n}\r\n\r\nbutton:focus {\r\n  outline: none;\r\n}\r\n\r\n.slider-container .action-buttons button {\r\n  position: absolute;\r\n  left: 35%;\r\n  top: 50%;\r\n  z-index: 100;\r\n}\r\n\r\n.slider-container .action-buttons .down-button {\r\n  transform: translateX(-100%);\r\n  border-top-left-radius: 5px;\r\n  border-bottom-left-radius: 5px;\r\n}\r\n\r\n.slider-container .action-buttons .up-button {\r\n  transform: translateY(-100%);\r\n  border-top-right-radius: 5px;\r\n  border-bottom-right-radius: 5px;\r\n}<\/pre>\n
4. Copy and paste the following JavaScript code just before closing the <body> element. This JavaScript code enables the slider’s functionality.<\/p>\n
const sliderContainer = document.querySelector('.slider-container')\r\nconst slideRight = document.querySelector('.right-slide')\r\nconst slideLeft = document.querySelector('.left-slide')\r\nconst upButton = document.querySelector('.up-button')\r\nconst downButton = document.querySelector('.down-button')\r\nconst slidesLength = slideRight.querySelectorAll('div').length\r\n\r\nlet activeSlideIndex = 0\r\n\r\nslideLeft.style.top = `-${(slidesLength - 1) * 100}vh`\r\n\r\nupButton.addEventListener('click', () => changeSlide('up'))\r\ndownButton.addEventListener('click', () => changeSlide('down'))\r\n\r\nconst changeSlide = (direction) => {\r\n    const sliderHeight = sliderContainer.clientHeight\r\n    if(direction === 'up') {\r\n        activeSlideIndex++\r\n        if(activeSlideIndex > slidesLength - 1) {\r\n            activeSlideIndex = 0\r\n        }\r\n    } else if(direction === 'down') {\r\n        activeSlideIndex--\r\n        if(activeSlideIndex < 0) {\r\n            activeSlideIndex = slidesLength - 1\r\n        }\r\n    }\r\n\r\n    slideRight.style.transform = `translateY(-${activeSlideIndex * sliderHeight}px)`\r\n    slideLeft.style.transform = `translateY(${activeSlideIndex * sliderHeight}px)`\r\n}<\/pre>\n
That’s it! You’ve successfully implemented a Vertical Image Slider on your website. By following this user guide and customizing the code to your needs, you can create an engaging and interactive slider to showcase your content effectively. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"
This JavaScript code creates a vertical image slider on a web page. It allows you to display multiple images with…<\/p>\n","protected":false},"author":1,"featured_media":8532,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[59],"tags":[],"class_list":["post-8522","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-carousel"],"acf":[],"yoast_head":"\nVertical Image Slider in JavaScript — CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a Vertical Image Slider in JavaScript. 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\/vertical-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=\"Vertical Image Slider in JavaScript — CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a Vertical Image Slider in JavaScript. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/carousel\/vertical-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-14T17:51:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T10:53:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/Vertical-Image-Slider-in-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=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/carousel\/vertical-image-slider-in-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/carousel\/vertical-image-slider-in-javascript\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Vertical Image Slider in JavaScript\",\"datePublished\":\"2024-01-14T17:51:00+00:00\",\"dateModified\":\"2024-01-22T10:53:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/carousel\/vertical-image-slider-in-javascript\/\"},\"wordCount\":274,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/carousel\/vertical-image-slider-in-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/Vertical-Image-Slider-in-JavaScript.png\",\"articleSection\":[\"Carousel\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/carousel\/vertical-image-slider-in-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/carousel\/vertical-image-slider-in-javascript\/\",\"url\":\"https:\/\/codehim.com\/carousel\/vertical-image-slider-in-javascript\/\",\"name\":\"Vertical Image Slider in JavaScript — CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/carousel\/vertical-image-slider-in-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/carousel\/vertical-image-slider-in-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/Vertical-Image-Slider-in-JavaScript.png\",\"datePublished\":\"2024-01-14T17:51:00+00:00\",\"dateModified\":\"2024-01-22T10:53:54+00:00\",\"description\":\"Here is a free code snippet to create a Vertical Image Slider in JavaScript. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/carousel\/vertical-image-slider-in-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/carousel\/vertical-image-slider-in-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/carousel\/vertical-image-slider-in-javascript\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/Vertical-Image-Slider-in-JavaScript.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/Vertical-Image-Slider-in-JavaScript.png\",\"width\":1280,\"height\":960,\"caption\":\"Vertical Image Slider in JavaScript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/carousel\/vertical-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\":\"Vertical 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":"Vertical Image Slider in JavaScript — CodeHim","description":"Here is a free code snippet to create a Vertical Image Slider in JavaScript. 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\/vertical-image-slider-in-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Vertical Image Slider in JavaScript — CodeHim","og_description":"Here is a free code snippet to create a Vertical Image Slider in JavaScript. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/carousel\/vertical-image-slider-in-javascript\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-14T17:51:00+00:00","article_modified_time":"2024-01-22T10:53:54+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/Vertical-Image-Slider-in-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":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/carousel\/vertical-image-slider-in-javascript\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/carousel\/vertical-image-slider-in-javascript\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Vertical Image Slider in JavaScript","datePublished":"2024-01-14T17:51:00+00:00","dateModified":"2024-01-22T10:53:54+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/carousel\/vertical-image-slider-in-javascript\/"},"wordCount":274,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/carousel\/vertical-image-slider-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/Vertical-Image-Slider-in-JavaScript.png","articleSection":["Carousel"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/carousel\/vertical-image-slider-in-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/carousel\/vertical-image-slider-in-javascript\/","url":"https:\/\/codehim.com\/carousel\/vertical-image-slider-in-javascript\/","name":"Vertical Image Slider in JavaScript — CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/carousel\/vertical-image-slider-in-javascript\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/carousel\/vertical-image-slider-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/Vertical-Image-Slider-in-JavaScript.png","datePublished":"2024-01-14T17:51:00+00:00","dateModified":"2024-01-22T10:53:54+00:00","description":"Here is a free code snippet to create a Vertical Image Slider in JavaScript. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/carousel\/vertical-image-slider-in-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/carousel\/vertical-image-slider-in-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/carousel\/vertical-image-slider-in-javascript\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/Vertical-Image-Slider-in-JavaScript.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/Vertical-Image-Slider-in-JavaScript.png","width":1280,"height":960,"caption":"Vertical Image Slider in JavaScript"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/carousel\/vertical-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":"Vertical 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":2808,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/8522","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=8522"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/8522\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/8532"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=8522"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=8522"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=8522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}