While searching for various software packages designed specifically for creating presentation slides, it occurred to me: why learn another program when I can use a tool I'm already familiar with?
We can easily create beautiful interactive presentations using three basic web technologies: HTML, CSS and JavaScript. In this tutorial, we'll use the modern HTML5 format to build our slideshow, we'll use CSS to style the slideshow and add some effects, we'll use JavaScript to trigger those effects and reorganize the slideshow based on clicks.
This tutorial is perfect for those who are new to HTML5, CSS and JavaScript and want to learn something new by building. After this, you can even learn to use aHTML5 slideshow iliDynamic HTML and JavaScript PPT.Sky is the limit.
Wondering how to create HTML slideshows? This is the last preview of the presentationHTML tutorial slidesWe will build:
Have you checked the HTMLInstructional slides? This is a good example of HTML PPT slides available for download.
Let's begin.
1.Create a directory structure
Before we begin, let's go ahead and create our map structure; it should be pretty simple. we must:
- index.html
- CSS/stijl.css
- js/script.js
This is a simple basic template. Your file will now remain empty. We will resolve this issue as soon as possible.
2.Create initial tags
Let's start by creating a basic demo site layout. Paste the following code snippet into yourindex.htmlperiod.
1 |
|
2 | Lang="exist"> |
3 | |
4 | character set="UTF-8"> |
5 | to do="watch out" content ="width=device-width, initial-scale=1.0"> |
6 | http-ekviv="X-UA compatibility" content ="ie = line"> |
7 | |
8 | |
9 | |
10 | |
11 | |
12 | |
13 | |
14 | |
15 | <Septum ID ="Demo soba"> |
16 | |
17 |
18
19
“js/index.js” type="text/javascript">
20
21
From the basic layout you can see that we import Font Awesome Icons, our stylesheet (styles.css), and our JavaScript (index.js).
Now we add the HTML tags for the actual slideshowswing:
1 | |
2 | |
3 | |
4 | |
5 | |
6 | C# presentation |
7 |
8
class="Content Network Center">9
class="title">
10
What is C#?
/>everything you need to know11
12
13
14
15
16
class="slide">17
18
review
19
20
class="Content Network Center">21
class="title">
22
Introduction to C++
23
24
class="titl">
25
Basic and advanced concepts
26
27
first lecture28
my email address29
30
31
32
33
34
We have a total of seven slides, and each slide has a title part and a content part.
Show only one slide at a time. This feature is provided by. exhibitclass, which will later be implemented in our stylesheet. We will dynamically create later. exhibitclasses to the active slide show on the page.
Below the slideshow, we'll add formatting to the counter and slide tracker:
1 | |
2 | |
3 | |
4 | 1 van 6 |
5 | |
6 |
Later, we'll use JavaScript to update the text content as the user moves through the slideshow.
Finally, we add a slide navigator below the counter:
1 | |
2 | |
3 | |
4 | |
5 | |
6 | |
7 | |
8 | |
9 | |
10 | |
11 | |
12 | |
13 | |
14 | |
15 | |
16 | |
17 | |
18 | |
19 | |
20 | |
21 |
This section consists of four buttons responsible for left and right navigation and switching between full and small screen. We will use the class again. exhibitControls which button appears at a given time.
That's it for the HTML part. Now let's move on to styling.
3.make it beautiful
Our next step happens in our stylesheet. Here we will focus on aesthetics and functionality. In order for each slide to move from left to right, we need to focus on the class. exhibitUse style sheets to display elements.
Here is the entire stylesheet for our project:
1 | * { |
2 | rub: 0; |
3 | charge: 0; |
4 | box size: bounding box; |
5 | to start a family: sans serif font; |
6 | transition: exist 0.5 seconds comfortable; |
7 | } |
8 | |
9 | Body { |
10 | width: 100vw; |
11 | tall: 100vh; |
12 | exhibit: to bow down; |
13 | settle sentences: center; |
14 | content of evidence: center; |
15 | } |
16 | |
17 | ur { |
18 | border connection: 2rem; |
19 | } |
20 | |
21 | ur plum, |
22 | A { |
23 | make cave: 1.2em; |
24 | } |
25 | |
26 | . tank { |
27 | background: #212121; |
28 | width: 100%; |
29 | tall: 100%; |
30 | Place: relatively; |
31 | exhibit: to bow down; |
32 | settle sentences: center; |
33 | content of evidence: center; |
34 | } |
35 | |
36 | #demo soba { |
37 | width: 1000 px; |
38 | tall: 500 px; |
39 | Place: relatively; |
40 | background: purple; |
41 | } |
42 | |
43 | /* Style all three sections */ |
44 | #demo soba . promotional meeting { |
45 | width: 100%; |
46 | tall: 100%; |
47 | overflow: written; |
48 years old | background: #ffffff; |
49 | Place: relatively; |
50 | } |
51 | |
52 | #demo soba . counter { |
53 | Place: absolute; |
54 | bottom: -30px; |
55 | Connection: 0; |
56 | color: #b6b6b6; |
57 | } |
58 | |
59 | #demo soba . navigation { |
60 | Place: absolute; |
61 | bottom: -45px; |
62 | To the right: 0; |
63 | } |
64 | |
65 | /* full screen */ |
66 | #demo soba. full screen { |
67 | width: 100%; |
68 | tall: 100%; |
69 | overflow: written; |
70 | } |
71 | |
72 | #demo soba. full screen . counter { |
73 | bottom: 15 px; |
74 | Connection: 15 px; |
75 | } |
76 | |
77 | #demo soba. full screen . navigation { |
78 | bottom: 15 px; |
79 | To the right: 15 px; |
80 | } |
81 | |
82 | #demo soba. full screen . navigation .btn:float { |
83 | background: #201e1e; |
84 | color: #ffffff; |
85 | } |
86 | |
87 | #demo soba. full screen . navigation .btn display:float { |
88 | background: #201e1e; |
89 | } |
Post-90-e | /* full screen output */ |
91 | |
92 | /* test */ |
93 | . navigation button { |
94 | width: 30 px; |
95 | tall: 30 px; |
96 | border: Yes; |
97 | review: Yes; |
98 | border connection: 0,5 rem; |
99 | make cave: 1,5 rem; |
100 | line height: 30 px; |
101 | Align the text: center; |
102 | cursor: pointer; |
103 | } |
104 | |
105 | . navigation .btn { |
106 | background: #464646; |
107 | color: #ffffff; |
108 | boundary radius: 0,25 rem; |
109 | Opacity: 0; |
110 | Convert: plate(0); |
111 | } |
112 | |
113 | . navigation .btn.show { |
114 | Opacity: 1; |
115 | Convert: plate(1); |
116 | visibility: visible; |
117 | } |
118 | |
119 | . navigation .btn display { |
120 | background: transparent; |
121 | color: #b6b6b6; |
122 | visibility: written; |
123 | } |
124 | |
125 | .btn-scherm.show { |
126 | Opacity: 1; |
127 | Convert: plate(1); |
128 | visibility: visible; |
129 | } |
130 | |
131 | oriented .btn.screen { |
132 | color: #ffffff; |
133 | frame shadow: 0 pixels 10 px 30 px RGBA(0, 0, 0, 0,1); |
134 | } |
135 | /* end button */ |
136 | |
137 | /* content */ |
138 | . promotional meeting . content { |
139 | charge: 2em; |
140 | width: 100%; |
141 | tall: computationally(100% - 100 px); |
142 | z-index: 11; |
143 | } |
144 | |
145 | . promotional meeting .network.content { |
146 | exhibit: Cock; |
147 | } |
148 | |
149 | . promotional meeting .content.network.centrum { |
150 | content of evidence: center; |
151 | settle sentences: center; |
152 | Align the text: center; |
153 | } |
154 | |
155 | . content . title { |
156 | make cave: 3em; |
157 | color: purple; |
158 | } |
159 | |
160 | . content . titl { |
161 | make cave: 2,5 em; |
162 | color: purple; |
163 | } |
164 | |
165 | . content P { |
166 | make cave: 1,25 em; |
167 | margin bottom: 1 on the dice; |
168 | } |
169 | /* final content stylesheet */ |
170 | |
171 | /* slide */ |
172 | . promotional meeting . And { |
173 | Place: absolute; |
174 | top: 0; |
175 | Connection: 0; |
176 | width: 100%; |
177 | tall: 100%; |
178 | background: #ffffff; |
179 | Opacity: 0; |
180 | Convert: plate(0); |
181 | visibility: Yes; |
182 | } |
183 | |
184 | .slideshow { |
185 | Opacity: 1; |
186 | Convert: plate(1); |
187 | visibility: visible; |
188 | } |
189 | |
190 | . And . Column { |
191 | charge: 2rem; |
192 | background: purple; |
193 | make cave: 2em; |
194 | font weight: bold; |
195 | color: #ffffff; |
196 | } |
4.Enable Diana navigation
Whenever we click on the left or right icon, we want the next or previous slide to appear. We also want to be able to switch between full screen and small screen.
Also, we want the slide counter to display the correct slide number on each slide. All these features are enabled through JavaScript.
ujs/index.js, we first save references to the presentation frame, slides, and active slides:
1 | leave dia'sParentDiv = document.query selector('. he is'); |
2 | leave he is = document.the selector asked everyone('. And'); |
3 | leave huidige dia = document.query selector('.slideshow'); |
Next, we store references to the slide counter and the two slide navigators (left and right icons):
1 | it was slide counter = document.query selector('. counter'); |
2 | it was left button = document.query selector('#link-btn'); |
3 | it was right button = document.query selector('#desno-btn'); |
Next, save a reference to the entire presentation container and the two full screen and small screen button icons:
1 | leave display area = document.query selector('#demo soba'); |
2 | it was full screen button = document.query selector('#full screen'); |
3 | it was small shear band = document.query selector('#mali screen'); |
Now that we're done referencing, let's initialize some variables with default values:
1 | it was screen status = 0; |
2 | it was current slide number = 1 |
3 | it was total number of pages = 0; |
screen statusIndicates screen orientation. 0 means full screen mode, 1 means small screen mode.
current slide numberIndicates the current slide number, which is expected to be the first slide.total number of slidesInitialized to 0, but this is replaced by the actual number of our slides.
Move the presentation to the next and previous slide
Next, we add click listeners for the left button, right button, full screen button, and small screen button:
1 | left button.Add event listeners('click', pull left); |
2 | right button.Add event listeners('click', swipe right); |
3 | |
4 | full screen button.Add event listeners('click', full screen mode); |
5 | small shear band.Add event listeners('click', small screen mode); |
We bind the corresponding function and execute it when the click event is fired on the corresponding element.
Here are two functions responsible for changing slides:
1 | Function pull left() { |
2 | it was temporary slide show = huidige dia; |
3 | huidige dia = huidige dia.previousElement brothers; |
4 | temporary slide show.class list.delete('exhibit'); |
5 | huidige dia.class list.Add to('exhibit'); |
6 | } |
7 | |
8 | Function swipe right() { |
9 | it was temporary slide show = huidige dia; |
10 | huidige dia = huidige dia.next element bro; |
11 | temporary slide show.class list.delete('exhibit'); |
12 | huidige dia.class list.Add to('exhibit'); |
13 | } |
in functionpull left, we can actually access the previous related element (ie the previous slide), removing the. exhibitclass on the current slide and add it to a slide at the same level. Move the presentation to the previous slide.
In function we do the exact opposite of thisswipe right.becausenext element brois the oppositepreviousElement brothers, we get the next sibling.
Code for full screen and small screen presentations
Recall that we also added click listeners for fullscreen and smallscreen icons. Here is the function responsible for switching between full screen modes:
1 | Function full screen mode() { |
2 | display area.class list.Add to('full screen'); |
3 | full screen button.class list.delete('exhibit'); |
4 | small shear band.class list.Add to('exhibit'); |
5 | |
6 | screen status = 1; |
7 | } |
8 | |
9 | Function small screen mode() { |
10 | display controller.class list.delete('full screen'); |
11 | full screen button.class list.Add to('exhibit'); |
12 | small shear band.class list.delete('exhibit'); |
13 | |
14 | screen status = 0; |
15 | } |
repeat thatdisplay areaIt refers to the element that surrounds the entire presentation. by adding a classfull screenFor this element, we activate CSS that will expand it to the entire screen.
Since we are now in full screen mode, we need to return the icon to the small screen by adding a class. exhibitgive. Finally, we update the variablescreen statusdo 1.
forsmall screen modefunction, we do the opposite: we remove the classfull screen, display the expand and update button iconscreen status.
Hide the left and right icons on the first and last slide
Now we need to figure out a way to hide the left and right buttons on the first and last slide.
We will use the following two functions to achieve this:
1 | Function hide left button() { |
2 | I(current slide number == 1) { |
3 | link button.class list.delete('exhibit'); |
4 | } Anders { |
5 | link button.class list.Add to('exhibit'); |
6 | } |
7 | } |
8 | |
9 | Function hide right click() { |
10 | I(current slide number === total number of pages) { |
11 | right button.class list.delete('exhibit'); |
12 | } Anders { |
13 | right button.class list.Add to('exhibit'); |
14 | } |
15 | } |
The operation of these two functions is very simple: they check the current slide number and hide the left and right buttons when the presentation points to the first and last slide respectively.
Update and display the slide number
because we use a variablecurrent slide numberTo hide or show the left and right button icons, we need a way to update them as the user moves through the slideshow. We also need to show the user which presentation they are currently viewing.
We will create a functionGet the current slide numberUpdate the current slide number:
1 | Function Get the current slide number() { |
2 | leave counter = 0; |
3 | |
4 | he is.each(((slide, and) => { |
5 | counter++ |
6 | |
7 | I(slide.class list.Include('exhibit')){ |
8 | current slide number = counter; |
9 | } |
10 | }); |
11 | |
12 | } |
We start the counter from 0 and for each slide on the page we increase the counter. We assign activity counters (ie with class. exhibit) arrivecurrent slide numberChanging.
With it, we create another function that inserts text into the slide counter:
1 | Function set the slide number() { |
2 | slide number.text = `${current slide number}truck${total number of pages}` |
3 | } |
So, for example, if we were on the second slide, the slide counter would be: "2 of 6".
put everything together
To make sure all these functions work in harmony, we run them in a newly created environmentfrom the insideThe function we'll run at the beginning of the script, just below the reference:
1 | from the inside(); |
2 | |
3 | Function from the inside() { |
4 | |
5 | Get the current slide number(); |
6 | total number of pages = he is.lenght |
7 | set the slide number(); |
8 | hide left button(); |
9 | hide right click(); |
10 | } |
we have to run toofrom the inside()at the bottom of bothpull leftexistswipe rightFunction:
1 | Function pull left() { |
2 | // other code |
3 | |
4 | from the inside(); |
5 | } |
6 | |
7 | Function swipe right() { |
8 | // other code |
9 | |
10 | from the inside(); |
11 | } |
This ensuresfrom the insideThis function is executed every time the user scrolls left or right in the presentation.
Prevent
I hope this guide has helped you better understand the basics of web development. Here we have created a brand new slide presentation using HTML, CSS and JavaScript. This is a great way to start creatingDynamic HTML and JavaScript PPT
Through this project you should have learned some basic syntaxes of HTML, CSS and JavaScript that will help you in web development.
FAQs
How do I make a slideshow with HTML and CSS only? ›
- Step 1: Design the web page. I designed the webpage using a small amount of CSS code below. ...
- Step 2: Create the basic structure of the slider. ...
- Step 3: Add images to the automatic image slider. ...
- Step 4: Enable autoplay with CSS.
Slideshows in HTML are often used for creating web interfaces mainly for advertisement platforms. These are easy to implement and can be done with the help of HTML and CSS only, javascript can also be used if certain conditional features are to be added otherwise HTML and CSS are enough.
How to create a responsive slideshow with CSS and JavaScript? ›- html. Create an HTML file in which we will define the structure (view) of the page. ...
- css. Add CSS style to give the size and effect for a look. ...
- js. Using JavaScript we can perform validation and the handle event on the page.
- Create a folder named "images" in the project path and put all the images required for the slider. ...
- Add the below code in the body section of the HTML page. ...
- Write the JavaScript code. ...
- Now, it's time to apply CSS to showcase the images in a proper position with some styles. ...
- CSS.
Carousels require the use of an id (in this case id="myCarousel" ) for carousel controls to function properly. The class="carousel" specifies that this <div> contains a carousel. The .slide class adds a CSS transition and animation effect, which makes the items slide when showing a new item.
How do you animate slides in CSS? ›- Create the HTML with a container div and the slider div.
- In the CSS, set the slider to be offscreen by setting it with a negative left (eg -100px)
- We then trigger the slide by using transition CSS property and set the left to be 0px;
Some of the best presentation software include Visme, Haiku Deck, Prezi, Microsoft Powerpoint, Canva and Google Slides. In this comparison guide, we'll analyze each of these tools and many more to understand what the difference is between them so you can choose the best presentation maker for your business.
How do you make a slider display the value in HTML? ›- 0 <input type="range" min="0" max="255" name="sld2" value="47"> 255. which would appear like this:
- 0 255. In the IE browser, the slider value is displayed when you move the slider. ...
- 0 1000.
- FooGallery. FooGallery is an easy-to-use WordPress gallery plugin with a variety of stunning gallery templates and a focus on speed and SEO. ...
- Smart Slider 3. ...
- Master Slider. ...
- MetaSlider. ...
- Soliloquy.
- 1) Open Your Text Editor Like Notepad++, Sublime, etc.
- 2) Create HTML, CSS, And Javascript Files And Put In Your Project Folder. ...
- 3) Link The CSS File With HTML File Using “Link” Tag. ...
- 5) Copy Product Slider HTML Code And Past In Your HTML File.
How to create carousel in HTML without JavaScript? ›
- Set . carousel__track to display using overflow-x: auto;
- Define the size of the carousel elements, using help classes generated by another for loop. We use a reference of 90% of the parent element's width in order to have the next element visible on the right side of the screen.
- <html> <body> <div class="image-slideshow"> <div class="image fade"> <img src="https://iili.io/HWdl3Al.md.jpg" alt="Mountain Top"> ...
- * { box-sizing: border-box. } .image-slideshow { max-width: 1000px; ...
- let index = 0; displayImages(); function displayImages() { let i;
You can use opacity instead, and use CSS transitions to make it smooth. Though that requires absolutely positioning the images instead, and then the parent will no longer match the height of the image, so you can set the container height to match the current image, and transition that, too.
How to make image slider in HTML with code? ›- .slider { width: 100%; height: 510px; position: relative; } .slider img { width: 100%; height: 500px position: absolute; top: 0; left: 0; } .slider img:first-child { z-index: 1; } .slider img:nth-child(2) { z-index: 0; }
- .
HTML Video Tags
All you need to do is set the width to 100% and the height to auto. This will create a video that fills the entire parent and its height will be calculated automatically based on the width so that it maintains its current aspect ratio no matter the screen size.
- CSS transitions. The idea of CSS transitions is simple. ...
- transition-property. ...
- transition-duration. ...
- transition-delay. ...
- transition-timing-function. ...
- Event: “transitionend” ...
- Keyframes. ...
- Performance.
js can automatically animate elements across slides. All you need to do is add data-auto-animate to two adjacent slide <section> elements and Auto-Animate will animate all matching elements between the two. Here's a simple example to give you a better idea of how it can be used.
What is the difference between carousel and slider in HTML? ›What is the difference between carousels and sliders? Both terms identify the same meaning in context, as they display images, videos, or other content as an automatic or manual slideshow. However, sliders can display one slide at a time, whereas carousels allow users to see multiple slides at once.
What is a slider carousel? ›Also known as sliders, galleries, and slideshows, web carousels let you display text, graphics, images, and even video in one interactive, “sliding” block. They're a great design option for grouping content and ideas together—allowing you to form visual relationships between specific pieces of content.
How to use Owl carousel in HTML and CSS? ›Set up your HTML
You don't need any special markup. All you need is to wrap your divs(owl works with any type element) inside the container element <div class="owl-carousel">. Class "owl-carousel" is mandatory to apply proper styles that come from owl.
Can display be animated in CSS? ›
CSS allows animation of HTML elements without using JavaScript or Flash! In this chapter you will learn about the following properties: @keyframes.
How do I create an animated button in HTML and CSS? ›- Step 1: Add HTML. First of all, we have to write the HTML for creating the button. HTML. ...
- Step 2: Add CSS. CSS (SCSS) . ...
- Step 3: Combine HTML and CSS. To create the button and set the styling for the button, we have to combine the HTML and CSS files.
PowerPoint can be an effective tool for communicating key ideas and engaging your audience during a business presentation. But it's also easy to get caught in a stale routine when using the program, which dates back to 1990.
What are the four basic ways of creating a presentation? ›If you want to create a presentation, there are four things you need to do: research your content, organize it, visualize it and present it.
How do you present a presentation in a unique way? ›- Use neon colors and duotones.
- Unify transitions horizontally.
- Use a monochrome palette.
- Tell a personal story.
- Use isometric illustrations.
To create a master slide: On the View tab, click Slide Master. In Slide Master View, the slide master appears at the top of the thumbnail pane with related layouts beneath it. Click to select the master slide, then click Master Layout on the Slide Master tab.
What size should a slider be in HTML? ›An optimal size for a slider is 1200px width and 500-800px height.
What is the code for sliding text in HTML? ›The <marquee> tag is used to create scrolling text in HTML. The text can scroll horizontally from left to right or right to left, or vertically from top to bottom or bottom to top.
What is an example of a slider? ›A slider is a term that refers to a slideshow on a website. An example of a slider can be a revolving carousel that displays products or photos. Web designers can incorporate sliders into all kinds of sites, but they are most useful for businesses wanting to show relevant content or showcase professional portfolios.
What is carousel in HTML and CSS? ›The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.
What is Owl carousel in CSS? ›
OWL Carousel is a touch enabled jQuery plugin that lets you create beautiful responsive carousel sliders.
How to link JavaScript to HTML and CSS? ›To link a CSS file with your HTML file, you have to write the next script on your HTML file inside the head tag. To link a Js file with your HTML, you only have to add the source of the script inside the body tag or outside; it doesn't matter.
How to create an image gallery using HTML and CSS? ›- Create a new file called "index. ...
- Inside this file, add the basic HTML code structure: <! ...
- Create a subfolder called "images". ...
- In your HTML file, add a div for the image gallery: <div id="image-gallery">
To link a CSS file with your HTML file, you have to write the next script on your HTML file inside the head tag. To link a Js file with your HTML, you only have to add the source of the script inside the body tag or outside; it doesn't matter.
How do I make HTML and CSS work together? ›In order to make use of the CSS capabilities it needs to be linked within the HTML content so that style can be added to the website. CSS will tell the browser how to display the existing HTML. CSS can be compared to adding personal style to the body. When you link CSS to HTML, it's like dressing up the body.