The HTML Presentation Framework

Created by Hakim El Hattab and contributors

image presentation js

Hello There

reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do.

Vertical Slides

Slides can be nested inside of each other.

Use the Space key to navigate through all slides.

Down arrow

Basement Level 1

Nested slides are useful for adding additional detail underneath a high level horizontal slide.

Basement Level 2

That's it, time to go back up.

Up arrow

Not a coder? Not a problem. There's a fully-featured visual editor for authoring these, try it out at https://slides.com .

Pretty Code

Code syntax highlighting courtesy of highlight.js .

Even Prettier Animations

Point of view.

Press ESC to enter the slide overview.

Hold down the alt key ( ctrl in Linux) and click on any element to zoom towards it using zoom.js . Click again to zoom back out.

(NOTE: Use ctrl + click in Linux.)

Auto-Animate

Automatically animate matching elements across slides with Auto-Animate .

Touch Optimized

Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides.

Add the r-fit-text class to auto-size text

Hit the next arrow...

... to step through ...

... a fragmented slide.

Fragment Styles

There's different types of fragments, like:

fade-right, up, down, left

fade-in-then-out

fade-in-then-semi-out

Highlight red blue green

Transition Styles

You can select from different transitions, like: None - Fade - Slide - Convex - Concave - Zoom

Slide Backgrounds

Set data-background="#dddddd" on a slide to change the background color. All CSS color formats are supported.

Image Backgrounds

Tiled backgrounds, video backgrounds, ... and gifs, background transitions.

Different background transitions are available via the backgroundTransition option. This one's called "zoom".

You can override background transitions per-slide.

Iframe Backgrounds

Since reveal.js runs on the web, you can easily embed other web content. Try interacting with the page in the background.

Marvelous List

  • No order here

Fantastic Ordered List

  • One is smaller than...
  • Two is smaller than...

Tabular Tables

Clever quotes.

These guys come in two forms, inline: The nice thing about standards is that there are so many to choose from and block:

“For years there has been a theory that millions of monkeys typing at random on millions of typewriters would reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.”

Intergalactic Interconnections

You can link between slides internally, like this .

Speaker View

There's a speaker view . It includes a timer, preview of the upcoming slide as well as your speaker notes.

Press the S key to try it out.

Export to PDF

Presentations can be exported to PDF , here's an example:

Global State

Set data-state="something" on a slide and "something" will be added as a class to the document element when the slide is open. This lets you apply broader style changes, like switching the page background.

State Events

Additionally custom events can be triggered on a per slide basis by binding to the data-state name.

Take a Moment

Press B or . on your keyboard to pause the presentation. This is helpful when you're on stage and want to take distracting slides off the screen.

  • Right-to-left support
  • Extensive JavaScript API
  • Auto-progression
  • Parallax backgrounds
  • Custom keyboard bindings

- Try the online editor - Source code & documentation

Create Stunning Presentations on the Web

reveal.js is an open source HTML presentation framework. It's a tool that enables anyone with a web browser to create fully-featured and beautiful presentations for free.

Presentations made with reveal.js are built on open web technologies. That means anything you can do on the web, you can do in your presentation. Change styles with CSS, include an external web page using an <iframe> or add your own custom behavior using our JavaScript API .

The framework comes with a broad range of features including nested slides , Markdown support , Auto-Animate , PDF export , speaker notes , LaTeX support and syntax highlighted code .

Ready to Get Started?

It only takes a minute to get set up. Learn how to create your first presentation in the installation instructions !

Online Editor

If you want the benefits of reveal.js without having to write HTML or Markdown try https://slides.com . It's a fully-featured visual editor and platform for reveal.js, by the same creator.

Supporting reveal.js

This project was started and is maintained by @hakimel with the help of many contributions from the community . The best way to support the project is to become a paying member of Slides.com —the reveal.js presentation platform that Hakim is building.

image presentation js

Slides.com — the reveal.js presentation editor.

Become a reveal.js pro in the official video course.

  • WordPress Theme
  • Plugin Elementor
  • Plugin Gutenberg

In This Article

Create the structure for the image slider with html, putting images into the javascript image slideshows, add breadcrumbs to the javascript images slideshow, putting the javascript into the image slideshows, the final product, related articles, javascript image slider [ how to build one ].

Warren Davies Avatar

Updated on: February 08, 2024

How can you make a JavaScript image slider from the scratch? How do JavaScript image slideshows really work? Do we really need JavaScript for carousels nowadays? CSS has come a long way, and it’s actually possible to make a pretty decent slider with pure CSS .

However, you’re still very limited in what you can do with CSS alone, so if you want something more complex, you’ll need to build your image slider using JavaScript.

But then your next question becomes, how to build one? Well fear not my friend, because by the end of this post you’ll know how to build an image slider in JavaScript -source code provided!-, including navigation buttons and breadcrumbs.

Let’s do it!

First, we’ll have to create the basic structure for the image slider. The html for our image slider will look like this:

So, container is just the element that contains the future JavaScript images slideshow. This can be absolutely any part of your site, but I’ve just gone for a simple flexbox:

Next is the main slider element. This will hold the image slides and the navigation elements:

You can adjust the size in any way that floats your boat – just make sure there’s a position property applied to it.

We also have a container div for the slides, slider__slides and four slider__slide elements, which I’ve styled like this:

Now, here’s where it gets a little interesting. Setting padding-top to a percentage in slider__slides will maintain its aspect ratio.

The the slides themselves are positioned absolutely, top and left are both 0 , while width and height are both 100% .

This means that each slide will completely fill the first parent element that has a position property applied to it (that’s why I said make sure you do that to the slider element).

This also means that the four slides are stacked directly on top of each other. Notice that I’ve set the opacity of each slide to 0 – this makes them transparent. But the .slider__slide.active part means that any element which has both the slider__slide and active classes will have an opacity of 1 – making the active slide visible.

Here’s what that gives us:

As expected, we can only see slide 1 at the moment, with its pale yellow ( lemonchiffon , to be precise) background. Now let’s add the images…

There are a few ways to make an image slider in JavaScript.

One is to add the images using the css background property, and have a separate class for each image. Another way is to have just have one slide, and change it’s background image directly with JS.

However, the approach we’ll take here is to use an img element inside each slide, like this:

I’ve added one image for each slide, but we can still only see the first image, the one with the active class:

So now let’s add the navigation elements so people can cycle through the images on the slider.

Add Forwards and Backwards Buttons to the JavaScript Image Slider

Users look for navigation buttons at the far left and right edges of sliders – so that’s where we’ll put them!

First let’s add these elements to the markup, inside slider , but below slider__slides :

As well as the slider__nav-button class, each button has a unique id – as we’re making our image slider using JavaScript, we’ll need these IDs so that we can select these elements within our JS code.

You can style your buttons however you want, of course. Personally, I’m just gonna keep it simple with a grey box. Hey – sometimes the simple option is the best:

I’ve set opacity to .8 , so the buttons will be a little transparent and won’t fully block whatever is behind them. And since we want these to be clickable we need cursor: pointer so that the user knows they can click it.

Now, because these two buttons are at different sides of the slider, we’ll need to use slightly different CSS to position each one. We can use the id s for that:

Setting top to 50% will put the top of the element halfway down the parent. So it won’t be perfectly centered vertically – it’ll be a little lower than it should be.

The solution is to also add transform: translateY(-50%); . When you translate by a percentage, you move the element by a proportion of its own size . So -50% will perfectly center the button, not matter what its height happens to be. Pretty nice trick!

Adding Arrows To The Navigation Buttons With CSS

At the moment our navigation buttons are just grey boxes – we should indicate that these are buttons somehow. There are loads of ways of doing this – you could use an image of an arrow, an SVG, or even just write “Prev” and “Next”. But here’s another way:

This uses the after pseudoelement, which means we can add it to the JavaScript images slideshow without having to add anymore html. It creates a box with a solid white border along only its right and bottom edges.

All we need to do now, is rotate the boxes so that the borders look like arrows, and use ‘translate’ to make sure they’re centred within the button:

And let’s also add a media query to shrink these buttons a bit on smaller screens:

If we put all this togther, here’s what we get:

Okay, it’s starting to look like a slider! Moving on…

Breadcrumbs (or navigation dots, bullets or whatever else you want to call them) are actually pretty easy to add. First let’s update our HTML once again:

Now we have a slider__nav element, which contains four slider__navlink divs – one for each slide. The first one has an active class added to it also, which we can use to make the active breadcrumb stand out from the rest.

Traditionally, breadcrumbs like these go at the bottom of a slider:

We’ve put the container for the breadcrumbs 3% away from the bottom of the image slider, and used the same centering trick we used with the buttons, only this time horizontally. Now for the breadcrumbs themselves:

Pretty simple stuff here – just using border-radius to make them circles, and setting the background colour to white on the active slide. The rest are filled in with the same grey used in the buttons.

Here’s what we get:

We’re almost there – we just need to make these buttons actually do something! We’ll be using JavaScript for that.

First, let’s make it easy to deal with our slides and breadcrumbs using JS:

The first line goes through our markup, finds every element called slider__slide , and stores a pointer to it in an array called slides . The next line does the same for our breadcrumb elements, this time putting them in an array called navlinks .

We also need to keep track of which slide is currently active, so lets make a variable for that:

I’ve set this to 0 because as you may know, in JavaScript arrays are indexed from 0, not 1. So our first slide is in slides[0] , the second is in slides[1] , and so on.

Now we need to add event listeners to each of our buttons:

When a user clicks one of these buttons, our image slider JavaScript source code will call a function called changeSlide (which we’ll create in a minute), and pass an argument – currentSlide + 1 for the forwards button, and currentSlide - 1 for the backwards one. That lets us know which slide the user is trying to move to, so we can put the active class onto that slide, and take it off of the current slide.

As you can see here, I’ve wrapped the function call within an anonymous function – this is necessary when you want to pass an argument using an event listener. For example, this doesn’t work:

So that’s why you have to put the function call within the () => { } block.

Creating the JavaScript Function That Will Change The Slide

Here’s what the changeSlide() function looks like:

Let’s break this down step-by-step:

  • changeSlide takes one argument, moveTo , which is the number of the slide you want to change to.
  • The first line checks if moveTo is equal to or greater than slides.length – that would mean we’re on the final slide, and trying to move forward. In this case, we’ll set moveTo to 0 – which will take us back to the first slide.
  • The next line does the same if the user tries to go backwards from the first slide – we’ll just loop them to the final slide
  • The next four lines use the slides and navlinks arrays we created earlier. By using classList.toggle("active") , our code will remove the active class from the current slide, and add it to the one we’re trying to move to.
  • Finally, we set currentSlide to equal moveTo , since that’s the active slide now.

As you might remember from earlier, we added transition: 1s to our slider__slides element. This means that the change in opacity that is triggered when we add or remove the active class take 1 second to complete – giving a nice fade-in effect.

But before we look at the end result there’s just one more thing we need to do…

Making The Breadcrumbs Clickable

Picture of Columbo advising you to make your breadcrumbs clickable

Ever tried to click something, that you thought was clickable, but it turned out not to be clickable? Remember that feeling of disappointment that swelled up in your gut? Let’s not do that to our users! Let’s make it easy for them to jump from one slide to another by clicking the breadcrumbs:

Here we’ve used querySelectorAll to grab all of the slider__navlink elements, and then we’re using forEach to loop through them.

So on the first loop, bullet will point to the first slide, and bulletIndex will equal 0. On the next loop, bullet will point to the second slide, and bulletIndex will equals 1. And so on.

The idea is, if they click a button, we know they want to change to slide bulletIndex – so we can just pass that value to our funtion with changeSlide(bulletIndex) .

However, we’d better first check if they are already on slide bulletIndex . There’s no point fading out and then back in to the same slide. So the if statement ensures we’ll only call changeSlide , if currentSlide does not equal bulletIndex .

OK we’re done! Below you can see what we ended up with.

Can you guess which famous video game series these images are a tip of the hat to?

  • 100 points if you can guess just from the first image
  • 75 points if you guess on the second image
  • 30 points if you get it on the third image
  • 10 points if you need all four images to figure it out
  • 0 points if you don’t know

Of course, we’ve only scractched the surface of what’s possible when creating an image slider using JavaScript. You have a good framework here that you can experiment with. You can change the shape, style, and position of these elements however you need, and of course, you can play around with different transitions when moving between slides.

But if you want to make something that’s not only visually slick but super-performant too, why reinvent the wheel? Take a look at fullPage.js and see if it’s the tool for you.

As the name implies fullPage.js helps you create fullscreen scrolling websites. You get a range of different effects that will impress your visitors, it’s really easy to set up, and it works with other frameworks and CMSs including React and WordPress.

Check it out!

  • Create a Slider with pure CSS
  • News Slider – Examples For Inspiration
  • Top 16 Webflow Sliders
  • Top 10 WordPress Slider Plugins
  • What is a slider?

Warren Davies

Warren Davies

Warren Davies is a front end developer based in the UK. You can find more from him at https://warrendavies.net

More on the Topic

web2 vs web3 share

A project by Alvaro Trigo

How TO - Slideshow

Learn how to create a responsive slideshow with CSS and JavaScript.

Slideshow / Carousel

A slideshow is used to cycle through elements:

image presentation js

Try it Yourself »

Create A Slideshow

Step 1) add html:, step 2) add css:.

Style the next and previous buttons, the caption text and the dots:

Advertisement

Step 3) Add JavaScript:

Automatic slideshow.

To display an automatic slideshow, use the following code:

Multiple Slideshows

Tip: Also check out How To - Slideshow Gallery and How To - Lightbox .

Get Certified

COLOR PICKER

colorpicker

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

[email protected]

Top Tutorials

Top references, top examples, get certified.

How to Build a Responsive Image Slider with Html, CSS and JavaScript: Step-by-Step Guide

Updated on: Nov 3, 2023

16 mins read

How to Build a Responsive Image Slider with Html, CSS and JavaScript: Step-by-Step Guide

Prerequisites

I am going to assume that you are already familiar with using Html, CSS, and JavaScript and also have a basic understanding of how JavaScript DOM Manipulation works. With that on hand, let's get coding.

Project Code and Live Demo :

You can access all the project code on my GitHub repository . Additionally, explore the live demo to interact with the finished projects.

What is an Image Slider?

An image slider is a type of slideshow that displays a series of images in a horizontal or vertical arrangement. The images are displayed one after another, with a transition effect between each image. The images can be cycled through, and the user can navigate through the images using a set of navigation controls.

Other configurations can also be added to the slider like autoplay, pause on hover, zoom in and out, etc. But in this article, we will only focus on the basic configuration of the slider. And as a bonus, we will add a modal to the slider which will display the image in full size.

There are a number of image slider libraries out there that you can use to build an image slider. But in this article, we are going to build one from scratch using vanilla JavaScript. We will also be using minimal CSS to style our slider.

Building an image slider from scratch will help us understand how it works and also help us to be able to customize it to our taste. It will also help us to be able to build one from scratch without having to rely on a library.

How to Build an Image Slider with Html, CSS and JavaScript

We are going to build a simple image slider that displays a set of images one at a time. The user will be able to navigate between images using next and previous buttons. We will also add a paragraph to display the current image number and total image number.

Going into our favourite code editor, (I will be using VsCode), create 3 files called index.html , style.css and script.js , and a folder called img which will hold our images. (You can find all the images used in this tutorial here .) Now in your index.html file, copy the following code:

From the code above you can see that we have created a container called slider and inside it we have created an image called slide-image and a paragraph with two spans. We also created a previous button called backward and a next button called forward .

In our paragraph, the first span called slide-image-number will display the number or position of the image that is currently being displayed and the second span called total-image-number will display the total number of images that are in the slider.

The previous and next buttons as the name suggests are used to navigate back and forth through the images. I am using Google icons for the buttons. You can check it out here .

Viewed in the browser, our slider looks like this:

Image slider built with only Html

