Create Presentation using JavaScript Framework

In this article, we will understand the how to create Presentation using JavaScript. A presentation is used to convey information. It separates your HTML content into several slides so that the visitors are able to navigate between these slides with certain operations such as mouse wheel, arrow keys, touch events, etc.

Example 1

<! DOCTYPE html>
<html>                                            
    <head>              
        <meta http-equiv = "Content-Type"   
            content = "text/html; charset=UTF-8" />   
        <title> Example of  Create Presentation using JavaScript  </title>   
        <meta name = "description"/>   
        <meta content = "width=800, initial-scale=1"   
        name = "viewport" />    
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </script>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
  transition: all 0.5s ease;
  text-align: center;
}
body {
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: center;
    box-sizing: border-box;
    padding: 10;
    margin: 10;
    overflow-x: hidden;
    font-family: "Poppins", sans-serif;
    background-color: rgb(238, 238, 238);
}
ul {
  margin-left: 2rem;
}
ul li,
a {
  font-size: 1.2em;
}
.container {
  background: #212121;
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
@import url(https://fonts.googleapis.com/css?family=Work+Sans:400,300,700|Open+Sans:400italic,300italic);
h1 {
  text-align: center;
  color: red;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.8vw;
  letter-spacing: 5px;
  line-height: 1;
  margin: 0;
  text-align: center;
}
html {
  font-family: "Open Sans", sans-serif;
  background-color: #f3f3f3;
}
* {
            padding: 0;
            margin: 0;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            -box-sizing: border-box;
}
#present-area {
  width: 1000px;
  height: 500px;
  position: relative;
  background: purple;
}
#present-area .present {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #ffffff;
  position: relative;
}
#present-area .counter {
  position: absolute;
  bottom: -30px;
  left: 0;
  color: #b6b6b6;
}
#present-area .nav {
  position: absolute;
  bottom: -45px;
  right: 0;
}
#present-area .full-screen {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#present-area .full-screen .counter {
  bottom: 15px;
  left: 15px;
}
#present-area .full-screen .nav {
  bottom: 15px;
  right: 15px;
}
#present-area .full-screen .nav .btn:hover {
  background: #201e1e;
  color: #ffffff;
}
#present-area .full-screen .nav .btn-screen:hover {
  background: #201e1e;
}
.nav button {
  width: 30px;
  height: 30px;
  border: none;
  outline: none;
  margin-left: 0.5rem;
  font-size: 1.5rem;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
}
.nav .btn {
  background: #464646;
  color: #ffffff;
  border-radius: 0.25rem;
  opacity: 0;
  transform: scale(0);
}
.nav .btn.show {
  opacity: 1;
  transform: scale(1);
  visibility: visible;
}
.nav .btn-screen {
  background: transparent;
  color: #b6b6b6;
  visibility: hidden;
}
.btn-screen.show {
  opacity: 1;
  transform: scale(1);
  visibility: visible;
}
.btn-screen.hover {
  color: #ffffff;
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
}
.present .content {
  padding: 2em;
  width: 100%;
  height: calc(100% - 100px);
  z-index: 11;
}
.present .content.grid {
  display: grid;
}
.present .content.grid.center {
  justify-content: center;
  align-items: center;
  text-align: center;
}
.content .title {
  font-size: 3em;
  color: #cb5dcb;
}
.content .sub-title {
  font-size: 2.5em;
  color: purple;
}
.content p {
  font-size: 1.25em;
  margin-bottom: 1rem;
}
.present .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  opacity: 0;
  transform: scale(0);
  visibility: none;
}
.slide.show {
  opacity: 1;
  transform: scale(1);
  visibility: visible;
}
.slide .heading {
  padding: 2rem;
  background: #a786a7;
  font-size: 2em;
  font-weight: bold;
  color: #2e0202;
}
</style>
<body>
<h1> Example </h1>
<h2> Create Presentation Using JavaScript </h2>
<div class="container">
  <div id="present-area ">
    <section class="present">
      <div class="slide show">
        <div class="heading">
          Present on C
        </div>
        <div class="content grid center">
          <h3 class="title">
            What is C ? <br />
          </h3>
        </div>
      </div>
      <div class="slide">
        <div class="heading">
          Overview
        </div>
        <div class="content grid center">
          <h3 class="title">
            Introduction to C
          </h3>
          <p class="sub-title">
            Basic and Advanced Concepts
          </p>
          <p>Lecture No. 1</p>
          <p>My Email Address</p>
        </div>
      </div>
      <div class="slide">
        <div class="heading">
          History
        </div>
        <div class="content">
        </div>
      </div>
      <div class="slide">
        <div class="heading">
          Calling a Function
        </div>
        <div class="content">
          <p>A function is a group of statements that together perform a task. Every C program has at least one function, which is main(), and all the most trivial programs can define additional functions. You can divide up your code into separate functions.</p>
          <ul>
            <li>Call by values</li>
            <li>Call by reference</li>
          </ul>
        </div>
      </div>
      <div class="slide">
        <div class="heading">
          Array Initialization
        </div>
      </div>
      <div class="slide">
        <div class="heading">
          Objects
        </div>
      </div>
    </section>
    <section class="counter">
      1 of 5
    </section>
    <section class="nav">
      <button id="full-screen" class="btn-screen show">
        <i class="fas fa-expand"></i>
      </button>
      <button id="small-screen" class="btn-screen">
        <i class="fas fa-compress"></i>
      </button>
      <button id="left-btn" class="btn">
        <i class="fas fa-solid fa-caret-left"></i>
      </button>
      <button id="right-btn" class="btn">
        <i class="fa-solid fa-caret-right"></i>
      </button>
    </section>
  </div>
