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 →