Now let's add some styling to it. In our style.css file, copy the following code:

It should now look like this:

Image slider built with Html and CSS

At the moment, our slider is only showing one image. To add more images to the slider and be able to navigate through the images, we need to do that dynamically using JavaScript. So let's add some JavaScript to our script.js file.

We created variables called image , imageNumber , totalImageNumber , prevBtn and nextBtn . We also created an array called images which will hold all the images that we want to display in the slider.

Next, we created a variable called currentImage which will hold the index of the image in the array that is currently being displayed. This index will change when we click on our previous and next buttons which in turn changes the image that is being viewed as you will soon see.

We then wrote a function called showImage that sets our image src to be the first on the list in the array using currentImage which is initially equal to 0. We also set the contents of both the imageNumber and the totalImageNumber to be 1 and 4 which is the total number of images in the array respectively.

We then added an event listener to the window which will run the function showImage when the webpage loads. Thus, letting the user view the first image in the array.

To confirm that our javascript code is working, let's go back into our index.html file and remove the values from our img src and spans.

Refreshing the browser, our slider still looks the same.

Image slider built with HTML, CSS and JavaScript

Let's add some functionality to our buttons.

On our next button, we added an event listener called click and added a function which sets the currentImage value to the index of the next image.

We, first of all, increase the value of currentImage by 1 using the ++ operator. Then we check if the value of currentImage is greater than the length of the array minus 1. If it is, we set the value of currentImage to 0. If it isn't, we leave it as it is. This is because we want to loop back to the first image in the array. We then call the function showImage with the currentImage value as an argument. This will display the next image in the array.

On our previous button, we added an event listener called click and added a function which sets the currentImage value to the index of the previous image.

We first of all decrease the value of currentImage by 1 using the -- operator. Then we check if the value of currentImage is less than 0. If it is, we set the value of currentImage to the length of the array minus 1. If it isn't, we leave it as it is. This is because we want to loop back to the last image in the array. We then call the function showImage with the currentImage value as an argument. This will display the previous image in the array.

Going back to our browser, let's see if our navigation buttons are working.

Our buttons are now working and as you can see, we have built a slider that can display images in a slideshow and can also navigate through the images using the previous and next buttons.

Remember I said at the beginning of the article that I will be adding a bonus part to this article. We have come to that part. Yes, I am also going to add a modal to the slider. So that when the user clicks on any image, a modal will appear with the image that was clicked on. and the user will still be able to navigate through the images. Let's continue with the bonus part.

Adding a Modal to an Image Slider

It's quite simple really, and we can do it in a couple of lines of code along with some reusable code. First let's add a modal to our slider in our index.html file.

From the code above, we can see that we created a container called modal . We also created a container called modal-content which will hold our slider. We then duplicated the slider container into the modal content container. A span called close-modal was also added to be used to close the modal. Let's add some CSS to style our modal and its content.

Currently, our modal is not visible. We have to write some Javascript code to make it visible. We also need to refactor our code to accommodate the modal.

Refactoring our variables

We refactored our image , imageNumber , totalImageNumber , prevBtn , nextBtn , using querySelectorAll instead of querySelector. This is so that we can also target them in our modal content container also. We also added a variable called modal which is the modal container. And a variable called closeBtn which is the close modal button.

Refactoring our showImage function

We also refactored our showImage function. We added a for loop to loop through all the images. An event listener was also added to each image so that when the user clicks on an image, we display the modal.

A for loop was also added to loop through all the image numbers and the total image numbers so as to set the correct image number and total image number on both sliders.

Therefore, when the function is called, it not only runs on our image slider, it runs on the slider inside the modal as well.

Let's refactor our navigation buttons.

Refactoring our previous and next button functions

So the for loop is also added to loop through all the next buttons and the prev buttons. And the event listener is added to each button.

Let's write some more code to close the modal.

An event listener is added to the close modal button. When the user clicks on the button, the modal will be closed.

Now let's test our code.

Everything is working fine. Yay!

Our image slider is working perfectly along with the navigation buttons. When we click on any of the images, the modal will be displayed with the enlarged image that was currently clicked on. We can also navigate through the images using the next and prev buttons as well.

We can also close the modal by clicking on the close modal button. When we close the modal, the image slider will be back to its original state showing the image that we were currently on before closing the modal.

We have seen how easy it is to build an image slider built with minimal CSS and vanilla Javascript code.

We also added simple navigation buttons to help us navigate through the images and added a paragraph to display the current image number and total image number.

We also saw how easy it is to create a modal that can be opened by clicking on any of the images and can be closed by clicking on the close modal button.

We also made the images in the slider and modal correspond to each other irrespective of each other or where they are being viewed.

We not only learnt how to build a slider, we learnt how to build a modal as well.

And that's the end of this tutorial. I hope you liked it. If you have any questions or comments, please feel free to send me a dm or contact me via the links below.

Till next time guys, Byeee!

  • View the code on GitHub here
  • View the project here
  • Javascript HTMl DOM

Connect With Me

Follow me on X(Twitter) , LinkedIn , and Instagram to stay updated with my latest content.

If you like my notes and want to support me, you can sponsor me on GitHub Sponsor, or you can buy me a virtual coffee on ByMeACoffee or Selar . I love the taste of coffee. 😍

For other ways to support me, visit my Sponsorship page or Affiliate Links page .

Frequently Asked Questions

An image slider is a type of slideshow that displays a series of images in a horizontal or vertical arrangement. The images are shown one after another with transition effects between each image. Image sliders are commonly used on websites to showcase multiple images in a visually appealing manner.

A vertical slider in JavaScript refers to an image slider or carousel that displays images in a vertical orientation, allowing users to navigate through the images by moving them up or down. This is achieved through JavaScript programming to handle the transition and user interactions for the vertical slider.

There could be various reasons why your Swiper JS grid is not working. Check if you have correctly implemented the Swiper JS library, and ensure that your HTML and JavaScript code is set up properly. Verify that the Swiper container and grid elements are structured correctly and that there are no errors in the console. Additionally, make sure you have the latest version of Swiper JS and consult the documentation for troubleshooting.

A JavaScript slideshow is a dynamic presentation of images or content that automatically transitions between slides. It is created using JavaScript to control the timing and animation of the slides. JavaScript slideshows are commonly used on websites to highlight multiple images or pieces of information in a sequential manner.

Yes, there are several image slider libraries available. Some popular ones include SwiperJs , Slick , Glide , and Flickity . These libraries provide pre-built components and functionalities to easily implement and customize image sliders on websites. Choosing a library depends on your specific requirements and design preferences.

  • Create HTML structure for the slider, including container, images, and navigation buttons.
  • Add CSS styles for layout and appearance.
  • Use JavaScript to handle user interactions and manage image transitions.
  • Implement functions for next and previous buttons to navigate through the images.
  • Optional: Enhance the slider with additional features like autoplay, pause on hover, etc.

To add autoplay to your JavaScript image slider, you can use the setInterval() function in JavaScript to automatically trigger the transition to the next image at regular intervals. Create a function that updates the current image index and calls the showImage function. Start the autoplay when the page loads, and you can also include controls to pause or resume the autoplay based on user interactions.

Optimizing image sliders for performance involves several best practices. Use appropriately sized images to reduce loading times, implement lazy loading to load images only when they are about to be displayed, minimize the use of large image files, and utilize responsive design to ensure a seamless experience on various devices. Additionally, consider optimizing JavaScript code for efficient image transitions and minimize unnecessary animations.

Yes, you can integrate a JavaScript image slider with CMS platforms like WordPress. One common approach is to create a custom HTML, CSS, and JavaScript slider and then embed it within WordPress pages or posts. Alternatively, you can explore WordPress plugins that provide customizable sliders, or you can develop a custom WordPress theme with integrated slider functionality.

Handling responsive design in a JavaScript image slider involves ensuring that the slider adapts to different screen sizes and devices. Use CSS media queries to adjust the layout and styling based on the screen width. Additionally, make sure that the JavaScript code accounts for changes in dimensions and provides a seamless user experience across various devices, such as smartphones, tablets, and desktops.

Discover your path in tech! Access free ebooks, courses, articles, & tools. From coding to no-code, Tech Roadmap fuels your journey. Start or switch careers effortlessly.

Discover your path in tech! Access free ebooks, courses, articles, & tools. From coding to no-code, Tech Roadmap fuels your journey. Start or switch careers effortlessly.

Subscribe to my newsletter 💌

Never miss a beat! Stay updated with my latest tech tutorials, code snippets, how-to guides, productivity tips, personal projects and experiences, and more! 💻📚✨

Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome , Safari or Firefox browser.

impress.js *

It’s a presentation tool inspired by the idea behind prezi.com and based on the power of CSS3 transforms and transitions in modern browsers.

visualize your big thoughts

and tiny ideas

by positioning , rotating and scaling them on an infinite canvas

the only limit is your imagination

want to know more?

one more thing...

have you noticed it’s in 3D * ?

Use a spacebar or arrow keys to navigate. Press 'P' to launch speaker console.

Create Incredible Web Presentations with Reveal.js

Gabriel Delight

Feb 24, 2023 · 12 min read

Create Incredible Web Presentations with Reveal.js

Reveal.js is an open-source HTML presentation framework. Anyone with a web browser can use it to make attractive presentations for free. The program allows anyone with a web browser to create fully-featured and interactive presentations that support CSS 3D transforms , nested slides, and a variety of other capabilities. It is recommended for those interested in programmable techniques and web technology.

It has lots of benefits. Some of these consist of the following:

  • Responsive design: Reveal.js presentations scale to fit the user’s screen, making them compatible with a wide range of devices.
  • Interactive elements: Reveal.js supports these elements, which can improve user experience and make presentations more interesting. Interactive elements include links, images, and videos.
  • Themes can be readily modified to reflect the user’s brand or tastes to make a presentation look more attractive when the theme matches the content in a slide.
  • Simple and intuitive user interface: Reveal.js enables users to build and edit presentations with minimal technical expertise.
  • Open-source: Reveal.js is free to use, and its source code is available for users to examine and edit.

React Reveal vs. Reveal.js: what’s the difference?

The distinction between React Reveal and Reveal.js will be demonstrated in this section:

  • HTML, CSS, and JavaScript are the foundations on which Reveal.js is constructed, but React Reveal requires React.
  • Reveal.js is the way to go if you want to make static presentations and need to deal with a vanilla JavaScript-based project. React Reveal is the greatest option for creating interactive presentations if you are working with React.
  • You can make interactive slides with Reveal.js, which has a number of features like slides and transitions. You can also make interactive slides with React Reveal, but you can also do so while using React components .
  • Additional capabilities offered by React Reveal include a higher degree of customization and support for animations.

Alternatives to Reveal.js

Many Reveal.js alternatives may be utilized to make engaging presentations with eye-catching visuals. Several well-liked choices include:

  • Impress.js , a JavaScript library that enables the creation of 3D presentations with a range of transitional effects.
  • Prezi : An online presentation tool that lets users zoom in and out of slides to make dynamic, interactive presentations.
  • PhotoSwipe : An open-source JavaScript picture gallery and lightbox, PhotoSwipe. It is modular, independent of frameworks, and made for desktop and mobile devices.
  • Owl Carousel 2 : Owl Carousel 2 is a jQuery carousel plugin with full customization and touch and drag functionality.
  • FlexSlider is a fantastic, totally responsive jQuery slider plugin. It offers designers and developers a quick way to launch a slideshow, carousel, or image slider.
  • Keynote : Apple’s PowerPoint-like presentation software for Mac and iOS devices.
  • Haiku Deck : A web-based application that enables users to design minimalistic presentations with spectacular visual effects.

Getting Started

In this session, we’ll use Reveal.js to create spectacular presentations by utilizing JavaScript. In this section, we’ll learn everything we need to know to get Reveal.js running on our project. To write code to create stunning presentations, let’s first understand the basic setup and installations before using Reveal.

Installations

The best way to install Reveal.js is to clone the source code on GitHub. Utilizing this is extremely simple for you. Just use the code below in your terminal to clone the GitHub repository.

Run the following command to install all the necessary packages and start Reveal.js after you’ve cloned the repository for it in your working directory.

Furthermore, once Reveal.js has been successfully installed in your project, you must start the Reveal.js server on port 8000 (the default port) by executing the following code:

Please use the code below if you decide to run the Reveal.js server on a different port:

You can easily install Reveal.js manually using npm or yarn if you don’t want to clone the GitHub repository:

You may easily include the Reveal.js file as an ES6 module once it has been installed in your front-end framework, such as React:

Folder Structure

This section will go over Reveal.js’ folder structure. When changes are made, the folder structure might change, but this won’t affect how Reveal.js is utilized in our project.

Since we are not the original developers, we won’t be explaining every file in Reveal.js. I’ll go over the most significant directories and files first:

  • CSS files that describe how a presentation should appear and be organized are stored in the CSS folder.
  • The JS folder houses the JS files that provide interaction and other functionality.
  • The presentation begins with a file called index.html that also contains the HTML markup for the slides.
  • A reveal.js file contains reveal.js’ setup parameters.

Reveal.js’s folder structure is shown in the image below:

-

As you can see in the screenshot above, I installed Reveal.js in the opened terminal and launched it by typing npm start .

Starter Template

The starter template is just what is loaded in the index.html page of the Reveal.js folder structure, which we mentioned in the section labeled “Folder Structure” above.

Launch your browser and navigate to the following URLs: http://localhost:8000 The link takes you to the active running page where our presentations will appear in the browser:

This section will concentrate on the contents of Reveal.js. On Reveal Web Presentation, the contents are the components of a responsive presentation. We can use Reveal.js on any project once we have worked with all the components that go into making responsive, stunning presentations, covering Markup, Markdown, Backgrounds, Media, Code Math, Fragments, Links, and Layout.

Markup is the first step in getting started with Reveal.js, and you must use the section element to build markups in Reveal.js. Please remember that the parent class will have the class name . reveal , and the reveal class div will have a child element with the class name .slide . If you place the section element line by line, as in the code below, you will have a slider that moves horizontally.

To make a vertically moving slide, add sections within a section; this is a simple technique; see the code below:

Just use the up and down arrows to view the previous and next slides.

Please use the code below to add a horizontal and vertical sliding format. It’s really simple; the horizontal section of our code will stand alone and not be inside of any section; however, the vertical section will have sections inside of a section.

Backgrounds

It’s simple to add a background color to a slider in Reveal.js; all you have to do is include an attribute that initializes the color for a specific area. You can use the data-background-color attribute to add a background color to a section and specify the value to any color name you choose. View a responsible slider with background colors by referring to the code and outputs below.

Click here to read more about background colors in Reveal.js.

In Reveal.js, media can be used as a presentation. We’ll be showing a video as a presentation in this section. The data-autoplay autoplay attribute must be included in the video tag as an attribute to make the video play when its slide section is open. Code:

You can present codes on the slide and have the code highlighted using Reveal.js. Highlight.js is the only thing that powers the code highlight. You will always use the <code> element when presenting code in Reveal.js, and all you need to do to make HTML escape the default behavior and treat the content as genuine code. Add the data-line-numbers attribute to the <code> element and specify values that will represent the line of code that will be highlighted, as shown below.

-

In Reveal.js, mathematical expressions can be displayed. To use math in your presentation, you must include the RevealMath.KaTeX plugin, which will reflect the math in your presentation.

Let’s run The Lorenz Equations as a presentation:

The Lorenz equations are a set of partial differential equations that describe two-dimensional fluid flow. Please click here to learn more.

On a slide, fragments are utilized to draw attention to or gradually reveal specific parts. Before moving on to the next slide, each element with the class fragment will be stepped through.

Please include the data-fragment-index attribute and set its value to a number if you wish to use fragments. The number value indexed 1 will appear first, followed by the number 2, in that order.

Session Replay for Developers

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — an open-source session replay suite for developers. It can be self-hosted in minutes, giving you complete control over your customer data

Happy debugging! Try using OpenReplay today.