</div>
<script>
let present = document.querySelector(".present");
let slides = document.querySelectorAll(".slide");
let currentSlide = document.querySelector(".slide.show");
var slideNumber = document.querySelector(".counter");
var toLeftBtn = document.querySelector("#left-btn");
var toRightBtn = document.querySelector("#right-btn");
let presentController = document.querySelector("#present-area ");
var toFullScreenBtn = document.querySelector("#full-screen");
var toSmallScreenBtn = document.querySelector("#small-screen");
var screenStatus = 0;
var currentSlideNo = 1;
var totalSides = 0;
init();
function init() {
  getCurrentSlideNo();
  totalSides = slides.length;
  setSlideNo();
  hideLeftButton();
  hideRightButton();
}
toLeftBtn.addEventListener("click", moveToLeftSlide);
toRightBtn.addEventListener("click", moveToRightSlide);
toFullScreenBtn.addEventListener("click", fullScreenMode);
toSmallScreenBtn.addEventListener("click", smallScreenMode);
function hideLeftButton() {
  if (currentSlideNo == 1) {
    toLeftBtn.classList.remove("show");
  } else {
    toLeftBtn.classList.add("show");
  }
}
function hideRightButton() {
  if (currentSlideNo === totalSides) {
    toRightBtn.classList.remove("show");
  } else {
    toRightBtn.classList.add("show");
  }
}
function moveToLeftSlide() {
  var tempSlide = currentSlide;
  currentSlide = currentSlide.previousElementSibling;
  tempSlide.classList.remove("show");
  currentSlide.classList.add("show");
  init();
}
function moveToRightSlide() {
  var tempSlide = currentSlide;
  currentSlide = currentSlide.nextElementSibling;
  tempSlide.classList.remove("show");
  currentSlide.classList.add("show");
  init();
}
function getCurrentSlideNo() {
  let counter = 0;
  slides.forEach((slide, i) => {
    counter++;
    if (slide.classList.contains("show")) {
      currentSlideNo = counter;
    }
  });
}
function fullScreenMode() {
  presentController.classList.add("full-screen");
  toFullScreenBtn.classList.remove("show");
  toSmallScreenBtn.classList.add("show");
  screenStatus = 1;
}
function smallScreenMode() {
  presentController.classList.remove("full-screen");
  toFullScreenBtn.classList.add("show");
  toSmallScreenBtn.classList.remove("show");
  screenStatus = 0;
}
function setSlideNo() {
  slideNumber.innerText = `${currentSlideNo} of ${totalSides}`;
}
</script>
</body>
</html>

Explanation:

In the above example, we created an example of presentation slides using HTML content.

Output:

Following is the output of this example.

Create Presentation using JavaScript Framework

Example 2

