Google+

Shineyrock

web design & consultancy

Shineyrock

  1. web design and consultancy

blog

  1. Home
  2. blog
  3. read
  4. How to Create Presentation Slides With HTML and CSS
  • dislike -3 19

    How to Create Presentation Slides With HTML and CSS

    1. January 2014
    2. Daily
    3. read 0

    As I sifted through the various pieces of software that are designed for creating presentation slides, it occurred to me: why learn yet another program, when I can instead use the tools that I'm already familiar with?

    We can easily create beautiful and interactive presentations with HTML, CSS, and JavaScript, the three basic web technologies. In this tutorial, we'll use modern HTML5 markup to structure our slides, we'll use CSS to style the slides and add some effects, and we'll use JavaScript to trigger these effects and reorganize the slides based on click events.

    This tutorial is perfect for those of you new to HTML5, CSS, and JavaScript, who are looking to learn something new by building.

    Here's the final preview of the presentation slide we're going to build:

    You can also find the complete source code in the GitHub repo.

    Let's begin.

    1. Create the Directory Structure

    Before we get started, let's go ahead and create our folder structure; it should be fairly simple. We'll need:

    • index.html
    • css/style.css
    • js/scripts.js

    This is a simple base template. Your files remain blank for the time being. We'll fix that shortly.

    2. Create the Starter Markup

    Let's begin by creating the base markup for our presentation page. Paste the following snippet into your index.html file.

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">

  <!-- Font Awesome Icon CDN -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
  <div class="container"
    <div id="presentation-area">
       <!-- slides go here -->
    </div>
  </div>
<script src="js/index.js" type="text/javascript"></script>
</body>
</html>

    From the base markup, you can tell that we are importing Font Awesome Icons, our stylesheet (style.css), and our JavaScript (index.js).

    Now we'll add the HTML markup for the actual slides inside the <div> wrapper:

    <section class="presentation">

    <!-- Slide 1 -->
    <div class="slide show">
      <div class="heading">
        Presentation on C#
      </div>
      <div class="content grid center">
        <h3 class="title">
          What is C# ? <br /> All You Need To Know
        </h3>
      </div>
    </div>

    <!-- Slide 1 -->
    <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="">ubahthebuilder@gmail.com</a></p>
      </div>
    </div>

    <!-- Add 5 more slides here -->
</section>

    We have seven slides in total, and each slide is composed of the heading section and the content section.

    Only one slide will be shown at a time. This functionality is handled by the .show class, which will be implemented later on in our stylesheet. Using JavaScript, later on, we'll dynamically add the .show class to the active slide on the page.

    Below the slides, we'll add the markup for our slide's counter and tracker:

    <div id="presentation-area">
   <!-- <section class="slides"><-></section> -->
   <section class="counter">
    1 of 6
  </section>
</div>

    Later on, we'll use JavaScript to update the text content as the user navigates through the slides.

    Finally, we'll add the slide navigator just below the counter:

    <div id="presentation-area">
   <!-- <section class="slides"><-></section> -->
   <!-- <section class="counter"><-></section> -->
   <section class="navigation">
        <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>

    This section consists of four buttons responsible for navigating left and right and switching between full-screen mode and small-screen mode. Again, we'll use the class .show to regulate which button appears at a time.

    That'll be all for the HTML part. Now, let's move over to styling.

    3. Make It Pretty

    Our next step takes place within our stylesheet. We'll be focusing on both aesthetics and functionality here. To make each slide translate from left to right, we'll need to target the class .show with a stylesheet to show the element.

    Here's the complete stylesheet for our project:

    * {
  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;
}

#presentation-area {
  width: 1000px;
  height: 500px;
  position: relative;
  background: purple;
}

/* Styling all three sections */
#presentation-area .presentation {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #ffffff;
  position: relative;
}

#presentation-area .counter {
  position: absolute;
  bottom: -30px;
  left: 0;
  color: #b6b6b6;
}

#presentation-area .navigation {
  position: absolute;
  bottom: -45px;
  right: 0;
}

/* On full screen mode */
#presentation-area.full-screen {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#presentation-area.full-screen .counter {
  bottom: 15px;
  left: 15px;
}

#presentation-area.full-screen .navigation {
  bottom: 15px;
  right: 15px;
}

#presentation-area.full-screen .navigation .btn:hover {
  background: #201e1e;
  color: #ffffff;
}

#presentation-area.full-screen .navigation .btn-screen:hover {
  background: #201e1e;
}
/* End full screen mode */

/* Buttons */
.navigation 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;
}

.navigation .btn {
  background: #464646;
  color: #ffffff;
  border-radius: 0.25rem;
  opacity: 0;
  transform: scale(0);
}

.navigation .btn.show {
  opacity: 1;
  transform: scale(1);
  visibility: visible;
}

.navigation .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);
}
/* End Buttons */

/* content */
.presentation .content {
  padding: 2em;
  width: 100%;
  height: calc(100% - 100px);
  z-index: 11;
}

.presentation .content.grid {
  display: grid;
}

.presentation .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;
}
/* End Content Stylesheet */

/* Slide */
.presentation .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: purple;
  font-size: 2em;
  font-weight: bold;
  color: #ffffff;
}

    4. Enable Slide Navigation

    Whenever we click on the left or right icon, we want the next slide or previous slide to appear. We also want to be able to toggle between full-screen mode and small-screen mode.

    Furthermore, we want the slide's counter to display the accurate slide number on every slide. All these features will be enabled with JavaScript.

    Inside js/index.js, we'll begin by storing references to the presentation wrapper, the slides, and the active slide:

    let slidesParentDiv = document.querySelector('.slides');