While watching slides, Reveal.js also simplified things for us. The following slide in a presentation can be easily reached by clicking a link , and the previous slide can likewise be reached by doing the same.

If you want to navigate to a slider, be sure that the portion of the slider you are visiting has an Id that matches the value of the “href” attribute on the HTML anchor element that is now being clicked.

To instantly navigate to the first page of the slide without passing through any intermediary sections, add ”#/0” (0 == first-slide) to the clickable link that will take you to the first page of the slide.

This section will go over the layout in Reveal.js. You can change the text size, and you can also construct a slide by showing an item on top of the previous item; this is known as staking.

Let’s practice stacking by simply laying images on top of one another.

-

Now that we understand how stacking works, let’s spend some time working with FIT TEXT. We’ll display some text in a responsive large format in this part under layout by simply utilizing the class name r-fit-text. Below is a code sample of big text applied to Session Replay:

Please note that you can move forward and backward with the arrow keys.

Customization

In this section, we’ll customize some of Reveal.js’s presentations, focusing on Themes and Transitions, the two most significant things to consider while working with Reveal.js.

Theming is essential for creating anything on the internet. In Reveal.js, you can integrate some theme collections supplied by Reveal.js developers.

To use a theme of your choice, import the theme’s CSS styles into your project. The default theme is black when you install reveal.js or clone the Reveal.js repository. A line of code for incorporating a theme into your project is provided below:

Look closely at the code above; you can see where I wrote theme-name ; please replace it with any of the theme names listed below:

  • Black (default)

Below, I used a theme name titled sky on a slide:

Utilizing the dracula theme produces the theme below:

Now that we’ve learned more about theming , I’d like you to experiment with different theme names to see how they look on your web presentation slide.

Transitions

Reveal.js provides us with some amazing transition effects to use while making a presentation on the web. It is quite simple to use these transition effects , and some of these transition effects include:

-

To use these effects, insert a data-transition attribute into your HTML element and set the attribute’s value to the name of the transition effect listed above.

That’s all for transitions in this section; if you want to learn more about Reveal.js transitions, please click here .

We’ll go through presentation features in Reveal.js, such as vertical slides and auto-slide in this section, and since we’ve already covered the implementation largely on vertical slides, we’ll go over more in depth. Let’s get started.

Vertical Slides

Moving between slides by default employs a horizontal sliding transition. These horizontal slides are the main or top-level slides in your presentation. We can’t rely on just one direction in a presentation, and the usage of presenting on slide vertically is critical. We learned how to design a slide that uses vertical direction earlier in this article.

Below is a code sample on utilizing vertical slides:

Auto-Animate

Reveal.js supports auto animation . The auto animate plays a vital role in web presentation. Auto animation applies smooth transition to a slide content, which is noticeable when viewing a presentation. For example, when you set margin-top: 40px to a section, you will see the smooth animation on how the second section comes down slowly. We’ll be implementing some examples here in this section.

To initiate the auto-animate to a section, add the data-auto-animate attribute to the two or multiple sections you want to integrate the auto-animate effect.

The code output above shows that we added margin-top: 100px to the section child (h1) using data-auto-animate , and you can see the effect applied smoothly and removing the default slide horizontal direction to a slightly vertical direction. Please remember that the element in this example is internally hidden but moved using the margin-top attribute. JavaScript will use a CSS transform to achieve fluid movement. Most CSS attributes may be animated and transitioned using the same technique, allowing you to modify positions, font-size, line-height, color, padding, and margin.

We’ll be working on auto-slide in a slide in this section. This is relatively straightforward to accomplish; simply look at our JavaScript code at the bottom of our HTML page and add the autoSlide duration as an integer and set the Boolean value of a loop to true :

JavaScript:

A play/pause icon can be found in the bottom left corner of the slide, as shown in the output above. A round loader describes the progress of the timing function in the icon. The following code is for the output presentation:

Slide Numbers

Numbering is important in slides, and you may add a slider number in two ways: obtain the current slide number and get the slide number and the overall slide count (X/X).

Set slideNumber to true in the config section at the bottom of the HTML page to obtain the real slide number.

Slide Code:

If you look closely at the output above, you will notice a page number counter in the bottom right corner of the screen. When I reached the vertical part while sliding horizontally, the counter format changed to 3.1, which indicates 3 represents the last horizontal slide page and 1 represents the first vertical slide.

To set a slide number in (X/X) format, set your config to the code below:

Please look closely at the bottom right corner of the screen; you will see the page numbering in X/X format. See the code for the output below:

Please, click here to learn more about slide numbers.

Useful hints and guidelines for Reveal.js

In this section, we’ll discover valuable hints and guidelines for working with Reveal.js, which will greatly improve our experience working with Reveal.js for presentation:

  • Use keyboard shortcuts to navigate through slides: Use arrow keys or the space bar to move ahead and back through slides.
  • Personalize the appearance and feel of your presentation: You can alter the theme, font, and background color of your slides with Reveal.js.
  • To add background images to presentations, use the data-background attribute: You can change a slide’s background image by adding the data-background attribute to the slide’ element.
  • To set the transition effect between slides, use the data-transition attribute: Transition effects such as ‘slide,’ ‘fade,’ ‘convex,’ and ‘concave’ are available.

I hope you enjoyed this article; we covered everything we needed to know to get started with Reveal.js. We also learned about how to use Reveal.js in our project. There are many more features in Reveal.js, and you can learn more by visiting Reveal’s official website . You may also begin integrating presentations into client’s projects or your project by using Reveal.js; this will help you grow your experience utilizing Reveal.js.

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs and track user frustrations. Get complete visibility into your frontend with OpenReplay, the most advanced open-source session replay tool for developers.

Check our GitHub Repo

More articles from OpenReplay Blog

Understanding what AI says

Jan 27, 2024, 5 min read

Understanding how Artificial Intelligence reasons

{post.frontmatter.excerpt}

Learn what's new and exciting about the latest version of NextJS

Jun 8, 2021, 3 min read

Exciting New Features of Next JS v10

Profile

Build and Publish a Presentation with RevealJS and Github

Learn how to build and publish a presentation with RevealJS and Github.

If you've ever given a presentation at a conference, meetup, or even a lunch and learn for your colleagues at work, you probably needed some slides to go along with your talk. The standard tools to make these are Microsoft PowerPoint, Apple Keynote, or Google Slides. These will get the job done, with PowerPoint and Keynote being more feature rich than the free Google Slides.

However, if you're a web developer, there is another option. RevealJS is a JavaScript framework that allows you to leverage your HTML, CSS, and JavaScript skills to build beautiful and polished presentations. Some benefits this has over the standard software packages include being able to use version control (since the presentation is just html, css, and js files rather than a proprietary binary format), collaborate with others, and the sheer joy of using your favorite web technologies and text editor.

This post will walk you through how to get started with RevealJS, build a simple presentation, and publish it to Github Pages so you can share it with the world. If you want a quick "reveal" so to speak, here is the sample presentation we're going to be building and the source .

Getting Started

The build tooling for RevealJS uses Node.js so make sure you have that installed. I like to be on the latest LTS version.

Start by cloning the RevealJS repo from Github, installing the dependencies, then run the dev server:

At this point, you should be able to navigate to http://0.0.0.0:8000 and view the simple presentation that comes with the repo. Use the left/right arrow keys to navigate back and forth, or click on the caret icons displayed on the bottom of the slide. As you navigate the slides, notice the url changes, eg: http://0.0.0.0:8000/#/1 and a blue progress bar animates across the bottom of the page. All these features are configurable as we'll learn later.

Now we're ready to start building the presentation.

Open the demo-presentation project (or whatever you called it in the Getting Started step earlier) in your editor of choice. I'll be using VS Code.

Open the file index.html - this is where you'll be making the majority of changes. The entire presentation is contained in a div with a class of slides , which is contained in another div with a class of reveal . Each <section>content...</section> element denotes a slide.

Right now it looks as follows:

Delete the two <section> elements that came with the repo, and replace them with some content as shown below:

As soon as you save the changes, the presentation should refresh in the browser. The auto-refresh feature is provided by the development server that comes with the project. At this point, there are still two slides but the content has changed. Notice the default styles that get applied for <h1> , <h2> , and <p> elements. Don't worry if you don't exactly like these styles, everything's customizable.

Also notice how everything is centered and pleasing to look at. Try resizing the browser window or use Device Mode in Chrome devtools. Mobile/responsive design is already built into the presentation styles, nice!

Vertical Slides

Generally a presentation progresses linearly from left to right across each slide. But sometimes, the content needs to go off on a tangent, say to explain some point in more detail before moving on with the rest of the presentation. Vertical slides are a great way to organize this type of content. To try this out, nest a <section> element inside another element like this:

Save the changes, then navigate to the third slide in the presentation. Notice there's now a down caret in addition to the left pointing caret. Click it (or press the down arrow), the slides will now start to transition according to the nested <section> elements. This only works one level deep, do not try to nest any deeper. At any point the usual left/right key or arrow navigation still works to move to the previous or next slides.

With a lot of vertical slides, it can be useful to jump out and get a bird's eye view of the entire presentation. To do this, press the o key from any slide. It should look something like this:

Press the esc key to return to regular slide mode.

To add images to the presentation, make an images directory in the project root and place any image(s) you'd like in this directory. Then simply use the standard html <img> tag to display the image centered in the slide, don't forget the alt tag:

Note: The framework is not opinionated about where the images are placed so feel free to name this directory anything you like or even to place the images in project root if there's not too many of them.

Of course you can also simply link to an image from the internet, for example:

Full Screen Background

By default, all the slide content is contained within a portion of the screen to fit any display and scale. But if you want to break outside of this container to use up the entire background, this can be done with the data-background attribute on any <section> element.

For example, to have an animated gif take up the entire slide:

Animate in Visibility

Fragments are used to animate content in a slide, one element at a time. This is useful when you don't want all the content to show up at once. A classic example is a bullet point list where you want to talk to each point one at a time. To add visibility animation to any element, simply add class="fragment" .

For example:

Use the left/right arrow keys to have the elements animate in, or click on the caret icon at the bottom of the presentation.

By default, fragments will animate in the same order that they appear in the DOM. The order can be controlled by adding data-fragment-index to any element that has a class="fragment" . For example, to display a list in reverse order:

The default animation is for elements to fade in. But there are a number of other animations available such as fade up, down, left, right, changing color etc. To use these other effects, add the appropriate class to the fragment. For example:

The RevealJS docs list all the possible fragment animation classes .

The framework comes with a lot of built in styles for headers, paragraphs, lists etc. It's possible to customize any of these by adding the data-state attribute to any <section> element.

The data-state attribute causes the value, in this example my-style to be added as a class on the <body> element. This allows for overriding of the framework styles by using a selector such as .my-style p .

One thing I couldn't find in the docs was where to place custom styles. The quickest way for now is to add a file in the dist dir such as dist/custom.css and then add a link to it in the <head> section of index.html , after all the framework css is loaded:

Now edit custom.css - adding a class for the value in data-state , for example, to make the paragraph text bright pink and pop out:

Speaker Notes

One really helpful feature when giving a talk is the ability to have speaker notes displayed in a separate window from the presentation. RevealJS makes it easy to add these. Add an <aside class="notes"> element anywhere in a <section> element (i.e. slide), then that content will not be displayed in the slide, for example:

From the browser where the presentation is being displayed, press s to reveal the speaker notes in a new browser window. This window also conveniently has a timer, and displays the current and upcoming slide to help keep you on track. It looks something like this:

By now you'll have noticed there's some common styling applied to all the slides such as a black background and blocky white text. These styles come from the black theme stylesheet that is referenced in the head section of index.html :

This can be changed to any of the built-in themes RevealJS comes with, which are listed in the dist/theme directory. To change, simply swap out black.css for any other theme, for example, I like moon theme, which has a dark blue background and thick grey text:

Here's one of the slides from our presentation now with moon theme applied:

It's also possible to create a custom theme .

Slide Transitions

Up until now, we've been dealing with the HTML and CSS. But to further customize the presentation, there's a <script> section at the bottom of index.html where the framework gets initialized. Here you can control many features of how the presentation will behave. For example, by default, the slides transition with a slide animation going from right to left. This can be changed by specifying the transition property of the object passed to the Reveal.initialize function.

For example, to use a convex transition:

Further Customization

Besides slide transitions, many more features of the framework can be controlled through configuration. Just to list a few examples:

Read about all the configuration options in the RevealJS docs.

Publish to Github Pages

It's time to share our presentation with the world. To do this, we'll use Github Pages , which is free static web site hosting provided by Github. In order to do this, we need to create a new git repository with a branch named gh-pages , then create a corresponding repository on Github, and push the project files to this branch.

Start in a terminal at the project root and run the following commands:

Now login to your Github account and create a new repository. At the time of this writing, the new repo menu button is located at the top right of the Github landing page, given that you're logged in:

Make the repository name the same as your project. For example, mine will is demo-presentation . Optionally add a description. Make sure Public option is checked. Leave all the other checkboxes blank because we're going to be pushing up the project files in the next step:

Now, Github will display a page with instructions for how to push your code up, normally you could just copy paste this, but that will create a default main branch. This case is a little different because we want gh-pages branch for static hosting. Run the following replacing yourGithubUserName and your-repo-name :

After the push has completed, go back to Github in your browser and refresh the project page. The code you just pushed should be displayed.

And now, to finally see your presentation published on the web, click on Settings from your repository page:

Then scroll down to the "GitHub Pages" section. It should show something like the following:

Go ahead and click on the "Your site is published at" link. The presentation is now publicly available at that url, which in general will look like https://yourGithubUserName.github.io/your-repo-name/ .

Of course you're not limited to Github Pages for deployment. Since the project is just html, css, and javascript, it can be deployed to any static web site host.

This post has just barely scratched the surface of all the features that RevealJS provides. Checkout the documentation to learn more about it. There's also a rich ecosystem of plugins in case you need some behavior that's not provided by the framework. I hope you'll give this a try next time you're giving a talk and good luck with your presentation!

You may also like...

Find Jira Tickets Faster

Find Jira Tickets Faster

Access Chrome Bookmarks with Keyboard

Access Chrome Bookmarks with Keyboard

View Localhost on Your Phone

View Localhost on Your Phone

How to Build an Image Slider with jQuery

This tutorial will walk you through building an image slider using the jQuery library.

This tutorial will have four parts:

We will be using Bootstrap for this tutorial to keep things looking good, without spending a lot of time.

Our structure will be as follows:

Inside our ul with the class of slides we will have the following:

Inside our .buttons class you should have the following:

Here is an example of what your html should look like:

Note: You should replace the image src attribute with your own content.

We are using Sass and the SCSS syntax so we can nest and use variables

:heart_decoration:

We can use the following SCSS to define our styling:

In the following code snippet, we define variables used later in our code.

We will use a blank variable where we will call the setInterval method:

Animation We will wrap our slider animations inside a function:

We are using the setInterval() native JavaScript method to automate the contents of the function on a time based trigger.

We use the pause variable to see how many milliseconds to wait before calling the function again. Read more on the native setInterval method here: https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval . Inside our function we will use jQuery to fade between slides at the speed of the animationSpeed variable:

We are targeting the first slide using $('.slides > li:first') . - .fadeOut(animationSpeed) will fade the first slide out and then using .next() , we move to the next slide. - Once we have moved to the next slide, we will fade it in: .fadeIn(animationSpeed) . - This sequence will continue until the last slide ( .end() ), then we stop the animation. We will now call the startSlider function to start the animation:

startSlider();

Play and Pause This feature is optional, but quite easy to implement. We will hide the play button, so we don’t see both the play and pause buttons:

We will now create our pause button (automatically shown on page load):

We will call our function every time the pause button is clicked using jQuery. - We will remove the interval using the clearInterval method and using our interval variable as the parameter, indicating which interval to stop. - Because our slider is paused, we will hide the pause button using $(this).hide(); . Note: we are using this , which will refer to what our parent is calling i.e. .pause . - We will then show our play button so the user can resume the animation: $('.play').show(); . The following code sets up our play button (automatically hidden on page load):