<! DOCTYPE html>
<html>                                            
    <head>              
        <meta http-equiv = "Content-Type"   
            content = "text/html; charset=UTF-8" />   
        <title> Example of  Create Presentation using JavaScript  </title>   
        <meta name = "description"/>   
        <meta content = "width=800, initial-scale=1"   
        name = "viewport" />    
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </script>
<style>
@import url(https://fonts.googleapis.com/css?family=Work+Sans:400,300,700|Open+Sans:400italic,300italic);
h1 {
  font-family: 'Arimo', sans-serif;
  font-size: 3vw;
  color: black;
}
h2 {
  text-align: center;
  color: green;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.2vw;
  letter-spacing: 5px;
  line-height: 1;
  margin: 0;
  text-align: center;
   font-family: 'Arvo', serif;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
  transition: all 0.5s ease;
}
body {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
ul {
  margin-left: 2rem;
}
ul li,
a {
  font-size: 1.2em;
}
.container {
  background: #212121;
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
#present-area {
  width: 1000px;
  height: 500px;
  position: relative;
  background: purple;
}
#present-area .present {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #ffffff;
  position: relative;
}
#present-area .counter {
  position: absolute;
  bottom: -30px;
  left: 0;
  color: #b6b6b6;
}
#present-area .nav {
  position: absolute;
  bottom: -45px;
  right: 0;
}
#present-area .full-screen {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#present-area .full-screen .counter {
  bottom: 15px;
  left: 15px;
}
#present-area .full-screen .nav {
  bottom: 15px;
  right: 15px;
}
#present-area .full-screen .nav .btn:hover {
  background: #201e1e;
  color: #ffffff;
}
#present-area .full-screen .nav .btn-screen:hover {
  background: #201e1e;
}
.nav button {
  width: 30px;
  height: 30px;
  border: none;
  outline: none;
  margin-left: 0.5rem;
  font-size: 1.5rem;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
}
.nav .btn {
  background: #464646;
  color: #ffffff;
  border-radius: 0.25rem;
  opacity: 0;
  transform: scale(0);
}
.nav .btn.show {
  opacity: 1;
  transform: scale(1);
  visibility: visible;
}
.nav .btn-screen {
  background: transparent;
  color: #b6b6b6;
  visibility: hidden;
}
.btn-screen.show {
  opacity: 1;
  transform: scale(1);
  visibility: visible;
}
.btn-screen.hover {
  color: #ffffff;
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
}
.present .content {
  padding: 2em;
  width: 100%;
  height: calc(100% - 100px);
  z-index: 11;
}
.present .content.grid {
  display: grid;
}
.present .content.grid.center {
  justify-content: center;
  align-items: center;
  text-align: center;
}
.content .title {
  font-size: 3em;
  color: purple;
}
.content .sub-title {
  font-size: 2.5em;
  color: purple;
}
.content p {
  font-size: 1.25em;
  margin-bottom: 1rem;
}
.present .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  opacity: 0;
  transform: scale(0);
  visibility: none;
}
.slide.show {
  opacity: 1;
  transform: scale(1);
  visibility: visible;
}
.slide .heading {
  padding: 2rem;
  background-color:#FFFFCC;
  font-size: 2em;
  font-weight: bold;
  color: #d53d3d;
}
</style>
<div class="container">
  <div id="present-area ">
    <section class="present">
      <div class="slide show">
        <div class="heading">
         How to Create Presentation Using JavaScript
        </div>
        <div class="content grid center">
           <h1> Example </h1>
  <h2> Create Presentation Using JavaScript </h2>  
        </div>
      </div>
      <div class="slide">
        <div class="heading">
          Overview
        </div>
        <div class="content grid center">
          <h3 class="title">
            Introduction to C+
          </h3>
          <p class="sub-title">
            Basic and Advanced Concepts
          </p>
          <p>Lecture No. 1</p>
          <p>My Email Address</p>
          <p><a href="">dummy@gmail.com</a></p>
        </div>
      </div>
      <div class="slide">
        <div class="heading">
          Arrays
        </div>
        <div class="content">
          <p>An array is a collection of items stored at contiguous memory locations. The idea is to store multiple items of the same type together. This makes it easier to calculate the position of each element by simply adding an offset to a base value, i.e., the memory location of the first element of the array (generally denoted by the name of the array). The base value is index 0 and the difference between the two indexes is the offset.</p>
        </div>
      </div>
      <div class="slide">
        <div class="heading">
          Calling a Function
        </div>
        <div class="content">
          <p>A function is a group of statements that together perform a task. Every C program has at least one function, which is main(), and all the most trivial programs can define additional functions. You can divide up your code into separate functions.</p>
          <ul>
            <li>Call by values</li>
            <li>Call by reference</li>
          </ul>
        </div>
      </div>
      <div class="slide">
        <div class="heading">
          Array Initialization
        </div>
      </div>
      <div class="slide">
        <div class="heading">
          Objects
        </div>
      </div>
    </section>
    <section class="counter">
      1 of 6
    </section>
    <section class="nav">
      <button id="full-screen" class="btn-screen show">
        <i class="fas fa-expand"></i>
      </button>
      <button id="small-screen" class="btn-screen">
        <i class="fas fa-compress"></i>
      </button>
      <button id="left-btn" class="btn">
        <i class="fas fa-solid fa-caret-left"></i>
      </button>
      <button id="right-btn" class="btn">
        <i class="fa-solid fa-caret-right"></i>
      </button>
    </section>
  </div>