let slides = document.querySelectorAll('.slide');
let currentSlide = document.querySelector('.slide.show');

    Next, we'll store references to the slide counter and both of the slide navigators (left and right icons):

    var slideCounter = document.querySelector('.counter');
var leftBtn = document.querySelector('#left-btn');
var rightBtn = document.querySelector('#right-btn');

    Then store references to the whole presentation container and both button icons for going into full screen and small screen mode:

    let presentationArea = document.querySelector('#presentation-area');
var fullScreenBtn = document.querySelector('#full-screen');
var smallScreenBtn = document.querySelector('#small-screen');

    Now that we're done with the references, we'll initialize some variables with default values:

    var screenStatus = 0;
var currentSlideNo = 1
var totalSides = 0;

    screenStatus represents the screen orientation. 0 represents a full screen mode, and 1 represents a small screen mode.

    currentSlideNo represents the current slide number, which as expected is the first slide. totalSlides is initialized with 0, but this will be replaced by the actual number of our slides.

    Moving the Presentation to the Next and Previous Slides

    Next, we'll add click event listeners to the left button, right button, full screen button, and small screen button:

    leftBtn.addEventListener('click', moveToLeftSlide);
rightBtn.addEventListener('click', moveToRightSlide);

fullScreenBtn.addEventListener('click', fullScreenMode);
smallScreenBtn.addEventListener('click', smallScreenMode);

    We bind corresponding functions that will run when the click event is triggered on the corresponding element.

    Here are the two functions responsible for changing the slide:

    function moveToLeftSlide() {
  var tempSlide = currentSlide;
  currentSlide = currentSlide.previousElementSibling;
  tempSlide.classList.remove('show');
  currentSlide.classList.add('show');
}

function moveToRightSlide() {
  var tempSlide = currentSlide;
  currentSlide = currentSlide.nextElementSibling;
  tempSlide.classList.remove('show');
  currentSlide.classList.add('show');
}

    In the function moveToLeftSlide, we basically access the previous sibling element (i.e. the previous slide), remove the .show class on the current slide, and add it to that sibling. This will move the presentation to the previous slide.

    We do the exact opposite of this in the function moveToRightSlide. Because nextElementSibling is the opposite of previousElementSibling, we'll be getting the next sibling instead.

    Code for Showing the Presentation in Full Screen and Small Screen

    Recall that we also added click event listeners to the full screen and small screen icons. Here's the function responsible for toggling full-screen mode:

    function fullScreenMode() {
  presentationArea.classList.add('full-screen');
  fullScreenBtn.classList.remove('show');
  smallScreenBtn.classList.add('show');

  screenStatus = 1;
}

function smallScreenMode() {
  presentationController.classList.remove('full-screen');
  fullScreenBtn.classList.add('show');
  smallScreenBtn.classList.remove('show');

  screenStatus = 0;
}

    Recall that presentationArea refers to the element that wraps the whole presentation. By adding the class full-screen to this element, we trigger the CSS that will expand it to take up the whole screen.

    Since we're now in full-screen mode, we need to show the icon for reverting back to the small screen by adding the class .show to it. Finally, we update the variable screenStatus to 1.

    For the smallScreenMode function, we do the opposite—we remove the class full-screen, show the expand button icon, and update screenStatus.

    Hiding the Left and Right Icons on the First and Last Slides

    Now, we need to invent a way to hide the left and right buttons when we're on the first slide and last slide respectively.

    We'll use the following two functions to achieve this:

    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');
  }
}

    Both these functions perform a very simple task: they check for the current slide number and hide the left and right buttons when the presentation is pointing to the first and last slide respectively.

    Updating and Displaying the Slide Number

    Because we're making use of the variable currentSlideNo to hide or show the left and right button icons, we need a way to update it as the user navigates through the slides. We also need to display to the user what slide they are currently viewing.

    We'll create a function getCurrentSlideNo to update the current slide number:

    function getCurrentSlideNo() {
  let counter = 0;

  slides.forEach((slide, i) => {
    counter++

    if(slide.classList.contains('show')){
      currentSlideNo = counter;
    }
  });

}

    We start the counter at 0, and for each slide on the page, we increment the counter. We assign the active counter (i.e. with the class .show) to the currentSlideNo variable.

    With that in place, we create another function that inserts some text into the slide counter:

    function setSlideNo() {
  slideNumber.innerText = `${currentSlideNo} of ${totalSides}`
}

    So if we were on the second slide, for example, the slide's counter would read: "2 of 6".

    Putting Everything Together

    To ensure that all of these functions run in harmony, we'll run them in a newly created init function that we'll execute at the start of the script, just below the references:

    init();

function init() {

  getCurrentSlideNo();
  totalSides = slides.length
  setSlideNo();
  hideLeftButton();
  hideRightButton();
}

    We must also run init() at the bottom of both the moveToLeftSlide and moveToRightSlide functions:

    function moveToLeftSlide() {
  // other code

  init();
}

function moveToRightSlide() {
  // other code

  init();
}

    This will ensure that the init function runs every time the user navigates left or right in the presentation.

    Wrapping Up

    I hope this tutorial helped you understand basic web development better. Here we built a presentation slideshow from scratch using HTML, CSS, and JavaScript.

    With this project, you should have learned some basic HTML, CSS, and JavaScript syntax to help you with web development.

    Photo

    martijn broeders

    founder/ strategic creative at shineyrock web design & consultancy
    e-mail: .(JavaScript must be enabled to view this email address)
    phone: 434 210 0245
    Add a comment...
    Comments

By - category

By - date

Copyright © 1999 - 2026 Shineyrock web design and consultancy, All Rights Reserved / Terms of Conditions / Sitemap: XML, HTML, Images, Mobile, News