$(‘.play’).click(function() { startSlider(); $(this).hide(); $(‘.pause’).show(); });

We will call our function every time the play button is clicked using jQuery.

  • We will start or restart the interval using the startSlider function.
  • Because our slider is currently playing, we will hide the play button using $(this).hide(); . Note: we are using this , which will refer to what our parent is calling i.e. .play .
  • We will then show our pause button so the user can stop the animation at will: $('.pause').show(); .
  • Checkout the source code and example on CodePen for this tutorial.

If this article was helpful, share it .

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

jSlide BETA

javascript image viewer

The slideshow script that anyone can use.

jSlide is a lightweight script that displays image slideshows directly on your existing web page with virtually no assembly required.

You may also be interested in the inline version .

Single Images

Thumb

Start Slide Show »

Thumb

Features View details »

jSlide is installed with one simple file— jslide.js —and just one line to add to the <head> tag of your page. There are no directories or tiny images to upload.

Slides fill the window and cannot be scrolled out of view. There's no waiting for long or distracting animations. Captions fade in with images. During a slideshow, the timer is restarted when the image changes, so manually browsing pictures during a slideshow works seamlessly.

Image sources and caption data are set in your HTML page—no need to edit long Javascript arrays.

Copy the URL in the address bar at any time—it will point to the current image in the slideshow.

Use the arrow keys to move between images, space to play/pause, and Esc to close.

Images are preloaded using CSS in the direction in which a user is viewing an image set. You can customize how far ahead images are preloaded.

Easily turn on/off nearly any feature, and set everything from slide duration and animation speed to colors and the text on buttons.

The script does not conflict with other scripts, and automatically uses HTML class es and id s that do not exist in your web page.

If a user does not have Javascript, images will simply open on a new page. An elegant error message appears if a slide cannot be loaded.

Only 1 file to download! Upload this Javascript file to your server:

jSlide v0.9.1 JS file, 15.2 KB

Click the above file to copy the text directly, or right-click and choose "Save Link As..."

Include jQuery

jSlide requires jQuery to run. If you don't already have jQuery on your page, include the following line in the <head> tag:

<script type="application/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

jSlide has been tested to work with jQuery 1.7.1.

Include jSlide

Include the following line in the <head> tag of your page, after jQuery has been included:

<script type="application/javascript" src="/jslide.js"></script>

Modify the src attribute so that it points to the file you downloaded above.

Activate jSlide

Add rel="jslide" to link tags on your page to activate jSlide:

<a href="image1.jpg" rel="jslide" >image #1</a> <!-- image1.jpg will be displayed when "image #1" is clicked -->

To use a thumbnail image:

<a href="image1.jpg" rel="jslide" ><img src="thumb1.jpg" /></a> <-- image1.jpg will be displayed when thumb1.jpg is clicked. -->

Both the attribute (can be something other than rel ) and the content of the attribute (can be something other than jslide ) can be customized in jslide.js .

Add a title attribute to set captions, or a caption attribute if you don't want the captions to appear as tooltips when you hover over the link.

<a href="image1.jpg" title="description of picture" rel="jslide" >image #1</a> <!-- "description of picture" will appear in the slideshow as the caption for this image. -->

Image Groups

If you have a group of images that you want to be part of the same slideshow, add square brackets in the rel attribute with a group name:

<a href="image1.jpg" rel="jslide[concert]" >image #1</a> <a href="image2.jpg" rel="jslide[concert]" >image #2</a> <a href="image3.jpg" rel="jslide[concert]" >image #3</a>

You can use any combination and number of single images and groups.

Launch Button

Use a link without a href attribute to open the first image.

<a rel="jslide[concert]" >Start Slide Show</a>

You can customize whether to automatically start playing the slideshow when this link is clicked.

A set of easily-editable Javascript variables can be found at the top of jslide.js , along with specific instructions on how to change settings. The following are just some of the features that can be customized:

These settings can be switched on or off.

  • Whether clicking an image moves to next slide
  • Whether the arrow keys can be used to move between images
  • Whether the Esc button exits slide view
  • Whether the spacebar toggles a slideshow
  • Whether the page automatically scrolls to the thumbnail/link of the last viewed slide when exiting slide view
  • Whether timed slideshows are enabled
  • Whether an animated progress bar appears next to the Play/Pause button during a slideshow
  • Whether captions are shown above the image, below the image, or not at all
  • Whether the address bar changes while viewing images (allowing direct links to specific images)
  • Whether small images are stretched to fill the entire screen.
  • Whether clicking blank space around the image closes slide view.
  • Whether clicking directly on a single image or the last image in a set closes slide view
  • Whether the slideshow loops around while viewing image sets and during slideshows

Slideshow Settings

  • Time it takes images to fade in
  • Time spent on each image in timed slideshows
  • How far ahead images are preloaded during slideshows

Follow us on Twitter

Small Flexible Presentation Library – presentr.js

Small Flexible Presentation Library – presentr.js

Description:

presentr.js is a lightweight, zero-dependency JavaScript library for creating a professional presentation on the browser.

The presentation enables the visitor to switch between slides/fragments using arrow keys and touch tap event. Compatible with both desktop and mobile.

See it in action:

How to use it:

Installation.

Import the presentr.

Or directly load the JavaScript ‘presentr.min.js’ into the document.

Add slides, fragments, progressbar to the presentr container.

Initialize the presentation with default options.

Customize the presentation by overriding the default settings as follows:

Event handlers.

API methods.

Available properties.

v1.2.0 (04/20/2020)

  • Simplifications; Fix messed up fragment handling

v1.1.1 (12/26/2019)

  • Refactor state-management

v1.1.0 (12/11/2019)

  • Use the on(event, cb) and off(event, cb) functions to bind / unbind eventlistener.

v1.0.0 (10/08/2019)

  • Add native mobile-support
  • v0.0.3: Add onInit event

CSS Only Presentation Library – slide.css

You Might Be Interested In:

Leave a reply cancel reply.

Making beautiful interactive slides with revealJS

image presentation js

Today I’ll show you how to spice up your presentations with revealJS in R. This is an HTML presentation framework that allows you to share your slides on the web, add custom animations, embed websites into your slides, and more! Here’s an example of a presentation I made for my 2020 Spring Committee Meeting:

This presentation was a lot of fun to make! Here I’ll show you the basics, then I’ll give examples of more advanced stuff you can do.

First, we need to get set up to use revealjs in R. Open RStudio and run the following in your console:

image presentation js

Next, open up a new R markdown document.

image presentation js

Select the HTML output in the pop-up window and give your document a title.

image presentation js

Then modify your header content. To make my slides in the example above, I used this header:

image presentation js

Here’s a breakdown of those parameters:

Output indicates that you want a revealjs output.

Transition sets your slide transitions. You can choose from “default”, “fade”, “slide”, “convex”, “concave”, “zoom” or “none”.

Self contained determines whether dependencies are external or internal. To use plugins this has to be set to false.

Reveal plugins enable plugins including notes, zoom, search, and chalkboard. The notes plugin functions much like presenter mode in Powerpoint.

CSS is your custom styles CSS (cascading style sheet) file. This allows you to add styling to HTML elements, such as font color, add animations, and more.

Center sets all of your slides to center text alignment. You can set the alignment on individual slides as well.

Mathjax enables rendering of LaTeX and MathML equations including special characters like greek symbols. Options include default, local, and NULL.

  • Now, lets add some slides!:

Once your slides are ready, click the Knit button to build the html output and preview your slides!

image presentation js

The code above produces the following slides:

Let’s add some style to the slides. We can add a background color, background image, or embed an html file as the background! Be aware of potential securtiy issues when embedding an external website - you should only do this if you trust the site! Here, I added different types of backgrounds on each slide, including image, video, html, and color:

Note: This example doesn’t include the last slide in the example Rmarkdown above due to file size limits on Github where I host my content.

image presentation js

Add some styling to the h1 element - these are the headers in your slide. Here, I’m changing the font color and adding a cool animation.

image presentation js

This is the Rmarkdown content I used to produce the slide below:

Here’s an example where I used both custom CSS and a custom html header:

I added custom font from Google fonts by creating a new text file called header.html and adding this to the file:

This is the Rmarkdown file I used to produce the slides below:

As you can see, there’s a ton of cool stuff you can do with revealjs! Check out the official documentation for more information, and check out this guide for more info on Rmarkdown.

Congrats on making awesome slides in revealjs! 😎 Feel free to comment below with any comments/questions!

image presentation js

Top 9 JavaScript frameworks to create beautiful presentation slides

Presentation frameworks are tools or libraries that can help you create presentations using web technologies that you are familiar with, such as HTML, CSS, JavaScript, Markdown, Vue, React, and more. You’ll have full control over the appearance and layout of your slides.

They allow you to export your slides as HTML files that can be viewed in any modern browser. You don’t need to install any software or plugin to view your slides. You can also share your slides online using platforms such as Slides.com, GitHub Pages, Netlify.

Reveal ( 64.2k ⭐) — An open source HTML presentation framework that allows you to create beautiful and interactive presentations using web technologies. You can use HTML, CSS, JavaScript, Markdown, LaTeX, and more to create stunning slides with animations, transitions, code highlighting, and other features.

Impress ( 37.3k ⭐) — Another open source HTML presentation framework that is similar to reveal.js, but with a different approach, inspired by the idea behind prezi.com. It uses CSS3 3D transforms to create dynamic and spatial presentations that can zoom, rotate, and pan across the slides.

Sli dev ( 27.3k ⭐) — A web-based slides maker and presenter that is designed for developers. It allows you to create beautiful and interactive presentations using Markdown, HTML, Vue components, and other web technologies. You can also use features such as live coding, recording, drawing, LaTeX, diagrams, icons, and more to enhance your slides.

MDX Deck ( 11.1k ⭐) — A library based on MDX that allows you to create presentations using Markdown and React components. You can write your slides in a single MDX file and separate them with --- . You can also import and use any React component in your slides, as well as customize the theme and layout of your presentation.

Spectacle ( 9.5k ⭐) — A React-based library for creating sleek presentations using JSX syntax that gives you the ability to live demo your code, created and maintained by Formidable Labs. You can use it to create beautiful and interactive slides with animations, transitions, code highlighting, and other features.

Code Surfer ( 6.2k ⭐) — A library that allows you to create presentations using Markdown and React components. You can write your slides in a single MDX file and separate them with --- , add code highlighting, code zooming, code scrolling, code focusing, code morphing, and fun to MDX Deck slides.

WebSlides ( 6.1k ⭐) — A library that allows you to create beautiful HTML presentations and websites. Just choose a demo and customize it in minutes. 120+ slides ready to use. You can use HTML, CSS, JavaScript, Markdown, LaTeX, and more to create stunning slides with animations, transitions, code highlighting, and other features.

Fusuma ( 5.3k ⭐) — A tool that allows you to create slides with Markdown easily. You can use HTML, CSS, JavaScript, Markdown, Vue components, and other web technologies to create stunning slides with animations, transitions, code highlighting, and other features.

PptxGenJS ( 2.1k ⭐) — A JavaScript library that allows you to create presentations, compatible with PowerPoint, Keynote, and other applications that support the Open Office XML (OOXML) format. You can use it to generate PPTX files with just a few simple JavaScript commands in any modern desktop and mobile browser. You can also integrate PptxGenJS with Node, Angular, React, and Electron.

Common features

Presentation frameworks typically share several common features that aim to enhance the creation and delivery of visually engaging and interactive presentations. Here are some of the common features you can find:

Ease of use : They allow you to use web technologies that you are familiar with, such as HTML, CSS, JavaScript, Markdown, Vue, React, and more. You don’t need to learn a new software or tool to create your slides. You can also use your favorite code editor or IDE to write and edit your slides.

Nested slides : They allow you to create sub-sections or sub-topics within your presentation. You can use nested slides to organize your content, add more details, or create interactive menus.

Markdown support : Markdown is a lightweight markup language that allows you to format text using simple syntax. You can use Markdown to write your slides in a plain text editor and then convert them to HTML. Markdown makes it easy to create headings, lists, links, images, code blocks, and more.

Auto-Animate : A feature that automatically animates the transitions between slides or elements to create smooth and dynamic effects for your presentation, detect the changes between slides and animate them accordingly.

PDF export : You can use PDF export to print your presentation, share it online, or view it offline. PDF export can also preserve the layout, fonts, and images of your presentation.

Speaker notes : You can use speaker notes to prepare your speech, add additional information, or provide references. Speaker notes are usually hidden from the audience but visible to you in a separate window or screen.

LaTeX support : LaTeX is a document preparation system that allows you to create high-quality typesetting for mathematical and scientific expressions. You can use LaTeX to write complex formulas, equations, symbols, and diagrams in your presentation. LaTeX can also handle cross-references, citations, and bibliographies.

Syntax highlighted code : You can use syntax highlighted code to display your source code in your presentation. Syntax highlighted code can make your code more readable, understandable, and attractive.

25+ CSS Slideshows

Slideshows are a popular way of presenting images, videos, or other content on a web page. They can be used for various purposes, such as showcasing a portfolio, displaying testimonials, highlighting products, or telling a story . Slideshows can also enhance the visual appeal and interactivity of a web page, as they can include animations, transitions, effects, and user controls .

However, creating a slideshow from scratch can be challenging and time-consuming, especially if you want to make it responsive, accessible, and compatible with different browsers and devices. Fortunately, there are many free and open-source CSS slideshow code examples that you can use as a starting point or inspiration for your own projects. These examples demonstrate the power and versatility of CSS, as they can create stunning slideshows with minimal HTML and JavaScript.

In this article, we will showcase some of the most creative and beautiful CSS slideshow code examples from CodePen, GitHub , and other resources. We will also provide a brief description of each example, as well as the link to the source code and the live demo. These examples are updated as of November 2021 collection, and include 4 new items .

Related Articles

  • jQuery Slideshows
  • Ryan Mulligan
  • January 24, 2020
  • demo and code
  • HTML / CSS (SCSS)

About a code

Doggie screensaver.

Pretty hacky attempt at recreating the floating screensaver for the photo gallery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

  • December 5, 2019

CSS Slideshow

Demo image: Slideshow Vanilla JS

  • Riley Adair
  • January 1, 2018
  • JavaScript/Babel

About the code

Slideshow vanilla js.

Custom slideshow with staggered transitions. Built in vanilla JS.

Demo image: Untitled Slider

  • Nathan Taylor
  • December 16, 2017

Untitled Slider

A small experiment which quickly turned into something more.

Demo image: Parallax Slideshow

  • Bruno Carvalho
  • December 5, 2017
  • JavaScript/Babel (jQuery.js)

Parallax Slideshow

HTML, CSS and JS slideshow with parallax effect.

Demo Image: Split Slick Slideshow

Split Slick Slideshow

Vertical slideshow in split screen. Made by Fabio Ottaviani March 29, 2017

Demo Image: Slideshow Presentation

Slideshow Presentation

Navigate using the up and down arrow keys. Made by Keith Driessen March 9, 2016

Demo Image: Dual Slideshow

Dual Slideshow

Just playing around with a dual pane slideshow concept. Made by Jacob Davidson April 17, 2015

Demo Image: A Pure CSS3 Slideshow

A Pure CSS3 Slideshow

The transition treats each part of the photo as a blind, closes them all together, and when they are open again, a new photo is revealed underneath. Made by Stathis October 3, 2013

  • Johan Lagerqvist
  • December 24, 2018

CSS-only Slideshow

An idea for a page header slideshow.

  • November 30, 2018

Rotating Background Image Slideshow

  • VERDIEU Steeve
  • November 18, 2018

Slideshow with HTML/CSS

Slideshow made with HTML/CSS. Any javascript code is used.

Responsive: no

  • Jefferson Lam
  • October 8, 2018

