Create Presentation using JavaScript Framework

In this article, we will explore the process of creating a presentation utilizing JavaScript. A presentation serves the purpose of communicating information effectively. It divides your HTML content into multiple slides, allowing users to transition between these slides through various actions such as mouse wheel movements, keyboard arrow keys, touch interactions, and more.

Example 1

Example


<! 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://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"> </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 preceding illustration, we developed a demonstration of presentation slides utilizing HTML content.

Output:

Following is the output of this example.

Example 2