</div>
<script>
let present = document.querySelector(".present");
let slides = document.querySelectorAll(".slide");
let currentSlide = document.querySelector(".slide.show");
var slideNumber = document.querySelector(".counter");
var toLeftBtn = document.querySelector("#left-btn");
var toRightBtn = document.querySelector("#right-btn");
let presentController = document.querySelector("#present-area ");
var toFullScreenBtn = document.querySelector("#full-screen");
var toSmallScreenBtn = document.querySelector("#small-screen");
var screenStatus = 0;
var currentSlideNo = 1;
var totalSides = 0;
init();
function init() {
  getCurrentSlideNo();
  totalSides = slides.length;
  setSlideNo();
  hideLeftButton();
  hideRightButton();
}
toLeftBtn.addEventListener("click", moveToLeftSlide);
toRightBtn.addEventListener("click", moveToRightSlide);
toFullScreenBtn.addEventListener("click", fullScreenMode);
toSmallScreenBtn.addEventListener("click", smallScreenMode);
function hideLeftButton() {
  if (currentSlideNo == 1) {
    toLeftBtn.classList.remove("show");
  } else {
    toLeftBtn.classList.add("show");
  }
}
function hideRightButton() {
  if (currentSlideNo === totalSides) {
    toRightBtn.classList.remove("show");
  } else {
    toRightBtn.classList.add("show");
  }
}
function moveToLeftSlide() {
  var tempSlide = currentSlide;
  currentSlide = currentSlide.previousElementSibling;
  tempSlide.classList.remove("show");
  currentSlide.classList.add("show");
  init();
}
function moveToRightSlide() {
  var tempSlide = currentSlide;
  currentSlide = currentSlide.nextElementSibling;
  tempSlide.classList.remove("show");
  currentSlide.classList.add("show");
  init();
}
function getCurrentSlideNo() {
  let counter = 0;
  slides.forEach((slide, i) => {
    counter++;
    if (slide.classList.contains("show")) {
      currentSlideNo = counter;
    }
  });
}
function fullScreenMode() {
  presentController.classList.add("full-screen");
  toFullScreenBtn.classList.remove("show");
  toSmallScreenBtn.classList.add("show");
  screenStatus = 1;
}
function smallScreenMode() {
  presentController.classList.remove("full-screen");
  toFullScreenBtn.classList.add("show");
  toSmallScreenBtn.classList.remove("show");
  screenStatus = 0;
}
function setSlideNo() {
  slideNumber.innerText = `${currentSlideNo} of ${totalSides}`;
}
</script>
</body>
</html>

Explanation:

In the above example, we created a example of presentation slides using HTML content.

Output:

Following is the output of this example.

Next TopicJavascript Focus Method

← prev next →

For Videos Join Our Youtube Channel: Join Now

Feedback

Send your Feedback to [email protected]

Help Others, Please Share

Learn Latest Tutorials

Splunk

SPSS

Swagger

Transact-SQL

Tumblr

ReactJS

Regex

Reinforcement Learning

R Programming

RxJS

React Native

Python Design Patterns

Python Pillow

Python Turtle

Keras

Preparation

Aptitude

Reasoning

Verbal Ability

Interview Questions

Company Questions

Trending Technologies

Artificial Intelligence

AWS

Selenium

Cloud Computing

Hadoop

ReactJS

Data Science

Angular 7

Blockchain

Git

Machine Learning

DevOps

B.Tech / MCA

DBMS

Data Structures

DAA

Operating System

Computer Network

Compiler Design

Computer Organization

Discrete Mathematics

Ethical Hacking

Computer Graphics

Software Engineering

Web Technology

Cyber Security

Automata

C Programming

C++

Java

.Net

Python

Programs

Control System

Data Mining

Data Warehouse

Javatpoint Services

JavaTpoint offers too many high quality services. Mail us on h[email protected], to get more information about given services.

Website Designing
Website Development
Java Development
PHP Development
WordPress
Graphic Designing
Logo
Digital Marketing
On Page and Off Page SEO
PPC
Content Development
Corporate Training
Classroom and Online Training
Data Entry

Training For College Campus

JavaTpoint offers college campus training on Core Java, Advance Java, .Net, Android, Hadoop, PHP, Web Technology and Python. Please mail your requirement at [email protected].
Duration: 1 week to 2 week

^{Like/Subscribe us for latest updates or newsletter}

JavaScript Tutorial

JavaScript Basics

JavaScript Objects

JavaScript BOM

JavaScript DOM

JavaScript Validation

JavaScript OOPs

JavaScript Cookies

JavaScript Events

Exception Handling

JavaScript Misc

JavaScript Advance

Differences

Questions

Lodash

MCQ