Spooky Scary Clip Text

Spooky CSS only image slideshow with text clipping.

Compatible browsers: Chrome, Firefox, Opera, Safari

  • Peter Butcher
  • July 1, 2018

Slideshow Concept

A pure CSS and HTML slideshow concept. To add or remove slides: 1. add a new slide template in the HTML; 2. update the $slide-count SCSS variable; 3. tab colours: update the $c-slides SCSS variable 4. slide popout images: update the $b-slides SCSS variable. Use the tabs below to change slide.

Demo image: Silhouette Zoom Slideshow

  • Mikael Ainalem
  • January 15, 2018
  • HTML + SVG / CSS / JavaScript

Silhouette Zoom Slideshow

Slide show where the person in the current frame is used to zoom into the next frame.

Demo image: Geometrical Birds - Slideshow

  • October 17, 2017
  • JavaScript (anime.js)

Geometrical Birds - Slideshow

83 triangles morphing and changing color into different birds.

Demo image: Bubble Slideshow Component

  • June 17, 2017
  • CSS/PostCSS
  • JavaScript (Vue.js)

Bubble Slideshow Component

This is a Vue component that uses clip-path for an interesting slideshow transition effect.

Demo image: Slideshow Parallax With TweenMax

  • April 19, 2017
  • JavaScript (jQuery.js, TweenMax.js)

Slideshow Parallax

Slideshow Parallax with TweenMax.js

Demo Image: Split-Screen Slideshow

Split-Screen Slideshow

HTML, CSS and JavaScript split-screen slideshow. Made by Sean Free January 9, 2017

Demo Image: Only CSS Slideshow Effect

Only CSS Slideshow Effect

Ken Burns slideshow effect CSS only. Made by Dima December 12, 2016

Demo Image: Slick Slideshow With Blur Effect

Slick Slideshow With Blur Effect

Slideshow with blur effect in HTML, CSS and JavaScript. Made by Fabio Ottaviani November 11, 2016

Demo Image: CSS Fadeshow

CSS Fadeshow

This is an extended version of pure CSS slideshow gallery http://codepen.io/alexerlandsson/pen/RaZdox which comes with more and easier customisation and previous/next buttons. Made by Alexander Erlandsson October 24, 2016

  • Just another Chris
  • October 21, 2016
  • HTML (Pug) / CSS (SCSS)

3-D Split Image Slideshow

Demo Image: TweenMax Slideshow

TweenMax Slideshow

A customizable slideshow TweenMax. Made by Matheus Verissimo August 28, 2016

Demo Image: Nautilus Slideshow

Nautilus Slideshow

Nautilus slideshow with HTML, CSS and JavaScript. Made by Nikolas Payne March 9, 2016

  • 4 Dependencies
  • 57 Dependents
  • 51 Versions

Create JavaScript PowerPoint Presentations

PptxGenJS Sample Slides

  • Table of Contents

Introduction

Works everywhere, full featured, simple and powerful, export your way, html to powerpoint, additional builds, angular/react, es6, typescript, script/web browser, library api, html-to-powerpoint feature, library ports, issues / suggestions, contributors.

This library creates Open Office XML (OOXML) Presentations which are compatible with Microsoft PowerPoint, Apple Keynote, and other applications.

  • Every modern desktop and mobile browser is supported
  • Integrates with Node, Angular, React, and Electron
  • Compatible with PowerPoint, Keynote, and more
  • All major object types are available (charts, shapes, tables, etc.)
  • Master Slides for academic/corporate branding
  • SVG images, animated gifs, YouTube videos, RTL text, and Asian fonts
  • The absolute easiest PowerPoint library to use
  • Learn as you code will full typescript definitions included
  • Tons of demo code comes included (over 75 slides of features)
  • Exports files direct to client browsers with proper MIME-type
  • Other export formats available: base64, blob, stream, etc.
  • Presentation compression options and more
  • Includes powerful HTML-to-PowerPoint feature to transform HTML tables into presentations with a single line of code

Visit the demos page to create a simple presentation to see how easy it is to use pptxgenjs, or check out the complete demo which showcases every available feature.

  • PptxGenJS Demos

Installation

PptxGenJS NPM Home

jsDelivr Home

Bundle: Modern Browsers and IE11

Min files: Modern Browsers

GitHub Latest Release

Bundle: Modern Browsers

  • Use the bundle for IE11 support
  • CommonJS: dist/pptxgen.cjs.js
  • ES Module: dist/pptxgen.es.js

Documentation

Quick start guide.

PptxGenJS PowerPoint presentations are created via JavaScript by following 4 basic steps:

That's really all there is to it!

Full documentation and code examples are available

  • Creating a Presentation
  • Presentation Options
  • Adding a Slide
  • Slide Options
  • Saving a Presentation
  • Master Slides
  • Adding Charts
  • Adding Images
  • Adding Media
  • Adding Shapes
  • Adding Tables
  • Adding Text
  • Speaker Notes
  • Using Scheme Colors
  • Integration with Other Libraries

Easily convert HTML tables to PowerPoint presentations in a single call.

Learn more:

  • HTML-to-PowerPoint Docs/Demo

React: react-pptx - thanks to Joonas !

Please file issues or suggestions on the issues page on github , or even better, submit a pull request . Feedback is always welcome!

When reporting issues, please include a code snippet or a link demonstrating the problem. Here is a small jsFiddle that is already configured and uses the latest PptxGenJS code.

Sometimes implementing a new library can be a difficult task and the slightest mistake will keep something from working. We've all been there!

If you are having issues getting a presentation to generate, check out the code in the demos directory. There are demos for both client browsers, node and react that contain working examples of every available library feature.

  • Use a pre-configured jsFiddle to test with: PptxGenJS Fiddle
  • View questions tagged PptxGenJS on StackOverflow . If you can't find your question, ask it yourself - be sure to tag it PptxGenJS .

Thank you to everyone for the issues, contributions and suggestions! ❤️

Special Thanks:

  • Dzmitry Dulko - Getting the project published on NPM
  • Michal Kacerovský - New Master Slide Layouts and Chart expertise
  • Connor Bowman - Adding Placeholders
  • Reima Frgos - Multiple chart and general functionality patches
  • Matt King - Chart expertise
  • Mike Wilcox - Chart expertise
  • Joonas - React port

PowerPoint shape definitions and some XML code via Officegen Project

If you find this library useful, please consider sponsoring us through a donation

Copyright © 2015-present Brent Ely

  • html-to-powerpoint
  • javascript-create-powerpoint
  • javascript-create-pptx
  • javascript-generate-pptx
  • javascript-powerpoint
  • javascript-powerpoint-charts
  • javascript-pptx
  • js-create-powerpoint
  • js-create-pptx
  • js-generate-powerpoint
  • js-powerpoint
  • js-powerpoint-library
  • js-powerpoint-pptx
  • react-powerpoint
  • typescript-powerpoint

Package Sidebar

npm i pptxgenjs

Git github.com/gitbrent/PptxGenJS

gitbrent.github.io/PptxGenJS/

Downloads Weekly Downloads

Unpacked size, total files, last publish.

9 months ago

Collaborators

brentely

How to Create Beautiful HTML & CSS Presentations with WebSlides

Ivaylo Gerchev

This article was peer reviewed by Ralph Mason , Giulio Mainardi , and Mikhail Romanov . Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!

Presentations are one of the best ways to serve information to an audience. The format is short and sharp, made up of small, digestible chunks, which makes any topic under discussion engaging and easier to understand. A presentation can contain all kinds of data, represented by many different elements, such as tables, charts, diagrams, illustrations, images, videos, sounds, maps, lists, etc, all of which lends great flexibility to this medium of expression.

Particularly on the web, presentations come in handy on many occasions, and there are loads of tools at your disposal to create some nifty ones. Today, I’ll introduce you to WebSlides — a small and compact library with a nice set of ready-to-use components, which you can leverage to build well-crafted and attractive web presentations:

WebSlides “is about telling the story, and sharing it in a beautiful way.”

In fact, one of WebSlides’ main benefits is that you can share your story beautifully and in a variety of different ways. With one and the same architecture — 40+ components with semantic classes, and clean and scalable code — you can create portfolios, landings, longforms, interviews, etc.

Besides, you can also extend WebSlides’ functionality by combining it with third-party services and tools such as Unsplash , Animate.css , Animate On Scroll , and so on.

WebSlides is easy to learn and fun to use. Let’s see it in action now.

Getting Started with WebSlides

To get started, first download WebSlides . Then, in the root folder, create a new folder and call it presentation . Inside the newly created presentation folder, create a new file and call it index.html . Now, enter the following code, which contains the needed references to the WebSlides’ files (make sure the filepaths correspond to the folder structure in your setup):

Create a Web Presentation with WebSlides

In this section you’re going to create a short, but complete presentation, which explains why SVG is the future of web graphics. Note: If you are interested in SVG, please check my articles: SVG 101: What is SVG? and How to Optimize and Export SVGs in Adobe Illustrator .

You’ll be working step by step on each slide. Let’s get started with the first one.

The first slide is pretty simple. It contains only one sentence:

Each parent <section> inside <article id="webslides"> creates an individual slide. Here, you’ve used two classes from WebSlides’ arsenal, i.e., bg-gradient-r and aligncenter , to apply a radial gradient background and to align the slide content to the center respectively.

WebSlides Presentation Demo: Slide 1

The second slide explains what SVG is:

The code above uses the content-left and content-right classes to separate the content into two columns. Also, in order to make the above classes work, you need to wrap all content by using the wrap class. On the left side, the code uses text-subtitle to make the text all caps, and text-intro to increase the font size. The right side consists of an illustrative image.

WebSlides Presentation Demo: Slide 2

The next slide uses the grid component to create two columns:

The snippet above shows how to use the grid and column classes to create a grid with two columns. In the first column the style attribute aligns the text to the left (Note how the aligncenter class on the <section> element cascades through to its .column child element, which causes all text inside the slide to be center aligned). In the second column, the browser class makes the illustrative image look like a screenshot.

WebSlides Presentation Demo: Slide 3

In the fourth slide, use the grid component again to split the content into two columns:

WebSlides Presentation Demo: Slide 4

In this slide, place half of the content to the left and the other half to the right using the content-left and content-right classes respectively:

WebSlides Presentation Demo: Slide 5

In this slide, use the background class to embed an image as a background with the Unsplash service . Put the headline on light, transparent background by using the bg-trans-light class. The text’s color appears white, because the slide uses a black background with the bg-black class, therefore the default color is inversed, i.e., white on black rather than black on white. Also, for the text to be visible in front of the image, wrap it with <div class="wrap"> :

WebSlides Presentation Demo: Slide 6

In this slide, put the explanation text on the left and the illustrative image on the right at 40% of its default size (with the alignright and size-40 classes on the <img> element). For this and the next three slides, use slideInRight , which is one of WebSlides’ built-in CSS animations:

WebSlides Presentation Demo: Slide 7

Do a similar thing here:

WebSlides Presentation Demo: Slide 8

This slide also uses a similar structure:

WebSlides Presentation Demo: Slide 9

Here, divide the content into left and right again. In the second <p> tag, use the inline style attribute to adjust the font-size and line-height properties. Doing so will override the text-intro class styles that get applied to the element by default. On the right side, use <div class="wrap size-80"> to create a container for the SVG code example:

WebSlides Presentation Demo: Slide 10

Here, leverage some of the classes you’ve already used to illustrate browser support for SVG:

WebSlides Presentation Demo: Slide 11

In this slide, show some of the use cases for SVG in the form of an image gallery. To this end, use an unordered list with the flexblock and gallery classes. Each item in the gallery is marked up with a li tag:

WebSlides Presentation Demo: Slide 12

This section shows a typical SVG workflow, so you need to use the flexblock and steps classes, which show the content as a sequence of steps. Again, each step is placed inside a li tag:

For each step after the first one, you need to add the process-step-# class. This adds a triangle pointing to the next step.

WebSlides Presentation Demo: Slide 13

In the last slide, use another one of WebSlides’ built-in CSS animations, i.e., zoomIn :

WebSlides Presentation Demo: Slide 14

Congratulations! You’re done. You can see the final outcome here:

See the Pen HTML and CSS Presentation Demo with WebSlides by SitePoint ( @SitePoint ) on CodePen .

Et voilà! You have just created a beautiful, fully functional and responsive web presentation. But this is just the tip of the iceberg, there’s a lot more you can quickly create with WebSlides and many other WebSlides features which I didn’t cover in this short tutorial.

To learn more, explore the WebSlides Components and CSS architecture documentation , or start customizing the demos already available to you in the downloadable folder.

Then, focus on your content and let WebSlides do its job.

Frequently Asked Questions (FAQs) about Creating Beautiful HTML & CSS Presentations with WebSlides

How can i customize the design of my webslides presentation.

WebSlides allows you to customize your presentation to suit your style and needs. You can change the color scheme, fonts, and layout by modifying the CSS file. If you’re familiar with CSS, you can easily tweak the styles to create a unique look. If you’re not, there are plenty of online resources and tutorials that can help you learn. Remember, the key to a great presentation is not only the content but also the design. A well-designed presentation can help keep your audience engaged and make your content more memorable.

Can I add multimedia elements to my WebSlides presentation?

How can i share my webslides presentation with others.

Once you’ve created your WebSlides presentation, you can share it with others by hosting it on a web server. You can use a free hosting service like GitHub Pages, or you can use your own web server if you have one. Once your presentation is hosted, you can share the URL with anyone you want to view your presentation. They’ll be able to view your presentation in their web browser without needing to install any special software.

Can I use WebSlides for commercial projects?

Yes, WebSlides is free to use for both personal and commercial projects. You can use it to create presentations for your business, for your clients, or for any other commercial purpose. However, please note that while WebSlides itself is free, some of the images and fonts used in the templates may be subject to copyright and may require a license for commercial use.

How can I add interactive elements to my WebSlides presentation?

You can add interactive elements to your WebSlides presentation by using JavaScript. For example, you can add buttons that the user can click to navigate to different slides, or you can add forms that the user can fill out. This can be done by adding the appropriate HTML and JavaScript code to your slides. If you’re not familiar with JavaScript, there are plenty of online resources and tutorials that can help you learn.

Can I use WebSlides offline?

Yes, you can use WebSlides offline. Once you’ve downloaded the WebSlides files, you can create and view your presentations offline. However, please note that some features may not work offline, such as loading external images or fonts. To ensure that all features work correctly, it’s recommended to host your presentation on a web server.

How can I add transitions and animations to my WebSlides presentation?

You can add transitions and animations to your WebSlides presentation by using CSS. CSS allows you to control the appearance and behavior of elements on your slides, including transitions and animations. For example, you can use the transition property to animate the change of a property from one value to another, or you can use the animation property to create more complex animations.

Can I use WebSlides on mobile devices?

Yes, WebSlides is designed to be responsive and works well on both desktop and mobile devices. However, please note that due to the smaller screen size, some elements may not display as intended on mobile devices. It’s recommended to test your presentation on different devices to ensure that it looks and works well on all platforms.

How can I add navigation controls to my WebSlides presentation?

You can add navigation controls to your WebSlides presentation by using the built-in navigation options. You can add arrows to navigate between slides, or you can add a slide counter to show the current slide number and the total number of slides. This can be done by adding the appropriate HTML and CSS code to your slides.

Can I use WebSlides with other web development tools?

Yes, you can use WebSlides with other web development tools. For example, you can use it with a text editor to write your HTML and CSS code, or you can use it with a version control system like Git to manage your project files. You can also use it with a build tool like Gulp or Grunt to automate tasks like minifying your code or compiling your CSS.

🎉 Quarto 1.4 released! Download , Read More

Advanced Reveal

Title slide.

The main title slide is the first slide of the presentation, and its content is generated based on a variety document options (title, subtitle, date, author, institute, etc.).

Custom Background

