How to Create Presentation Slides With HTML and CSS

As I was looking through the different software programs that allow me to create presentation slides I realized that I don’t need yet another program. I could use the tools that I already have.

You can easily create interactive and beautiful presentations using HTML, CSS, JavaScript, the three main web technologies. This tutorial will teach you how to create interactive presentations using HTML5, CSS, and JavaScript.

This tutorial is ideal for anyone who is new to HTML5, CSS and JavaScript and wants to learn more about building.

Here’s the last preview of the presentation slide that we’re going build:

1.Create the Directory structure

Let’s get started by creating our folder structure. It should be quite simple. We’ll need:

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

This is a basic template. For the moment, your files will remain unaltered. We will fix it soon.

2.Starter Markup

Let’s start by creating the base markup of our presentation page. Copy the following code into your presentation page. index.html file.

You can see in the base markup that we are importing Font Awesome Icons. This stylesheet is also, and our JavaScript (index.js).

Now, we’ll add HTML markup to the slides. <div> wrapper:

We have seven slides in all. Each slide is composed entirely of the heading and the content sections.

One slide will only be displayed at a given time. This functionality is handled automatically by the .showclass, which we will implement in our stylesheet. We’ll be able to dynamically add the JavaScript code later using JavaScript. .showclass to the active slide of the page.

Below the slides, we’ll add markup for the slide’s counter or tracker.

Later, we will use JavaScript for updating the text content as users navigate through the slides.

Finally, we’ll add a slide navigator just below our counter.

This section contains four buttons that allow you to navigate left and right, switch between full-screen and small-screen modes, and toggle between full-screen and small-screen modes. We’ll again use the class. .showYou can control which button appears at a given time.

That’s all for the HTML portion. Now let’s get to the styling.

3.Make It Pretty

Next, we will create our stylesheet. This stylesheet will be both functional and aesthetic. We’ll need to target the class to make each slide flow from left to right. .showWith a stylesheet to show it.

Here’s the complete stylesheet of our project:

4.Slide Navigation enabled

We want to see the next slide or the previous slide when we click on the right or left icon. We also want to toggle between fullscreen and smallscreen mode.

Additionally, we want the slide counter to show the exact slide number for each slide. JavaScript will enable all these features.

Inside js/index.jsWe’ll start by storing references the the presentation wrapper, slides and active slide:

Next, we will store references to both the slide counter (left and right icons), and both slide navigators (both left and right icons).

You can then store references to the entire presentation container and both buttons icons for switching between full-screen and small-screen modes.

After we’re done with the reference, we’ll initialize some variables using default values.

ScreenStatusThe screen orientation. 0 is a full screen mode, while 1 is a small-screen mode.

CurrentSlideNoThis is the current slide number, which is expected to be the first slide. TotalSlidesis initialized with 0 but this will be replaced with the actual number of slides.

Moving the Presentation to the Next Slides and Previous Slides

Next, we will add click event listeners for the left button and right buttons, full screen buttons, small screen buttons, and full screen buttons:

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

These are the two functions that change the slide’s appearance:

In the function moveToLeftSlideWe can now access the previous sibling (i.e. Remove the slide from the previous slide .showAdd the slide to the sibling you are currently classifying. This will move your presentation to the previous slide.

In the function, we do the exact opposite. moveToRightSlide. Because NextElementSiblingIt is the opposite of previousElementSiblingWe’ll be getting the next sibling instead.

Code to display the presentation on both a full-screen and small screen

We also added click event receivers to the full screen and small-screen icons. This is the function that toggles full-screen mode.

Remember that presentationAreaThe element that wraps the entire presentation. The class can be added to the presentation. full-screenThis element triggers the CSS to expand it to fill the entire screen.

We’re now in full screen mode. The icon to revert to the smaller screen must be shown. .showIt. Finally, we update this variable. ScreenStatusTo 1.

For the smallScreenMode function, we do the opposite—we remove the class full-screenShow the expand button icon and then click on update ScreenStatus.

Hidden the Left and right icons on the first and last slides

Now we need to figure out a way to hide left and right buttons on the first and last slides, respectively.

To achieve this, we’ll use two functions:

These functions do a simple job: they check for the slide number and hide left and right buttons if the presentation is pointing at the first and last slides respectively.Slide number updating and display

Because we’re using the variable CurrentSlideNoWe need a way to update the left and right buttons icons as the user navigates through slides. We need to show the user which slide they are currently viewing.

We’ll design a function GetCurrentSlideNoTo update the slide number:

We start the counter at 0. For each slide on the page we increment the counter. The active counter (i.e. With the class .show) to the CurrentSlideNo variable.

Now we can add text to the slide counter using another function.

As an example, if we were on slide 2, the slide’s counter would read, “2 of 6”.

All things together

To ensure that they all work together, we will run them in a brand new environment. InitFunction that we’ll execute at start of script, just below references:

We must also run Init()Both the moveToLeftSlideAnd moveToRightSlide functions:

This will ensure that you are able to enjoy the InitEach time the user navigates to the left or right of the presentation, the function runs.

Wrapping up

I hope this tutorial helped to make you more familiar with basic web development. We created a slideshow using HTML, CSS and JavaScript.

You should have learned HTML, CSS, JavaScript syntax for web development.

Leave a Reply

Your email address will not be published.