{"id":259,"date":"2022-10-14T12:59:28","date_gmt":"2022-10-14T12:59:28","guid":{"rendered":"https:\/\/www.devopstrainer.in\/blog\/?p=259"},"modified":"2022-10-15T05:37:56","modified_gmt":"2022-10-15T05:37:56","slug":"how-can-we-create-vertical-and-horizontal-slides-in-revealjs","status":"publish","type":"post","link":"https:\/\/www.devopstrainer.in\/blog\/how-can-we-create-vertical-and-horizontal-slides-in-revealjs\/","title":{"rendered":"How can we create vertical and horizontal slides using revealjs?"},"content":{"rendered":"\n<p>Hello! Today, I&#8217;m going to show you Html presentations using<strong><em> revealjs.<\/em><\/strong> If you are a slide maker and an excellent learner of Html <strong><em>presentation<\/em><\/strong> through slides. so, I will make sure that in this topic you will learn awesome concepts and methods on how you can make horizontal and vertical slides using revealjs <strong><em>content<\/em><\/strong>, <strong>customization<\/strong>, <strong><em>features<\/em><\/strong>, <strong>API<\/strong>, and <strong><em>plugins<\/em><\/strong>.<\/p>\n\n\n\n<p>You can make a responsive presentation through Html coding as you make in PowerPoint presentation. Before starting, I will provide you a brief concept of Html and revealjs. Actually, it is a combination of Html and javascript. Suppose, you want to make awesome slides with different course content. The first thing is whatever slides you want to make but the second part is, In which way you want to show or express the slides whole format. If you want to show slides horizontally or vertically then this is the correct path and place for you.<\/p>\n\n\n\n<p>First, you will set up your presentation web page using revealjs. Then you will write the below code over visual studio under the body tag:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"reveal\">\n&lt;div class=\"slides\">\n&lt;section>Slide 1&lt;\/section>\n&lt;section>\n  &lt;section>Slide 2.1&lt;\/section>\n  &lt;section>Slide 2.2&lt;\/section>\n\n  &lt;section>Slide 2.3&lt;\/section>\n&lt;\/section>\n&lt;section>Slide 3&lt;\/section>\n&lt;section>Slide 4&lt;\/section>\n &lt;\/div>\n &lt;\/div><\/code><\/pre>\n\n\n\n<p>After running this code, you will get the same slides on the presentation page.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/10\/reveal.js-vertical-slides-2.gif\" alt=\"\" class=\"wp-image-266\" width=\"798\" height=\"510\"\/><figcaption><strong><em>slides presentation<\/em><\/strong><\/figcaption><\/figure>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Hello! Today, I&#8217;m going to show you Html presentations using revealjs. If you are a slide maker and an excellent learner of Html presentation through slides. so,&#8230; <\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[53,94,93,92,75],"tags":[99,96,95,98,100,97,105],"class_list":["post-259","post","type-post","status-publish","format-standard","hentry","category-coding","category-features","category-html-presentation","category-revealjs","category-visula-studio","tag-features","tag-horizontal-and-vertical-slides-using-revealjs","tag-html-presentation","tag-html-presentations-using-revealjs","tag-plugins","tag-presentation-through-slides","tag-revealjs"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How can we create vertical and horizontal slides using revealjs? - DevOps | SRE | DevSecOps<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.devopstrainer.in\/blog\/how-can-we-create-vertical-and-horizontal-slides-in-revealjs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How can we create vertical and horizontal slides using revealjs? - DevOps | SRE | DevSecOps\" \/>\n<meta property=\"og:description\" content=\"Hello! Today, I&#8217;m going to show you Html presentations using revealjs. If you are a slide maker and an excellent learner of Html presentation through slides. so,...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.devopstrainer.in\/blog\/how-can-we-create-vertical-and-horizontal-slides-in-revealjs\/\" \/>\n<meta property=\"og:site_name\" content=\"DevOps | SRE | DevSecOps\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-14T12:59:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-10-15T05:37:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/10\/reveal.js-vertical-slides-2.gif\" \/>\n<meta name=\"author\" content=\"rahulkr kr\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"rahulkr kr\" \/>\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:\\\/\\\/www.devopstrainer.in\\\/blog\\\/how-can-we-create-vertical-and-horizontal-slides-in-revealjs\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.devopstrainer.in\\\/blog\\\/how-can-we-create-vertical-and-horizontal-slides-in-revealjs\\\/\"},\"author\":{\"name\":\"rahulkr kr\",\"@id\":\"https:\\\/\\\/www.devopstrainer.in\\\/blog\\\/#\\\/schema\\\/person\\\/e9fd1d88de76754aa189257cd197394d\"},\"headline\":\"How can we create vertical and horizontal slides using revealjs?\",\"datePublished\":\"2022-10-14T12:59:28+00:00\",\"dateModified\":\"2022-10-15T05:37:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.devopstrainer.in\\\/blog\\\/how-can-we-create-vertical-and-horizontal-slides-in-revealjs\\\/\"},\"wordCount\":206,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.devopstrainer.in\\\/blog\\\/how-can-we-create-vertical-and-horizontal-slides-in-revealjs\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.devopstrainer.in\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/reveal.js-vertical-slides-2.gif\",\"keywords\":[\"features\",\"horizontal and vertical slides using revealjs\",\"Html presentation\",\"Html presentations using revealjs\",\"plugins\",\"presentation through slides\",\"revealjs\"],\"articleSection\":[\"coding\",\"features\",\"html presentation\",\"revealjs\",\"visula studio\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.devopstrainer.in\\\/blog\\\/how-can-we-create-vertical-and-horizontal-slides-in-revealjs\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.devopstrainer.in\\\/blog\\\/how-can-we-create-vertical-and-horizontal-slides-in-revealjs\\\/\",\"url\":\"https:\\\/\\\/www.devopstrainer.in\\\/blog\\\/how-can-we-create-vertical-and-horizontal-slides-in-revealjs\\\/\",\"name\":\"How can we create vertical and horizontal slides using revealjs? - DevOps | SRE | DevSecOps\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.devopstrainer.in\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.devopstrainer.in\\\/blog\\\/how-can-we-create-vertical-and-horizontal-slides-in-revealjs\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.devopstrainer.in\\\/blog\\\/how-can-we-create-vertical-and-horizontal-slides-in-revealjs\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.devopstrainer.in\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/reveal.js-vertical-slides-2.gif\",\"datePublished\":\"2022-10-14T12:59:28+00:00\",\"dateModified\":\"2022-10-15T05:37:56+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.devopstrainer.in\\\/blog\\\/#\\\/schema\\\/person\\\/e9fd1d88de76754aa189257cd197394d\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.devopstrainer.in\\\/blog\\\/how-can-we-create-vertical-and-horizontal-slides-in-revealjs\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.devopstrainer.in\\\/blog\\\/how-can-we-create-vertical-and-horizontal-slides-in-revealjs\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.devopstrainer.in\\\/blog\\\/how-can-we-create-vertical-and-horizontal-slides-in-revealjs\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.devopstrainer.in\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/reveal.js-vertical-slides-2.gif\",\"contentUrl\":\"https:\\\/\\\/www.devopstrainer.in\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/reveal.js-vertical-slides-2.gif\",\"width\":1162,\"height\":744},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.devopstrainer.in\\\/blog\\\/how-can-we-create-vertical-and-horizontal-slides-in-revealjs\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.devopstrainer.in\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How can we create vertical and horizontal slides using revealjs?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.devopstrainer.in\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.devopstrainer.in\\\/blog\\\/\",\"name\":\"DevOps | SRE | DevSecOps\",\"description\":\"Automation means Cost, Quality, Time\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.devopstrainer.in\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.devopstrainer.in\\\/blog\\\/#\\\/schema\\\/person\\\/e9fd1d88de76754aa189257cd197394d\",\"name\":\"rahulkr kr\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/79531cbaf0b831cebc9631f6ac28f21fb3fb0dc2615eeecdeeec43038b513473?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/79531cbaf0b831cebc9631f6ac28f21fb3fb0dc2615eeecdeeec43038b513473?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/79531cbaf0b831cebc9631f6ac28f21fb3fb0dc2615eeecdeeec43038b513473?s=96&d=mm&r=g\",\"caption\":\"rahulkr kr\"},\"url\":\"https:\\\/\\\/www.devopstrainer.in\\\/blog\\\/author\\\/rahulkr\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How can we create vertical and horizontal slides using revealjs? - DevOps | SRE | DevSecOps","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:\/\/www.devopstrainer.in\/blog\/how-can-we-create-vertical-and-horizontal-slides-in-revealjs\/","og_locale":"en_US","og_type":"article","og_title":"How can we create vertical and horizontal slides using revealjs? - DevOps | SRE | DevSecOps","og_description":"Hello! Today, I&#8217;m going to show you Html presentations using revealjs. If you are a slide maker and an excellent learner of Html presentation through slides. so,...","og_url":"https:\/\/www.devopstrainer.in\/blog\/how-can-we-create-vertical-and-horizontal-slides-in-revealjs\/","og_site_name":"DevOps | SRE | DevSecOps","article_published_time":"2022-10-14T12:59:28+00:00","article_modified_time":"2022-10-15T05:37:56+00:00","og_image":[{"url":"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/10\/reveal.js-vertical-slides-2.gif","type":"","width":"","height":""}],"author":"rahulkr kr","twitter_card":"summary_large_image","twitter_misc":{"Written by":"rahulkr kr","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.devopstrainer.in\/blog\/how-can-we-create-vertical-and-horizontal-slides-in-revealjs\/#article","isPartOf":{"@id":"https:\/\/www.devopstrainer.in\/blog\/how-can-we-create-vertical-and-horizontal-slides-in-revealjs\/"},"author":{"name":"rahulkr kr","@id":"https:\/\/www.devopstrainer.in\/blog\/#\/schema\/person\/e9fd1d88de76754aa189257cd197394d"},"headline":"How can we create vertical and horizontal slides using revealjs?","datePublished":"2022-10-14T12:59:28+00:00","dateModified":"2022-10-15T05:37:56+00:00","mainEntityOfPage":{"@id":"https:\/\/www.devopstrainer.in\/blog\/how-can-we-create-vertical-and-horizontal-slides-in-revealjs\/"},"wordCount":206,"commentCount":0,"image":{"@id":"https:\/\/www.devopstrainer.in\/blog\/how-can-we-create-vertical-and-horizontal-slides-in-revealjs\/#primaryimage"},"thumbnailUrl":"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/10\/reveal.js-vertical-slides-2.gif","keywords":["features","horizontal and vertical slides using revealjs","Html presentation","Html presentations using revealjs","plugins","presentation through slides","revealjs"],"articleSection":["coding","features","html presentation","revealjs","visula studio"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.devopstrainer.in\/blog\/how-can-we-create-vertical-and-horizontal-slides-in-revealjs\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.devopstrainer.in\/blog\/how-can-we-create-vertical-and-horizontal-slides-in-revealjs\/","url":"https:\/\/www.devopstrainer.in\/blog\/how-can-we-create-vertical-and-horizontal-slides-in-revealjs\/","name":"How can we create vertical and horizontal slides using revealjs? - DevOps | SRE | DevSecOps","isPartOf":{"@id":"https:\/\/www.devopstrainer.in\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.devopstrainer.in\/blog\/how-can-we-create-vertical-and-horizontal-slides-in-revealjs\/#primaryimage"},"image":{"@id":"https:\/\/www.devopstrainer.in\/blog\/how-can-we-create-vertical-and-horizontal-slides-in-revealjs\/#primaryimage"},"thumbnailUrl":"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/10\/reveal.js-vertical-slides-2.gif","datePublished":"2022-10-14T12:59:28+00:00","dateModified":"2022-10-15T05:37:56+00:00","author":{"@id":"https:\/\/www.devopstrainer.in\/blog\/#\/schema\/person\/e9fd1d88de76754aa189257cd197394d"},"breadcrumb":{"@id":"https:\/\/www.devopstrainer.in\/blog\/how-can-we-create-vertical-and-horizontal-slides-in-revealjs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.devopstrainer.in\/blog\/how-can-we-create-vertical-and-horizontal-slides-in-revealjs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.devopstrainer.in\/blog\/how-can-we-create-vertical-and-horizontal-slides-in-revealjs\/#primaryimage","url":"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/10\/reveal.js-vertical-slides-2.gif","contentUrl":"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/10\/reveal.js-vertical-slides-2.gif","width":1162,"height":744},{"@type":"BreadcrumbList","@id":"https:\/\/www.devopstrainer.in\/blog\/how-can-we-create-vertical-and-horizontal-slides-in-revealjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.devopstrainer.in\/blog\/"},{"@type":"ListItem","position":2,"name":"How can we create vertical and horizontal slides using revealjs?"}]},{"@type":"WebSite","@id":"https:\/\/www.devopstrainer.in\/blog\/#website","url":"https:\/\/www.devopstrainer.in\/blog\/","name":"DevOps | SRE | DevSecOps","description":"Automation means Cost, Quality, Time","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.devopstrainer.in\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.devopstrainer.in\/blog\/#\/schema\/person\/e9fd1d88de76754aa189257cd197394d","name":"rahulkr kr","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/79531cbaf0b831cebc9631f6ac28f21fb3fb0dc2615eeecdeeec43038b513473?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/79531cbaf0b831cebc9631f6ac28f21fb3fb0dc2615eeecdeeec43038b513473?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/79531cbaf0b831cebc9631f6ac28f21fb3fb0dc2615eeecdeeec43038b513473?s=96&d=mm&r=g","caption":"rahulkr kr"},"url":"https:\/\/www.devopstrainer.in\/blog\/author\/rahulkr\/"}]}},"_links":{"self":[{"href":"https:\/\/www.devopstrainer.in\/blog\/wp-json\/wp\/v2\/posts\/259","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopstrainer.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopstrainer.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopstrainer.in\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopstrainer.in\/blog\/wp-json\/wp\/v2\/comments?post=259"}],"version-history":[{"count":5,"href":"https:\/\/www.devopstrainer.in\/blog\/wp-json\/wp\/v2\/posts\/259\/revisions"}],"predecessor-version":[{"id":270,"href":"https:\/\/www.devopstrainer.in\/blog\/wp-json\/wp\/v2\/posts\/259\/revisions\/270"}],"wp:attachment":[{"href":"https:\/\/www.devopstrainer.in\/blog\/wp-json\/wp\/v2\/media?parent=259"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopstrainer.in\/blog\/wp-json\/wp\/v2\/categories?post=259"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopstrainer.in\/blog\/wp-json\/wp\/v2\/tags?post=259"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}