If you want to provide a custom background for the title slide, then do the following:

  • Use the title-slide-attributes key to provide background options.
  • Within this key, specify any of the supported slide background options , but with data- prepended to them.

For example:

Custom Template

You can replace the default title slide entirely with your own template. To do this, specify a title-slide.html template partial . For example:

Here is the source code for the default title slide template partial . Customize this template as required, then save the results to title-slide.html alongside your presentation.

Slide Transitions

Reveal supports a number of animated transition effects for both slide changes and slide background changes. By default no transitions are used, however you can enable them either globally or per-slide using the options described below.

Here are the available transition types:

Here’s how you would set the global transition style for both slides and backgrounds:

You can also specify the transition-speed as default , fast , or slow :

You can also specify the transition and/or transition-speed for an individual slide:

You can also specify separate in and out transitions, for example:

Slide Visibility

You can hide a slide by adding the visibility="hidden" attribute to the slide heading. For example:

Uncounted Slides

When preparing a presentation it can sometimes be helpful to prepare optional slides that you may or may not have time to show. This is easily done by appending a few slides at the end of the presentation, however this means that the Reveal progress bar and slide numbering will hint that there are additional slides.

To “hide” those slides from the numbering system you can use visibility="uncounted" . For example:

Presentation Size

All presentations have a “normal” size, that is, the resolution at which they are authored. This default “normal” size is 1050 x 700, which is used to match as nearly as possible the aspect ratio of most laptops.

Reveal will automatically scale presentations uniformly based on the normal size to ensure that everything fits on any given display or viewport without changing the aspect ratio or layout of your content.

You can change the slide size, the margin around content, as well as set limits on content scaling using the following options:

Absolute Position

The absolute class lets you position elements at arbitrary positions on a slide. These elements have CSS position: absolute and can be placed relative to the top , left , bottom , and/or right edges of the slide.

For example, here we add the .absolute class to three images and give them each a distinct position on the slide (note that we use also width and height to control their dimensions):

The following attributes can be used with absolute . All of these values can be specified in CSS units (e.g.  px , em , etc.). If a number with no units is specified (as in the above example) then pixels are assumed.

Note that default size of presentation slides is 1050 x 700. See Presentation Size for details on customizing this.

Layout Helpers

Reveal provides some helper classes for controlling the layout of content.

Stack Layout

The r-stack layout class lets you center and place multiple elements on top of each other. This is intended to be used together with fragments to incrementally reveal elements.

For example, here we create a div with the .r-stack class and then include 3 images (each of which uses .fragment so they display incrementally):

The r-fit-text class makes text as large as possible without overflowing the slide. This is great when you want BIG text without having to manually find the right font size. For example:

The center class when applied to a slide, will vertically center the slide content by adding the appropriate spacing at the top of the slide. Vertical distances between elements will not be modified. For example:

The r-stretch layout helper lets you resize an element, like an image or video, to cover the remaining vertical space in a slide. For example, here the image will automatically be resized to fit space remaining outside of the slide title and text before and after it:

For slides that contain only a single top-level image, the .r-stretch class is automatically applied to the image. You can disable this behavior by setting the auto-stretch: false option:

You can also disable auto-stretch for an individual slide by adding the .nostretch class:

Or apply .nostretch directly to an individual image:

auto-stretch will only apply to non-nested images, which means an image in a feature block (e.g fragments, layout panel, columns, … ) or a custom Div will be ignored. For custom Divs, you can opt-in to auto-stretch behavior by adding the class .r-stretch to the outer div.

When a slide is scrollable the image size calculations used by auto-stretch may not work well and images may not appear. Two solutions depending on your needs are:

Disable auto-stretch at the presentation level, auto-stretch: false , and use .r-stretch on individual images only where needed.

On slides that are scrollable, add the .nostretch class to disable auto-stretch on the slide.

Auto Animate

Revealjs can automatically animate elements across slides. All you need to do is add the auto-animate attribute to two adjacent slides 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. Note that the slides don’t have titles in this example (rather just the auto-animate attribute) however they could also include a title.

This example uses the margin-top property to move the element but internally Reveal will use a CSS transform to ensure smooth movement. This same approach to animation works with most animatable CSS properties meaning you can transition things like position , font-size , line-height , color , background-color , padding and margin .

Code Animations

You can also animate between code blocks to show changes in code. For example:

Movement Animations

Animations are not limited to changes in style. Auto-Animate can also be used to automatically move elements into their new position as content is added, removed or rearranged on a slide. All without a single line of inline CSS. For example, here the delta between the content on two slides is implicitly animated:

Element Matching

When you navigate between two auto-animated slides we’ll do our best to automatically find matching elements in the two slides. For text, we consider it a match if both the text contents and node type are identical. For images, videos and iframes we compare the src attribute. We also take into account the order in which the element appears in the DOM.

In situations where automatic matching is not feasible you can give the objects that you want to animate between a matching data-id attribute. We prioritize matching data-id values above our automatic matching.

Here’s an example where we’ve given several blocks a matching ID since automatic matching has no content to go on. This example also makes use of some additional animation attributes ( auto-animate-easing and auto-animate-delay ), which we’ll describe in the next section.

Animation Settings

You can override specific animation settings such as easing and duration either for the whole presentation, per-slide or individually for each animated element. The following configuration attributes can be used to change the settings for a specific slide or element:

You can override the global defaults for easing, unmatched, and duration as follows:

Fragments are used to highlight or incrementally reveal individual elements on a slide. Every element with the class fragment will be stepped through before moving on to the next slide.

Note that fragments as discussed here are a relatively advanced form of incremental content display—see Incremental Lists for documentation on creating incremental bullet lists and inserting content pauses in slides.

The default fragment style is to start out invisible and fade in. This style can be changed by appending a different class to the fragment. For example:

Fragment Classes

Here are all of the available fragment classes:

Nested Fragments

Multiple fragments can be applied to the same element sequentially by wrapping it. The following example will fade in the text on the first step, turn it red on the second and partially fade out on the third:

Fragment Order

By default fragments will be stepped through in the order that they appear in the DOM. This display order can be changed using the fragment-index attribute. Note that multiple elements can appear at the same index:

Parallax Background

If you want to use a parallax scrolling background, add the parallax-background-image and parallax-background-size options. For example:

Note that the parallax-background-horizontal and parallax-background-vertical options are not required (the defaults shown above will be used if they are not specified).

Vertical Slides

Reveal uses classic linear slide navigation by default. If you wish you can also configure slide navigation to nest multiple slides within a single top-level slide to create a vertical stack.

Use the navigation-mode option to fine tune Reveal navigation behavior:

If you use vertical or grid navigation, you should structure your slides using level 1 headings for the horizontal axis and level 2 headings for the vertical axis. For example:

Slide Controls

When you enable vertical or grid navigation, controls will appear to provide a visual cue to where you are in the presentation (e.g. if there are vertical slides below you’ll see a down control).

By default these controls appear at the edges of the presentation, you can position them in the bottom right corner using the controls-layout option. You can also provide an extra visual cue to viewers that the controls are available using the controls-tutorial option. For example:

Note that using controls-layout: bottom-right isn’t compatible with including a logo (as the logo appears in the bottom right corner as well).

You can also disable the controls entirely with controls: false .

While vertical slides do provide some additional flexibility over the traditional linear model, they are in practice very confusing for end users (mostly because they are so unexpected). Users will often skip the vertical content because they simply don’t know it’s there.

If your content benefits from vertical orientation (e.g. you have optional drill-down content that you don’t want in the main flow of the presentation), you can by all means use the vertical mode. Just know that if you distribute your slides to users they will very likely not end up viewing any of the vertical content.

Touch Navigation

You can swipe to navigate through a presentation on any touch-enabled device. Horizontal swipes change between horizontal slides, vertical swipes change between vertical slides.

If you wish to disable this you can set the touch option to false :

Note that we also enable controls at the same time (as users on phones or tablets don’t have access to a keyboard).

Reveal Plugins

To use Revealjs plugins , you need to package them into a directory with a config file ( plugin.yml ). The config file lets Quarto know how to inject the plugin into the presentation (e.g. what scripts and/or css files to include, what the default configuration should be, etc.).

See the source code of the plugins that are built into Quarto Reveal for examples:

https://github.com/quarto-dev/quarto-cli/tree/main/src/resources/formats/revealjs/plugins

To use a plugin, just include a reference to its directory in the list of revealjs-plugins . For example:

Note that many of the most popular Reveal plugins are already included with the Quarto version of Reveal, so there is no need to include them separately. Built-in plugins include:

  • RevealChalkboard

Let’s show an example with the fullscreen . Here are the steps to bundle this plugin to use within your Quarto HTML presentation:

Create a folder with the name you want for the plugin, here we’ll call it fullscreen .

Download the plugin files into the created folder. Here the plugin only have a JS file called plugin.js that you can find on the repo rajgoel/reveal.js-plugins . You can keep the name or rename it, e.g fullscreen.js .

In that folder add a plugin.yml file, as in Quarto Reveal examples .

  • name is a mandatory field which should be the name of the JS function the JS plugin is defining. Open the JS script you downloaded to look for it.
  • Other fields are for the resources to be used. In our example, only a JS script so we’ll use script

Our plugin.yml would be:

Now add the plugin reference into your document YAML header, using the path of the folder your created:

The custom plugin will be loaded in your presentation and you can use it. The plugin fullscreen documentation shows an example of adding a Map fullscreen in a slide by adding an attribute on the section, and using stretch on the content. This would translate to having this slide in the .qmd file:

Learning More

See these articles lo learn more about using Reveal:

  • Reveal Basics covers the basic mechanics of creating presentations.
  • Presenting Slides describes slide navigation, printing to PDF, drawing on slides using a chalkboard, and creating multiplex presentations.
  • Reveal Themes talks about using and customizing existing themes as well as creating brand new themes.

Create PowerPoint presentations with JavaScript

The most popular powerpoint+js library on npm with 1,800 stars on github, works everywhere.

  • Every modern desktop and mobile browser is supported
  • Integrates with Node, Angular, React, and Electron
  • Compatible with Microsoft PowerPoint, Apple Keynote, and many others

Full Featured

  • All major objects are available (charts, shapes, tables, etc.)
  • Master Slide support for academic/corporate branding
  • Animated gifs, SVG images, YouTube videos, RTL text, and Asian fonts

Simple And Powerful

  • The absolute easiest PowerPoint library to use
  • Learn as you code using the built-in typescript definitions
  • Tons of sample code comes included (75+ slides of demos)

Export Your Way

  • Exports files direct to client browsers with proper MIME-type
  • Other export formats available: base64, blob, stream, etc.
  • Presentation compression options and more

All F1 news and results

  • F1 Unlocked

Race GP

  • Results 2023 Season Driver Standings Constructor Standings Archive 1950-2022 F1 Awards
  • Alexander Albon
  • Fernando Alonso
  • Valtteri Bottas
  • Pierre Gasly
  • Lewis Hamilton
  • Nico Hulkenberg
  • Charles Leclerc
  • Kevin Magnussen
  • Lando Norris
  • Esteban Ocon
  • Sergio Perez
  • Oscar Piastri
  • Daniel Ricciardo
  • George Russell
  • Carlos Sainz
  • Logan Sargeant
  • Lance Stroll
  • Yuki Tsunoda
  • Max Verstappen
  • Guanyu Zhou

Alpine

  • Gaming Esports Fantasy F1 23 F1 Manager 23 F1 Play F1 Mobile Racing F1 Clash
  • Live Timing

Federation Internationale de l'Automobile

  • Hospitality
  • Experiences

Formula 2

Something's gone wrong

Something's gone wrong.

FIRST LOOK: Mercedes unveil their 2024 F1 car ahead of Silverstone shakedown

14 February 2024

  • Car launches

Mercedes-AMG W15 E PERFORMANCE - Lewis Hamilton - Front Quarter.jpg

Mercedes became the penultimate team to launch for 2024 by revealing their new F1 car on Wednesday.

Shortly after McLaren’s own online presentation , Mercedes posted the first digital renders of the overhauled W15 on their social media channels ahead of an on-track shakedown.

GALLERY: Every angle of the new Mercedes W15 challenger

Mercedes have joined McLaren on track at Silverstone for some initial running with their new car throughout the day before heading off to Bahrain for pre-season testing next week.

This feature is currently not available because you need to provide consent to functional cookies. Please update your cookie preferences

Oops! Error retrieving Twitter post

The team will be hoping to take a step forwards in 2024 in what will be Lewis Hamilton's final season with the squad prior to his switch to Ferrari in 2025.

He will again be joined by George Russell as his team mate, with the Briton entering into his third campaign as a Silver Arrows driver.

READ MORE: ‘I hold no grudge’ – Wolff on Hamilton’s Ferrari move, how he was told and the search for a replacement

After a difficult 2022 amid the introduction of the new ground effect era in the sport, Mercedes initially stuck with their car concept entering into 2023.

However, when their issues continued into the opening stages of the year, the team started on what they have called a "period of renewal", seeing them embark on a "new direction" for 2024.

Mercedes-AMG W15 E PERFORMANCE - Lewis Hamilton - Front Low.jpg

Despite finishing the 2023 season with P2 in the constructors' championship, world champions Red Bull ended the year with a 451-point advantage. As such, Team Principal Toto Wolff acknowledges that there is a "mountain to climb" for Mercedes.

"There are no miracles in this sport," Wolff commented. "But our ambition and determination are strong. Since charting this new course, development has progressed well.

READ MORE: ‘George is our future’ – Wolff lauds Russell despite challenging 2023 season at Mercedes

"We had several items on our priority list for this car. We will soon see if we’ve made the step we’ve aimed for."

Wolff added of the struggles faced by the outfit over the past two seasons: "As the saying goes: when it stings, it sticks. I believe the previous two years were necessary for us to readjust, recalibrate and reinvent ourselves in certain areas.

"That root-and-branch approach is never easy. But we’ve made progress and look forward to taking the next step with the W15. It won’t be a linear path, but when we stumble, we will get back up and keep climbing."

YOU MIGHT ALSO LIKE

Mercedes-AMG F1 W15 E Performance Launch - Finn Pomeroy

ANALYSIS: Mercedes have the stomach for the fight – but are they back on track?

LAS VEGAS, NEVADA - NOVEMBER 15: Sergio Perez of Mexico and Oracle Red Bull Racing looks on in the

Perez's goal is to make it work at Red Bull – but there are plenty of seats available on the grid for 2025

Formula 1 header template (69).png

ANALYSIS: Ferrari are fully focused on 2024 – but it’s impossible to avoid talking about Lewis Hamilton

mercedes-w15-tech-header.png

TECH ANALYSIS: The major changes Mercedes have made with their W15 in a bid to catch Red Bull

Lando Norris' unusual technique to find grip in the wet | Racing ID

WATCH: The challenge of wet weather driving and how Verstappen and Norris take an ‘unconventional’ approach

image presentation js

Create a form in Word that users can complete or print

In Word, you can create a form that others can fill out and save or print.  To do this, you will start with baseline content in a document, potentially via a form template.  Then you can add content controls for elements such as check boxes, text boxes, date pickers, and drop-down lists. Optionally, these content controls can be linked to database information.  Following are the recommended action steps in sequence.  

Show the Developer tab

In Word, be sure you have the Developer tab displayed in the ribbon.  (See how here:  Show the developer tab .)

Open a template or a blank document on which to base the form

You can start with a template or just start from scratch with a blank document.

Start with a form template

Go to File > New .

In the  Search for online templates  field, type  Forms or the kind of form you want. Then press Enter .

In the displayed results, right-click any item, then select  Create. 

Start with a blank document 

Select Blank document .

Add content to the form

Go to the  Developer  tab Controls section where you can choose controls to add to your document or form. Hover over any icon therein to see what control type it represents. The various control types are described below. You can set properties on a control once it has been inserted.

To delete a content control, right-click it, then select Remove content control  in the pop-up menu. 

Note:  You can print a form that was created via content controls. However, the boxes around the content controls will not print.

