{"id":1806,"date":"2023-01-19T19:48:32","date_gmt":"2023-01-19T19:48:32","guid":{"rendered":"https:\/\/foolishdeveloper.com\/?p=1806"},"modified":"2023-01-19T19:48:34","modified_gmt":"2023-01-19T19:48:34","slug":"automatic-image-slider-with-text-in-html-css","status":"publish","type":"post","link":"https:\/\/foolishdeveloper.com\/automatic-image-slider-with-text-in-html-css\/","title":{"rendered":"Automatic Image Slider with Text in HTML, CSS & JavaScript"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

An automatic image slider with text<\/b> in HTML and CSS can be created by adding HTML elements to display the text, and then using CSS and JavaScript\/jQuery to control the display of the text and the timing of the transitions.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"Automatic\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

automatic image slider with text in html css<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Earlier I have shared many more types of image slider tutorials. I have shared with you many slider designs for beginners with only html and css. You will find all the codes here which you can copy directly.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

1. HTML of automatic image slider with text<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

The basic structure of Automatic Image Slider with Text <\/b>should be created using the following html codes. The div<\/code> with the class of “slider” acts as the container for the entire slider.<\/p>

Inside the “slider” container, there are multiple div<\/code> elements with the class of “slider-content”<\/i>. Each “slider-content” element contains an img<\/code> element, which represents the image for that slide, and a div<\/code> element with the class of “slider-text”, which contains the text for that slide.<\/p>

The text for each slide is contained within an h3<\/code> heading and a p<\/code> paragraph element. The heading element displays the title of the slide and the paragraph element displays the description of the slide.<\/p>

This is the basic structure of the slider, but in order to make it functional, you will need to add the appropriate CSS and JavaScript\/jQuery code to control the display of the images and text, and the timing of the transitions.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t<div class=\"slider\">\r\n  <div class=\"slider-content\">\r\n    <img decoding=\"async\" src=\"image1.jpg\" alt=\"image1\">\r\n    <div class=\"slider-text\">\r\n      <h3>Image 1<\/h3>\r\n      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/p>\r\n    <\/div>\r\n  <\/div>\r\n  <div class=\"slider-content\">\r\n    <img decoding=\"async\" src=\"image2.jpg\" alt=\"image2\">\r\n    <div class=\"slider-text\">\r\n      <h3>Image 2<\/h3>\r\n      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/p>\r\n    <\/div>\r\n  <\/div>\r\n  <div class=\"slider-content\">\r\n    <img decoding=\"async\" src=\"image3.jpg\" alt=\"image3\">\r\n    <div class=\"slider-text\">\r\n      <h3>Image 3<\/h3>\r\n      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/p>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-9aa2da0 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"9aa2da0\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c993e1e\" data-id=\"c993e1e\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-b9e043d elementor-widget elementor-widget-heading\" data-id=\"b9e043d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">2. Design automatic image slider with CSS<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7a6be1e elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7a6be1e\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-09450d7\" data-id=\"09450d7\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e0607bb elementor-widget elementor-widget-text-editor\" data-id=\"e0607bb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Automatic Image Slider with Text should be designed by following css code.<\/p><p>The <code>.slider<\/code> class sets the container element to be a relative positioned element with a width of 100% and a height of 500px, and overflow hidden to prevent the images from overflowing out of the slider container.<\/p><p>The <code>.slider-content<\/code> class sets each slide to be an absolute positioned element that takes up the full width and height of the slider container. <code><i>object-fit: cover;<\/i><\/code> makes the image stretch to cover the entire slide and <code><i>display: none;<\/i><\/code> will hide the slides by default.<\/p><p>The <code>.slider-text<\/code> class sets the text container to be an absolute positioned element that is placed at the bottom of the slide with a width of 100%, and padding of 20px. The background color is set to be semi-transparent black and the text color is set to white.<\/p><p>The <code>.active<\/code> class sets the display property of the slide to &#8216;block&#8217;, so that it will be visible.<\/p><p>With the HTML, CSS and JavaScript\/jQuery code, you will have a functional automatic image slider with text.<\/p><p>It&#8217;s worth to note that when using JavaScript, you should toggle the class &#8220;active&#8221; instead of using <i>&#8220;display: none&#8221; <\/i>and &#8220;display: block&#8221;, as this will allow you to make a smooth transition between slides using CSS.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-fe65d23 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"fe65d23\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-15941e1\" data-id=\"15941e1\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-677f77b elementor-widget elementor-widget-code-highlight\" data-id=\"677f77b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>.slider {\r\n  position: relative;\r\n  width: 100%;\r\n  height: 500px;\r\n  overflow: hidden;\r\n}\r\n\r\n.slider-content {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n  display: none;\r\n}\r\n\r\n.slider-text {\r\n  position: absolute;\r\n  bottom: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  padding: 20px;\r\n  background-color: rgba(0, 0, 0, 0.5);\r\n  color: #fff;\r\n}\r\n\r\n.active {\r\n  display: block;\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-956643e elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"956643e\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b818853\" data-id=\"b818853\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d06f246 elementor-widget elementor-widget-heading\" data-id=\"d06f246\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">3. JavaScript code for image slider with text<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3265ae2 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3265ae2\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4ab2382\" data-id=\"4ab2382\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d0b40cc elementor-widget elementor-widget-text-editor\" data-id=\"d0b40cc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Now the automatic image slider with text in html css has to be activated by javascript.<\/p><p>1. The variable <code><i>currentIndex<\/i><\/code> is set to 0, which represents the current slide that is being displayed.<\/p><p>2. The variable <code>contents<\/code> is set to a list of all elements with the class of &#8220;slider-content&#8221;, which are the individual slides in the slider. The variable <code><i>maxIndex<\/i><\/code> is set to the number of slides minus 1, so that the index of the last slide can be determined.<\/p><p>3. The <code><i>nextImage<\/i><\/code> function is called to transition to the next slide. <code>currentIndex<\/code> is incremented by 1. If the current slide is the last slide, the index is reset to 0, so the slider will loop through the images.<\/p><p>4. The function uses the <code><i>forEach<\/i><\/code> method to iterate through all the <code>contents<\/code> and removes the class &#8216;active&#8217; from each slide, effectively hiding all the slides.<\/p><p>5. Finally, the class &#8216;active&#8217; is added to the slide at the current index, making it visible.<\/p><p>6. The <code><i>setInterval<\/i><\/code> function is called to automatically call the <code>nextImage<\/code> function every 3 seconds (3000 milliseconds), causing the images to transition automatically.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-179deb4 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"179deb4\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-8f88fac\" data-id=\"8f88fac\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-821b41f elementor-widget elementor-widget-code-highlight\" data-id=\"821b41f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>var currentIndex = 0;\r\nvar contents = document.querySelectorAll('.slider-content');\r\nvar maxIndex = contents.length - 1;\r\n\r\nfunction nextImage() {\r\n  currentIndex++;\r\n\r\n  if (currentIndex > maxIndex) {\r\n    currentIndex = 0;\r\n  }\r\n\r\n  contents.forEach(function(content) {\r\n    content.classList.remove('active');\r\n  });\r\n\r\n  contents[currentIndex].classList.add('active');\r\n}\r\n\r\nsetInterval(nextImage, 3000);\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-30da4f9 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"30da4f9\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ee4a163\" data-id=\"ee4a163\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e082167 elementor-widget elementor-widget-text-editor\" data-id=\"e082167\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>This will create an automatic <b>image slider that displays text<\/b> along with each image, and transitions to the next image and its corresponding text every 3 seconds. You can adjust the timing of the transition and the CSS to customize the appearance of the text.<\/p><p>Hopefully from this tutorial you have learned how to create <b>automatic image slider with text<\/b> in html css. In this I have shared many more types of <a href=\"https:\/\/foolishdeveloper.com\/?s=image+slider\">image slider tutorials<\/a>. If you like this design then you can follow the tutorials.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>An automatic image slider with text in HTML and CSS can be created by adding HTML elements to display the text, and then using CSS and JavaScript\/jQuery to control the display of the text and the timing of the transitions. automatic image slider with text in html css Earlier I have shared many more types [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1810,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","ocean_post_oembed":"","ocean_post_self_hosted_media":"","ocean_post_video_embed":"","ocean_link_format":"","ocean_link_format_target":"self","ocean_quote_format":"","ocean_quote_format_link":"post","ocean_gallery_link_images":"on","ocean_gallery_id":[],"footnotes":""},"categories":[19,21,1],"tags":[241],"class_list":["post-1806","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-image_slider","category-automatic_image_slider","category-uncategorized","tag-automatic-image-slider","entry","has-media"],"_links":{"self":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/1806","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/comments?post=1806"}],"version-history":[{"count":7,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/1806\/revisions"}],"predecessor-version":[{"id":1814,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/1806\/revisions\/1814"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/media\/1810"}],"wp:attachment":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/media?parent=1806"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/categories?post=1806"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/tags?post=1806"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}