Insert a text control

The rich text content control enables users to format text (e.g., bold, italic) and type multiple paragraphs. To limit these capabilities, use the plain text content control . 

Click or tap where you want to insert the control.

Rich text control button

To learn about setting specific properties on these controls, see Set or change properties for content controls .

Insert a picture control

A picture control is most often used for templates, but you can also add a picture control to a form.

Picture control button

Insert a building block control

Use a building block control  when you want users to choose a specific block of text. These are helpful when you need to add different boilerplate text depending on the document's specific purpose. You can create rich text content controls for each version of the boilerplate text, and then use a building block control as the container for the rich text content controls.

building block gallery control

Select Developer and content controls for the building block.

Developer tab showing content controls

Insert a combo box or a drop-down list

In a combo box, users can select from a list of choices that you provide or they can type in their own information. In a drop-down list, users can only select from the list of choices.

combo box button

Select the content control, and then select Properties .

To create a list of choices, select Add under Drop-Down List Properties .

Type a choice in Display Name , such as Yes , No , or Maybe .

Repeat this step until all of the choices are in the drop-down list.

Fill in any other properties that you want.

Note:  If you select the Contents cannot be edited check box, users won’t be able to click a choice.

Insert a date picker

Click or tap where you want to insert the date picker control.

Date picker button

Insert a check box

Click or tap where you want to insert the check box control.

Check box button

Use the legacy form controls

Legacy form controls are for compatibility with older versions of Word and consist of legacy form and Active X controls.

Click or tap where you want to insert a legacy control.

Legacy control button

Select the Legacy Form control or Active X Control that you want to include.

Set or change properties for content controls

Each content control has properties that you can set or change. For example, the Date Picker control offers options for the format you want to use to display the date.

Select the content control that you want to change.

Go to Developer > Properties .

Controls Properties  button

Change the properties that you want.

Add protection to a form

If you want to limit how much others can edit or format a form, use the Restrict Editing command:

Open the form that you want to lock or protect.

Select Developer > Restrict Editing .

Restrict editing button

After selecting restrictions, select Yes, Start Enforcing Protection .

Restrict editing panel

Advanced Tip:

If you want to protect only parts of the document, separate the document into sections and only protect the sections you want.

To do this, choose Select Sections in the Restrict Editing panel. For more info on sections, see Insert a section break .

Sections selector on Resrict sections panel

If the developer tab isn't displayed in the ribbon, see Show the Developer tab .

Open a template or use a blank document

To create a form in Word that others can fill out, start with a template or document and add content controls. Content controls include things like check boxes, text boxes, and drop-down lists. If you’re familiar with databases, these content controls can even be linked to data.

Go to File > New from Template .

New from template option

In Search, type form .

Double-click the template you want to use.

Select File > Save As , and pick a location to save the form.

In Save As , type a file name and then select Save .

Start with a blank document

Go to File > New Document .

New document option

Go to File > Save As .

Go to Developer , and then choose the controls that you want to add to the document or form. To remove a content control, select the control and press Delete. You can set Options on controls once inserted. From Options, you can add entry and exit macros to run when users interact with the controls, as well as list items for combo boxes, .

Adding content controls to your form

In the document, click or tap where you want to add a content control.

On Developer , select Text Box , Check Box , or Combo Box .

Developer tab with content controls

To set specific properties for the control, select Options , and set .

Repeat steps 1 through 3 for each control that you want to add.

Set options

Options let you set common settings, as well as control specific settings. Select a control and then select Options to set up or make changes.

Set common properties.

Select Macro to Run on lets you choose a recorded or custom macro to run on Entry or Exit from the field.

Bookmark Set a unique name or bookmark for each control.

Calculate on exit This forces Word to run or refresh any calculations, such as total price when the user exits the field.

Add Help Text Give hints or instructions for each field.

OK Saves settings and exits the panel.

Cancel Forgets changes and exits the panel.

Set specific properties for a Text box

Type Select form Regular text, Number, Date, Current Date, Current Time, or Calculation.

Default text sets optional instructional text that's displayed in the text box before the user types in the field. Set Text box enabled to allow the user to enter text into the field.

Maximum length sets the length of text that a user can enter. The default is Unlimited .

Text format can set whether text automatically formats to Uppercase , Lowercase , First capital, or Title case .

Text box enabled Lets the user enter text into a field. If there is default text, user text replaces it.

Set specific properties for a Check box .

Default Value Choose between Not checked or checked as default.

Checkbox size Set a size Exactly or Auto to change size as needed.

Check box enabled Lets the user check or clear the text box.

Set specific properties for a Combo box

Drop-down item Type in strings for the list box items. Press + or Enter to add an item to the list.

Items in drop-down list Shows your current list. Select an item and use the up or down arrows to change the order, Press - to remove a selected item.

Drop-down enabled Lets the user open the combo box and make selections.

Protect the form

Go to Developer > Protect Form .

Protect form button on the Developer tab

Note:  To unprotect the form and continue editing, select Protect Form again.

Save and close the form.

Test the form (optional)

If you want, you can test the form before you distribute it.

Protect the form.

Reopen the form, fill it out as the user would, and then save a copy.

Creating fillable forms isn’t available in Word for the web.

You can create the form with the desktop version of Word with the instructions in Create a fillable form .

When you save the document and reopen it in Word for the web, you’ll see the changes you made.

Facebook

Need more help?

Want more options.

Explore subscription benefits, browse training courses, learn how to secure your device, and more.

image presentation js

Microsoft 365 subscription benefits

image presentation js

Microsoft 365 training

image presentation js

Microsoft security

image presentation js

Accessibility center

Communities help you ask and answer questions, give feedback, and hear from experts with rich knowledge.

image presentation js

Ask the Microsoft Community

image presentation js

Microsoft Tech Community

image presentation js

Windows Insiders

Microsoft 365 Insiders

Was this information helpful?

Thank you for your feedback.

Kansas City Chiefs parade mass shooting stemmed from dispute, 2 juveniles detained

One person was killed and 22 were hurt. The victims are as young as 6 years old.

The mass shooting that erupted at the end of the Chiefs' Super Bowl celebration in Kansas City, Missouri, appeared to stem from a dispute, according to police.

The shooting, in which one person was killed and 22 were hurt, unfolded outside Union Station as Chiefs fans were leaving a parade and rally on Wednesday. More than 800 law enforcement officers were on duty in the area, as 1 million paradegoers were expected to attend the celebration, according to Kansas City Mayor Quinton Lucas.

PHOTO: People flee after shots were fired near the Kansas City Chiefs' Super Bowl LVIII victory parade on February 14, 2024, in Kansas City, Missouri.

MORE: 1 dead, at least 21 others injured by gunfire at Chiefs Super Bowl parade in Kansas City: 'Tragedy'

Two juvenile suspects are currently detained and charges have not yet been filed, according to Kansas City police. The department is working with juvenile prosecutors "to review investigative findings and determine applicable charges," a police spokesperson confirmed to ABC News Thursday evening.

A third juvenile who had been detained in connection with the shooting was determined not to be involved and is no longer in custody, according to the police spokesperson.

Several guns were recovered, police said.

At least half of the victims are under the age of 16, Kansas City Police Chief Stacey Graves said Thursday.

Fire officials said the victims included eight critically hurt and seven seriously hurt.

PHOTO: Law enforcement respond to a shooting at Union Station during the Kansas City Chiefs Super Bowl LVIII victory parade on February 14, 2024 in Kansas City, Missouri.

MORE: Paradegoers recount panic during shooting after Chiefs Super Bowl rally: 'Everybody started running'

Children's Mercy Hospital said it received 11 children, ranging in age from 6 to 15. Hospital officials did not specify if the 6-year-old was wounded by gunfire or injured in the resulting chaos.

Nine of the children taken to Mercy Hospital had been shot, officials said. Three remained at the hospital on Thursday and all of the victims are expected to recover, officials said.

PHOTO: A view of the Union Station area after shots were fired near the Kansas City Chiefs' Super Bowl LVIII victory parade on Feb. 14, 2024, in Kansas City, Mo.

University Health said it received eight gunshot patients, including two who remain in critical condition Thursday.

A University Health doctor and the Kansas City Fire Department's medical director were both at the parade, and they were able to triage patients and get the sickest people to the hospital first, University Health trauma surgeon Dr. Dustin Neel said.

The first victim to arrive at the hospital is one of the patients in critical condition, Neel said. Within five minutes of arriving at the hospital he was taken to the operating room where doctors were able to stabilize him, Neel said. The injuries he sustained are 90% lethal, and had he not arrived when he did, he might not have survived, Neel said.

The second patient in critical condition also underwent surgery on Wednesday, and doctors are hopeful she'll be upgraded to stable condition in the next few days, Neel said.

PHOTO: Law enforcement respond to a shooting at Union Station during the Kansas City Chiefs Super Bowl LVIII victory parade on February 14, 2024 in Kansas City, Missouri.

MORE: Shooting at Kansas City Chiefs' Super Bowl celebration: Bystanders who helped tackle suspect speak out

The police chief commended the paradegoers who "helped one another and even physically stopped a person who was believed to be involved in the incident."

She called the law enforcement response "exemplary."

"I'm angered by what occurred ... but I am also thankful for the response," Graves told reporters.

PHOTO: People flee after shots were fired near the Kansas City Chiefs' Super Bowl LVIII victory parade on February 14, 2024, in Kansas City, Missouri.

MORE: Mass shooting at Kansas City Chiefs' Super Bowl celebration claims life of local radio DJ

Killed in the shooting was Lisa Lopez-Galvan, a DJ at local radio station KKFI 90.1 FM.

"This senseless act has taken a beautiful person from her family and this KC Community," the radio station said in a statement Wednesday.

PHOTO: KKFI DJ Lisa Lopez-Galvan is shown in this undated photo.

MORE: Gun violence has claimed the lives of almost 5,000 people so far in 2024

The 44-year-old leaves behind her husband and two young children.

"We woke up this morning excited and the last thing we ever expected was to have a tragedy in our family," her brother, Beto Lopez, told ABC News.

All Chiefs players, coaches and staff were confirmed safe.

So far this year, there have been at least 48 mass shootings in the United States, with 81 killed and 165 wounded, according to the Gun Violence Archive .

ABC News' Victoria Arancio, Youri Benadjaoud, Alexandra Faul and Pierre Thomas contributed to this report.

Related Topics

  • Chiefs Super Bowl Parade Shooting
  • Gun Violence

Top Stories

image presentation js

Body of missing Tennessee deputy who disappeared after making arrest recovered

  • 3 hours ago

image presentation js

Chiefs parade mass shooting stemmed from dispute, 2 juveniles detained

  • Feb 15, 7:21 PM

image presentation js

Kansas City's homicide rate and Missouri gun laws: What to know after parade shooting

  • Feb 15, 8:48 PM

image presentation js

FBI source allegedly provided false derogatory info on President Biden, Hunter Biden

  • Feb 15, 9:43 PM

image presentation js

Republican warning of 'security threat' about Russia wanting nuke in space: Sources

  • Feb 14, 5:27 PM

ABC News Live

24/7 coverage of breaking news and live events

Chiefs' Travis Kelce packs drama into Super Bowl, from blowup with coach to late heroics

Chiefs' travis kelce was clearly frustrated in the first half, at one point yelling at andy reid on the sideline. but his second half was a whole different story..

image presentation js

LAS VEGAS – If the main character of the NFL this year was Travis Kelce , then the script writers saved his most dramatic episode for the 2023 season finale. 

Kelce’s Super Bowl story arc was dramatic enough to be an appropriate coda of the 21-game soap opera that was the Kansas City Chiefs ' season. He entered with high expectations. Faced adversity. There was redemption and triumph. It was punctuated by an Elvis Presley impersonation, fitting for the first Super Bowl in Las Vegas. 

“Vivaaaaaaaaaaaa, Vivaaaaaaaa, Las Vegasssssssssssssss!!” a hoarse Kelce, Lombardi Trophy in hand, scream-sang into the microphone as CBS’ Jim Nantz interviewed him on stage. 

The Kansas City Chiefs defeated the San Francisco 49ers in Super Bowl 58 in overtime Sunday, 25-22, claiming their third title in five years and second in a row. As is the wont of a leading man, Kelce played a pivotal role. But his first half was meager – almost a blank space. 

He had one catch for one yard. He finished with nine catches for 93 yards and led all receivers in both categories.

NFL STATS CENTRAL: The latest NFL scores, schedules, odds, stats and more.

“I didn’t care about my catches,” Kelce said of the game's first 30 minutes. “I just wanted the score to be different.”

Kansas City trailed 10-3 entering halftime. As for what changed for Kelce between the two halves, the tight end flexed his comedic chops, saying he stopped “playing like a jabroni, man.” 

The drama came when Kelce bumped into Chiefs head coach Andy Reid on the sideline in the second quarter and nearly knocked over “Big Red." Teammates pulled him away. A couple of plays earlier, Kelce appeared frustrated that quarterback Patrick Mahomes did not throw him the ball when he was wide open (the pass was completed for a 52-yard gain to Mecole Hardman, regardless). By night’s end, they were hugging as confetti fell on their shoulders. 

“I was just telling him how much I love him,” Kelce, not wanting to go there, said of the dust-up. 

“He caught me off-balance. He cheap-shotted me,” said Reid, leaning on his dry humor to address the awkward situation. “But that’s all right; he did good.” 

DYNASTY: Patrick Mahomes, Chiefs leave no doubt: They're an all-time NFL dynasty

All Kelce wanted to get across to his coach, Reid said, was that if he was in the game, he’d score. And Kelce credited Reid for being the type of mentor who has taught him how to channel his emotions. 

“He’s one of the best leaders of men I’ve ever seen in my life,” said Kelce, who added that Reid is “the greatest coach this game has ever seen … I owe my entire career to that guy.”

Reid actually asked Kelce – along with Mahomes and defensive tackle Chris Jones – to address the Chiefs on Saturday night at the team’s final pre-Super Bowl meeting. According to those in the room, the message Kelce relayed was “powerful.”  

“You just felt the energy, the passion,” Kansas City safety Justin Reid said. “He just talked about just us being us, man. It didn’t matter what anyone else said. It didn’t matter what the commentators or analysts or professionals or anyone else said, positive or negative. It’s about us. It’s not about making excuses; it’s about going out there and playing dominant. And you felt that.” 

The message, Kelce said, was to show how much he cared about his teammates and coaches and that they had the “formula” to be champions. 

“They’re leaders and they stick together,” offensive coordinator Matt Nagy said in the locker room about Andy Reid and Kelce. “I don’t think many people thought we were going to be standing here (as) Super Bowl champions on Christmas Day, and we are because we have good people that care.” 

On the Chiefs’ first drive of the game, Kelce caught a short pass to the left that went for a yard. He did not record another catch until the 12:26 mark of the third quarter. That left him fired up at halftime, and Kelce once again brought the heat for his teammates. 

“Just being accountable for the guys around me, being accountable for Coach Reid,” Kelce said. 

Mahomes, who threw an interception on the third play of the second half, looked Kelce’s way to open the Chiefs’ next drive for an 11-yard gain.

Kelce was involved on each of the Chiefs’ final six drives. But the biggest play came with 16 seconds left in regulation and Kansas City trailing 16-13. Facing a third-and-7 from the San Francisco 33-yard line, Kelce cut across the middle, Mahomes hit him in stride, and Kelce nearly turned the corner for a game-winning touchdown but was pushed out of bounds at the Niners’ 11-yard line with 10 seconds left. 

Kelce said he asked Reid to “put it on” his shoulders with the game in the balance.

“I live for moments like that and I love Big Red for giving me those opportunities,” the 34-year-old said. “It’s a beautiful thing, man, when everything comes together.” 

In the Chiefs’ locker room, not long after he embraced Taylor Swift on the field, it was Kelce who gathered the majority of his teammates as music blared from speakers and cigar smoke wafted. 

Kelce called out for tight ends coach Tom Melvin. A bottle of champagne was walked to the center of the room, where a circle formed around Kelce. Still feeling lyrical, Kelce began belting out Queen’s “We Are The Champions.” His teammates sang, too. The champagne sprayed toward the ceiling and down onto the Lombardi. 

“Unreal,” said Chiefs passing game coordinator Joe Bleymaier, “just unreal.”

The Chiefs, as defending champions, had targets on their backs all season. There was a brutal 2-4 stretch in November and December. Kelce missed the first game of the season against the Detroit Lions due to a knee injury he suffered at the end of training camp. Since September, his romance with Swift has sparked vitriol in some corners of society, mostly online. 

OPINION: Kyle Shanahan relives his Super Bowl nightmare as 49ers collapse yet again

“To have the doubters, to have the road that we went through, man, it meant everything to even get to this point,” Kelce said. “But to find a way through adversity, yet again, for four quarters, five quarters, man, I couldn’t be more proud of the guys, and it’s such an honor to be on this team and in this organization.”

Kelce wasn’t talking about his off-field life when he referenced “doubters” and plowing through “adversity” Sunday. But he might as well have been. 

While leaving his postgame news conference, Kelce was asked whether he will return for another season. 

“Hell yeah,” he said, “I want that three-peat.” 

In a conversation with the Wall Street Journal Magazine earlier this season, Kelce told the outlet he does think about retirement. Hard not to when a second act of entertaining and acting or anything, really, awaits. But as Kelce’s career winds down, his case in the "greatest tight end of all time" conversation will be heard.

Winning will always matter more to Kelce than individual statistics, but “I do love the legacy of wanting to be as great as I possibly can.” 

Kelce knows he has played more football than he will play in the future. 

“I just cherish every single moment,” he said.

  • Search Please fill out this field.
  • Manage Your Subscription
  • Give a Gift Subscription
  • Sweepstakes
  • Entertainment

Every Celebrity at the Super Bowl in Vegas, from Paul Rudd and JAY-Z to Yes, Taylor Swift

A starry game calls for a starry crowd! See all the A-listers who made the trip to Sin City for this year's Super Bowl

image presentation js

Jamie Squire/Getty Images

The Super Bowl is finally here!

On Sunday night in Las Vegas, the Kansas City Chiefs and the San Francisco 49ers are facing off at Las Vegas' Allegiant Stadium in a battle of the best of the NFL. And in the crowd are tons of stars there to support their favorite teams — or just take in the spectacle of the big night.

From Taylor Swift and her crew rooting for Travis Kelce and the Chiefs to longtime fan Paul Rudd taking it all in, see all of the stars in the stands at the 2024 Super Bowl LVIII in Las Vegas.

Gwen Stefani and Blake Shelton

Kevin Mazur/Getty

From the looks of it, pregame performers Gwen Stefani and Blake Shelton had great seats.

JAY-Z and Blue Ivy Carter

Ezra Shaw/Getty

Ahead of the game, JAY-Z and his daughters Blue Ivy Carter , 12, and Rumi , 6, snapped shots on the field.

Beyoncé and JAY-Z

Later in the game, Beyoncé joined JAY-Z in a suite (and dropped some exciting news !).

Paul Rudd and Jack Rudd

Longtime Kansas City Chiefs fan Paul Rudd once again brought his son, Jack Rudd , 17.

Taylor Swift and Ice Spice

Anthony Behar/Sipa USA

Taylor Swift spent the night in a star-studded suite with family members and friends, including Ice Spice .

Blake Lively

Taylor Swift 's bestie Blake Lively kept close to her as they walked into the stadium .

Miles Teller and Keleigh Sperry

Keleigh Teller

Taylor Swift friends Miles Teller and Keleigh Sperry later joined the party in the Kelce crew suite.

Paul McCartney

PATRICK T. FALLON/AFP via Getty

Halfway through the game, Paul McCartney also popped into the Kelce suite and met Travis Kelce's dad, Ed.

Lady Gaga brought her usual flair to her Super Bowl ensemble.

Andra Day delivered a rousing performance of "Lift Every Voice and Sing."

Olivia Culpo

Olivia Culpo/Instagram

As she made her way into the stadium with her poppi soda, 49ers star Christian McCaffrey's fiancée Olivia Culpo showed off her custom game day 'fit.

Brittany Mahomes

Kansas City Chiefs quarterback Patrick Mahomes had a sweet support system on the sidelines: wife Brittany Mahomes and their daughter Sterling and son Bronze .

Post Malone

Following Day's turn, Post Malone stepped up to the mic with a guitar for his performance of "America the Beautiful."

Reba McEntire

And then Reba McEntire slayed the national anthem.

Justin Bieber and Hailey Bieber

When Justin Bieber and Hailey Bieber were shown on the JumboTron, they shared a sweet kiss.

The Kelce Family

newheightshow/X

Before the game Travis Kelce's mom Donna Kelce showed off her sweet 'fit, while his brother Jason Kelce opted for Chiefs-themed overalls.

Mark Wahlberg

Christopher Polk/Billboard via Getty 

After starring in a pre-show ad, Mark Wahlberg took his spot in the crowd.

Braxton Berrios and Alix Earle

Christopher Polk/Billboard via Getty

New loves Braxton Berrios and Alix Earle snapped photos from the stands.

LeBron James and Savannah James

Basketball royalty met football fanfare when LeBron James and wife Savannah James (not pictured) hit the game.

After performing at one of the many parties around town, Luke Combs headed to the big game.

Lana Del Rey

TIMOTHY A. CLARY/AFP via Getty Images

Just outside of Taylor Swift's suite sat fellow singer Lana Del Rey , who later moved up to join the Swift-Kelce contingent.

Kim Kardashian

Almost going under the radar, Kim Kardashian was snapped late in the nail-biter of a game.

Gordon Ramsay

Harry How/Getty Images

A Vegas mainstay thanks to his restaurant empire, Gordon Ramsay enjoyed Super Bowl LVIII.

Martha Stewart

Martha Stewart/Instagram

Last year's Sports Illustrated Swimsuit Issue cover star Martha Stewart greeted this year's Rookie, Brittany. Mahomes .

Ariana Grande and Cynthia Erivo

Diggzy/Shutterstock

After the trailer debut for their new film Wicked aired, stars Cynthia Erivo and Ariana Grande entered the stadium in coordinating Louis Vuitton looks.

Chloe Bailey and Halle Bailey

Halle Bailey/Instagram

Sister act Chloe Bailey and Halle Bailey snapped a front-row shot before the game kicked off.

Jon Hamm and Anna Osceola

Kevin Mazur/Getty 

Jon Hamm and his wife, Anna Osceola , rocked coordinating jerseys while at the Super Bowl on Sunday night.

Jeremy Renner

Lifelong 49ers fan Jeremy Renner was sure to take in the action, joining Lil Jon and friends for a photo.

Gabrielle Union

"I’m here for Usher but I hope the 49ers win," Gabrielle Union joked in her Instagram caption from the big game.

Lizzo shared a look at her "4th superbowl," which included a selfie with Usher (from a distance) and a peek at the star-studded suite she was in with celebs including Bad Bunny and Henry Cavill.

Shaquille O'Neal

He did it! In an Instagram post, Shaquille O'Neal revealed he finally met Taylor Swift.

By clicking “Accept All Cookies”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts.

IMAGES

  1. Create Presentation Slides using Reveal.js

    image presentation js

  2. JS Images Slider

    image presentation js

  3. Reveal JS

    image presentation js

  4. Create Incredible Web Presentations with Reveal.js

    image presentation js

  5. Coding Presentations using Reveal.JS

    image presentation js

  6. Make online presentation with Impress.js

    image presentation js

VIDEO

  1. A Multi Task Learning Approach to Hate Speech Detection Leveraging Sentiment Analysis

  2. Coding Creativity: Crafting AI-Powered Presentations with ChatGPT and VBA

  3. Why isn't privacy a "thing"? Learnings from Semaphore: A case study

  4. PowerPoint Presentation With Animation

  5. Machine Learning: Confusion and Hallucinations

  6. PPT 끝판왕, PPT극강기능활용하기

COMMENTS

  1. The HTML presentation framework

    Presentations made with reveal.js are built on open web technologies. That means anything you can do on the web, you can do in your presentation. Change styles with CSS, include an external web page using an <iframe> or add your own custom behavior using our JavaScript API.

  2. JavaScript Image Slider [ How To Build One ]

    Putting Images into the JavaScript Image Slideshows There are a few ways to make an image slider in JavaScript. One is to add the images using the css background property, and have a separate class for each image. Another way is to have just have one slide, and change it's background image directly with JS.

  3. How To Create a Slideshow

    Step 1) Add HTML: Example <!-- Slideshow container --> <div class="slideshow-container"> <!-- Full-width images with number and caption text --> <div class="mySlides fade"> <div class="numbertext"> 1 / 3 </div> <img src="img1.jpg" style="width:100%"> <div class="text"> Caption Text </div> </div> <div class="mySlides fade">

  4. How to Create a Slideshow with HTML, CSS, and JavaScript

    How to Create a Slideshow with HTML, CSS, and JavaScript A web slideshow is a sequence of images or text that consists of showing one element of the sequence in a certain time interval. For this tutorial you can create a slideshow by following these simple steps: Write some markup

  5. How to Build a Responsive Image Slider with Html, CSS and ...

    An image slider is a type of slideshow that displays a series of images in a horizontal or vertical arrangement. The images are displayed one after another, with a transition effect between each image. The images can be cycled through, and the user can navigate through the images using a set of navigation controls.

  6. impress.js

    impress.js is a presentation tool based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.

  7. Create Incredible Web Presentations with Reveal.js

    , a JavaScript library that enables the creation of 3D presentations with a range of transitional effects. : An online presentation tool that lets users zoom in and out of slides to make dynamic, interactive presentations. : An open-source JavaScript picture gallery and lightbox, PhotoSwipe.

  8. Build and Publish a Presentation with RevealJS and Github

    RevealJS is a JavaScript framework that allows you to leverage your HTML, CSS, and JavaScript skills to build beautiful and polished presentations. Some benefits this has over the standard software packages include being able to use version control (since the presentation is just html, css, and js files rather than a proprietary binary format ...

  9. How to Build an Image Slider with jQuery

    Animation We will wrap our slider animations inside a function: function startSlider () {} We are using the setInterval () native JavaScript method to automate the contents of the function on a time based trigger. interval = setInterval (function () {}, pause); We use the pause variable to see how many milliseconds to wait before calling the ...

  10. jSlide

    Whether small images are stretched to fill the entire screen. Whether clicking blank space around the image closes slide view. Whether clicking directly on a single image or the last image in a set closes slide view; Whether the slideshow loops around while viewing image sets and during slideshows

  11. Small Flexible Presentation Library

    presentr.js is a lightweight, zero-dependency JavaScript library for creating a professional presentation on the browser. The presentation enables the visitor to switch between slides/fragments using arrow keys and touch tap event. Compatible with both desktop and mobile. See it in action: How to use it: Installation.

  12. Make a Simple JavaScript Slideshow without jQuery

    That way, the slides will be listed out by default. Then add JavaScript to loop through each of the slides and change their position to absolute, like so (making sure to place this code after your ...

  13. Making beautiful interactive slides with revealJS

    This is an HTML presentation framework that allows you to share your slides on the web, add custom animations, embed websites into your slides, and more! ... I added different types of backgrounds on each slide, including image, video, html, and color: --- output: revealjs::revealjs_presentation: transition: default self_contained: false reveal ...

  14. Top 9 JavaScript frameworks to create beautiful presentation slides

    Impress (37.3k ⭐) — Another open source HTML presentation framework that is similar to reveal.js, but with a different approach, inspired by the idea behind prezi.com. It uses CSS3 3D transforms to create dynamic and spatial presentations that can zoom, rotate, and pan across the slides. ... images, code blocks, and more. Auto-Animate: A ...

  15. 25+ CSS Slideshows

    Free hand-picked HTML, CSS and JavaScript (jQuery, React, Vue) code examples, tutorials and articles. ... Demo Image: Slideshow Presentation Slideshow Presentation. Navigate using the up and down arrow keys. Made by Keith Driessen March 9, 2016 ... Slideshow Parallax with TweenMax.js. Demo Image: Split-Screen Slideshow Split-Screen Slideshow ...

  16. pptxgenjs

    4 Dependencies 56 Dependents 51 Versions PptxGenJS Create JavaScript PowerPoint Presentations Table of Contents Table of Contents Introduction Features Works Everywhere Full Featured Simple and Powerful Export Your Way HTML to PowerPoint Live Demos Installation Npm Yarn CDN Download Additional Builds Documentation Quick Start Guide

  17. How to Create Beautiful HTML & CSS Presentations with WebSlides

    A presentation can contain all kinds of data, represented by many different elements, such as tables, charts, diagrams, illustrations, images, videos, sounds, maps, lists, etc, all of which...

  18. Quarto

    Here are the steps to bundle this plugin to use within your Quarto HTML presentation: Create a folder with the name you want for the plugin, here we'll call it fullscreen. Download the plugin files into the created folder. Here the plugin only have a JS file called plugin.js that you can find on the repo rajgoel/reveal.js-plugins.

  19. Home

    PptxGenJS Create PowerPoint presentations with JavaScript The most popular powerpoint+js library on npm with 1,800 stars on GitHub Get Started Demos HTML to PPTX Works Everywhere Every modern desktop and mobile browser is supported Integrates with Node, Angular, React, and Electron

  20. reveal.js how to add an image to a slide

    reveal.js how to add an image to a slide Ask Question Asked 8 years, 1 month ago Modified 11 months ago Viewed 17k times 5 I am trying to use reveal.js for my presentation. I tried to add an image to my slide but the image won't show up. Here is my code

  21. Red Bull unveil their new RB20 car ahead of the 2024 season

    Red Bull have become the 10th and final team to unveil their car for the 2024 F1 season. Ahead of their title defence in the year ahead, the RB20 was revealed to the world at the squad's Milton Keynes base on Thursday, with Max Verstappen and Sergio Perez amongst the team members on hand as their new challenger was revealed.

  22. Mercedes unveil their 2024 F1 car ahead of shakedown

    Mercedes became the penultimate team to launch for 2024 by revealing their new F1 car on Wednesday. Shortly after McLaren's own online presentation, Mercedes posted the first digital renders of the overhauled W15 on their social media channels ahead of an on-track shakedown.. GALLERY: Every angle of the new Mercedes W15 challenger

  23. Create a form in Word that users can complete or print

    Show the Developer tab. If the developer tab isn't displayed in the ribbon, see Show the Developer tab.. Open a template or use a blank document. To create a form in Word that others can fill out, start with a template or document and add content controls.

  24. Kansas City Chiefs parade mass shooting stemmed from dispute, 2

    Andrew Caballero-Reynolds/AFP via Getty Images. The mass shooting that erupted at the end of the Chiefs' Super Bowl celebration in Kansas City, Missouri, appeared to stem from a dispute, according ...

  25. OpenAI will now let you create videos from verbal cues

    Artificial intelligence leader OpenAI introduced a new AI model called Sora which it claims can create "realistic" and "imaginative" 60-second videos from quick text prompts.

  26. Why did Travis Kelce yell at Andy Reid? Chiefs TE brings drama, heroics

    Chiefs' Travis Kelce packs drama into Super Bowl, from blowup with coach to late heroics Chiefs' Travis Kelce was clearly frustrated in the first half, at one point yelling at Andy Reid on the ...

  27. Photos of Celebrities at the 2024 Super Bowl LVIII in Las Vegas

    A starry game calls for a starry crowd! See all the A-listers who made the trip to Sin City for this year's Super Bowl Jamie Squire/Getty Images The Super Bowl is finally here! On Sunday night in ...

  28. Travis Kelce Embarrassed Taylor Swift By Singing 'Viva Las Vegas' After

    It's a love story, baby just say yes.