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

Write styles to hide slides and show only one slide..

To hide the slides you have to give them a default style. It'll dictate that you only show one slide if it is active or if you want to show it.

Change the slides in a time interval.

The first step to changing which slides show is to select the slide wrapper(s) and then its slides.

When you select the slides you have to go over each slide and add or remove an active class depending on the slide that you want to show. Then just repeat the process for a certain time interval.

Keep it in mind that when you remove an active class from a slide, you are hiding it because of the styles defined in the previous step. But when you add an active class to the slide, you are overwritring the style display:none to display:block , so the slide will show to the users.

Codepen example following 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

slides icon

Cloud Storage

gmail icon

Custom Business Email

Meet icon

Video and voice conferencing

calendar icon

Shared Calendars

docs icon

Word Processing

sheets icon

Spreadsheets

Presentation Builder

forms icon

Survey builder

google workspace

Google Workspace

An integrated suit of secure, cloud-native collaboration and productivity apps powered by Google AI.

Tell impactful stories, with Google Slides

Create, present, and collaborate on online presentations in real-time and from any device.

  • For my personal use
  • For work or my business

icon for add comment button

Jeffery Clark

T h i s   c h a r t   h e l p s   b r i d g i n g   t h e   s t o r y !

comment box buttons

E s t i m a t e d   b u d g e t

Cursor

Make beautiful presentations, together

Stay in sync in your slides, with easy sharing and real-time editing. Use comments and assign action items to build your ideas together.

Slides create presentations

Present slideshows with confidence

With easy-to-use presenter view, speaker notes, and live captions, Slides makes presenting your ideas a breeze. You can even present to Google Meet video calls directly from Slides.

Slides present with confidence

Seamlessly connect to your other Google apps

Slides is thoughtfully connected to other Google apps you love, saving you time. Embed charts from Google Sheets or reply to comments directly from Gmail. You can even search the web and Google Drive for relevant content and images directly from Slides.

Slides connect to Google apps

Extend collaboration and intelligence to PowerPoint files

Easily edit Microsoft PowerPoint presentations online without converting them, and layer on Slides’ enhanced collaborative and assistive features like comments, action items, and Smart Compose.

Slides connect to Google apps

Work on fresh content

With Slides, everyone’s working on the latest version of a presentation. And with edits automatically saved in version history, it’s easy to track or undo changes.

Design slides faster, with built-in intelligence

Make slides faster, with built-in intelligence

Assistive features like Smart Compose and autocorrect help you build slides faster with fewer errors.

Stay productive, even offline

Stay productive, even offline

You can access, create, and edit Slides even without an internet connection, helping you stay productive from anywhere.

Security, compliance, and privacy

badge ISO IEC

Secure by default

We use industry-leading security measures to keep your data safe, including advanced malware protections. Slides is also cloud-native, eliminating the need for local files and minimizing risk to your devices.

Encryption in transit and at rest

All files uploaded to Google Drive or created in Slides are encrypted in transit and at rest.

Compliance to support regulatory requirements

Our products, including Slides, regularly undergo independent verification of their security, privacy, and compliance controls .

Private by design

Slides adheres to the same robust privacy commitments and data protections as the rest of Google Cloud’s enterprise services .

privacy icon

You control your data.

We never use your slides content for ad purposes., we never sell your personal information to third parties., find the plan that’s right for you, google slides is a part of google workspace.

Every plan includes

keep icon

Collaborate from anywhere, on any device

Access, create, and edit your presentations wherever you are — from any mobile device, tablet, or computer — even when offline.

Google Play store

Get a head start with templates

Choose from a variety of presentations, reports, and other professionally-designed templates to kick things off quickly..

Slides Template Proposal

Photo Album

Slides Template Photo album

Book Report

Slides Template Book report

Visit the Slides Template Gallery for more.

Ready to get started?

Build a Custom Full Page Slider with CSS and JavaScript

There are a number of ways of implementing animated full-screen layouts with a large degree of human interaction, and many developers would resort to a JavaScript plugin to save time.

In this article, Toptal JavaScript Developer Stefan Vitasovic demonstrates how you can do it using nothing but CSS and JavaScript, without including a bloated library or plugin in your project.

Build a Custom Full Page Slider with CSS and JavaScript

By Stefan Vitasovic

Stefan is a front-end engineer inspired by modern, interactive layouts. He has worked on hundreds of projects, focusing on high-end UI and UX.

Years of Experience

I work with custom full-screen layouts a lot, practically on a daily basis. Usually, these layouts imply a substantial amount of interaction and animation. Whether it be a time-triggered complex timeline of transitions or a scroll-based user-driven set of events, in most cases, the UI requires more than just using an out-of-the-box plugin solution with a few tweaks and changes. On the other hand, I see many JavaScript developers tend to reach for their favorite slider JS plugin to make their job easier, even though the task may not need all the bells and whistles a certain plugin provides.

Disclaimer: Using one of the many plugins available out there has its perks, of course. You’ll get a variety of options you can use to tweak to your needs without having to do much coding. Also, most plugin authors optimize their code, make it cross-browser and cross-platform compatible, and so on. But still, you get a full-size library included in your project for maybe only one or two different things it provides. I’m not saying using a third-party plugin of any kind is naturally a bad thing, I do it on a daily basis in my projects, just that it is generally a good idea to weigh pros and cons of each approach as it is a good practice in coding. When it comes to doing your own thing this way, it requires a bit more coding knowledge and experience to know what you are looking for, but in the end, you should get a piece of code that does one thing and one thing only the way you want it to.

This article is aimed to show a pure CSS /JS approach in developing a fullscreen scroll-triggered slider layout with custom content animation. In this scaled-down approach, I’ll cover the basic HTML structure you would expect to be delivered from a CMS back-end, modern CSS ( SCSS ) layout techniques, and vanilla JavaScript coding for full interactivity. Being bare-bones, this concept can be easily extended to a larger-scale plugin and/or used in a variety of applications having no dependencies at its core.

The design we are going to create is a minimalistic architect portfolio showcase with featured images and titles of each project. The complete slider in CSS with animations will look like this:

You can check out the demo here , and you can access my Github repo for further details.

HTML Overview

So here’s the basic HTML we will be working with:

A div with the id of hero-slider is our main holder. Inside, the layout is divided into sections:

  • Logo (a static section)
  • Slideshow which we’ll work on mostly
  • Info (a static section)
  • Slider nav which will indicate the currently active slide as well as the total number of slides

Let’s focus on the slideshow section since that is our point of interest in this article. Here we have two parts— main and aux . Main is the div which contains featured images while aux holds image titles. The structure of each slide inside of these two holders is pretty basic. Here we have an image slide inside of the main holder:

The index data attribute is what we’ll use to keep track of where we are at in the slideshow. The abs-mask div we’ll use to create an interesting transition effect and the slide-image div contains the specific featured image. Images are rendered inline as if they were coming directly from a CMS and are set by the end user.

Similarly, the title slides inside of the aux holder:

Each slide title is an H2 tag with the corresponding data attribute and a link to be able to lead to that project’s single page.

The rest of our HTML is pretty straightforward as well. We have a logo at the top, static info which tells the user which page they are on, some description, and slider current/total indicator.

CSS Overview

The source CSS code is written in SCSS , a CSS pre-processor which is then compiled into regular CSS which the browser can interpret. SCSS gives you the advantage of using variables, nested selection, mixins, and other cool stuff, but it needs to be compiled into CSS to have the browser read the code as it should. For the purpose of this tutorial, I’ve used Scout-App to handle the compiling as I’ve wanted to have the tooling at the bare minimum.

I used flexbox to handle the basic side-by-side layout. The idea is to have the slideshow on one side and the info section on the other.

Let’s dive into the positioning and again, focus on the slideshow section:

I’ve set the main full page slider to be absolutely positioned and have the background images stretch the whole area by using the background-size: cover property. To provide more contrast against the slide titles, I’ve set an absolute pseudo-element which acts as an overlay. The aux slider containing slide titles is positioned at the bottom of the screen and on top of the images.

Since only one slide will be visible at a time, I set each title to be absolute as well, and have the holder size calculated via JS to make sure there are no cut-offs, but more about that in one of our upcoming sections. Here you can see the use of an SCSS feature called extending:

Since I used absolute positioning a lot, I pulled this CSS into an extendable to have it easily available in various selectors. Also, I created a mixin called “outlined” to provide a DRY approach when styling the titles and main slider title.

As for the static part of this layout, it has nothing complex about it but here you can see an interesting method when positioning text which has to be on the Y axis instead of its normal flow:

I’d like to draw your attention to the transform-origin property as I found it really underused for this type of layout. The way this element is positioned is that its anchor stays in the upper left corner of the element, setting the rotation point and having the text continuously flow from that point downwards with no issues when it comes to different screen sizes.

Let’s have a look at a more interesting CSS slider part - the initial loading animation:

Usually, this kind of synced animation behavior is achieved using a library - GSAP , for example, is one of the best out there, providing excellent rendering capabilities, is easy to use, and has the timeline functionality which enables the developer to programmatically chain element transitions into each other.

However, as this is a pure CSS /JS example I’ve decided to go really basic here. So each element is set to its starting position by default–either hidden by transform or opacity and shown upon slider load which is triggered by our JS. All transition properties are manually tweaked to ensure a natural and interesting flow with each transition continuing into another providing a pleasant visual experience.

If there’s one thing I would like you to see here, it is the use of the transform property. When moving an HTML element, whether it be a transition or animation, it is advised to use the transform property. I see a lot of people who tend to ruse either margin or padding or even the offsets–top, left, etc. which doesn’t produce adequate results when it comes to rendering.

To gain a more in-depth grasp of how to use CSS when adding interactive behavior, I couldn’t recommend the following article enough.

It’s by Paul Lewis, a Chrome engineer, and covers pretty much everything one should know about pixel rendering in web whether it be CSS or JS.

JavaScript Overview and Full Page Slider Logic

The JavaScript slider animation file is divided into two distinct functions.

The heroSlider function which takes care of all the functionality we need here, and the utils function where I’ve added several reusable utility functions. I’ve commented each of these utility functions to provide context if you are looking to reuse them in your project.

The main function is coded in a way that it has two branches: init and resize . These branches are available via return of the main function and are invoked when necessary. init is the initialization of the main function and it’s triggered on window load event. Similarly, the resize branch is triggered on window resize. The sole purpose of the resize function is to recalculate the title’s slider size on window resize, as title font size may vary.

In the heroSlider function, I’ve provided a slider object which contains all the data and selectors we are going to need:

As a side-note, this approach could be easily adapted if you’re for example using React, as you can store the data in state or use the newly added hooks. To stay on point, let’s just go through what each of the key-value pairs here represents:

  • The first four properties are an HTML reference to the DOM element we’ll manipulate.
  • The handle property will be used to start and stop autoplay functionality.
  • The idle property is a flag which will prevent the user to force scrolling while the slide is in transition.
  • activeIndex will allow us to keep track of the currently active slide
  • interval denotes the autoplay interval of the slider

Upon slider initialization, we invoke two functions:

The setHeight function reaches out to a utility function to set the height of our aux slider based on the maximum title size. This way we ensure that adequate sizing is provided and no slide title will be cut off even when its content drops into two lines.

loadingAnimation function adds a CSS class to the element providing the intro CSS transitions:

As our slider indicator is the last element in the CSS transition timeline, we wait for its transition to end and invoke the start function. By providing additional parameter as an object we ensure that this is triggered only once.

Let’s have a look at the start function:

So when the layout has finished, its initial transition is triggered by loadingAnimation function and the start function takes over. It then triggers autoplay functionality, enables wheel control, determines if we are on a touch or desktop device, and waits for the titles slide first transition to add the appropriate CSS class.

One of the core features in this layout is the autoplay feature. Let’s go over the corresponding function:

First, we set the autoplay flag to true, indicating the slider is in autoplay mode. This flag is useful when determining whether to re-trigger autoplay after the user interacts with the slider. We then reference all slider items (slides), as we’ll change their active class and calculate the total iterations the slider is going to have by adding up all items and dividing by two as we have two synced slider layouts (main and aux) but only one “slider” per se which changes both of them simultaneously.

The most interesting part of the code here is the loop function. It invokes slideChange , providing the slide direction which we’ll go over in a minute, however, the loop function is called a couple of times. Let’s see why.

If the initial argument is evaluated as true, we’ll invoke the loop function as a requestAnimationFrame callback. This is only happening upon the first slider load which triggers immediate slide change. Using requestAnimationFrame we execute the provided callback just before the next frame repaint.

Diagram of the steps used to create the slider.

However, as we want to keep going through slides in autoplay mode we’ll use a repeated call of this same function. This is usually achieved with setInterval. But in this case, we’ll use one of the utility functions– requestInterval . While setInterval would work just well, requestInterval is an advanced concept which relies on requestAnimationFrame and provides a more performant approach. It ensures that function is re-triggered only if the browser tab is active.

More about this concept in this awesome article can be found on CSS tricks . Please note that we assign the return value from this function to our slider.handle property. This unique ID the function returns is available to us and we’ll use it to cancel autoplay later on using cancelAnimationFrame .

Slide Change

The slideChange function is the principal function in the whole concept. It changes slides whether it’d by autoplay or by user trigger. It is aware of slider direction, provides looping so when you come to the last slide you’ll be able to continue to the first slide. Here’s how I’ve coded it:

The idea is to determine the active slide based on its data-index we got from HTML. Let’s address each step:

  • Set slider idle flag to false. This indicates that slide change is in progress and wheel and touch gestures are disabled.
  • The previous slider direction CSS class gets reset and we check for the new one. The direction parameter is provided either by default as ‘next’ if we are coming from the autoplay function or by a user invoked function– wheelControl or touchControl .
  • Based on the direction, we calculate the active slide index and provide the current direction CSS class to the slider. This CSS class is used to determine which transition effect will be used (e.g. right to left or left to right)
  • Slides get their “state” CSS classes (prev, active) reset using another utility function which removes CSS classes but can be invoked on a NodeList, rather than just a single DOM element. Afterward, only previous and currently active slides get those CSS classes added to them. This allows for the CSS to target only those slides and provide adequate transitioning.
  • setCurrent is a callback which updates slider indicator based on the activeIndex.
  • Finally, we wait for the transition of the active image slide to end in order to trigger the waitForIdle callback which restarts autoplay if it was previously interrupted by the user.

User Controls

Based on the screen size, I’ve added two types of user controls–wheel and touch. Wheel control:

Here, we listen to wheel even and if the slider is currently in idle mode (not currently animating a slide change) we determine wheel direction, invoke stopAutoplay to stop the autoplaying function if it’s in progress, and change the slide based on the direction. The stopAutoplay function is nothing but a simple function that sets our autoplay flag to the false value and cancels our interval by invoking cancelRequestInterval utility function passing it the appropriate handle:

Similar to wheelControl , we have touchControl that takes care of touch gestures:

We listen for two events: touchstart and touchmove . Then, we calculate the difference. If it returns a negative value, we change to the next slide as the user has swiped from right to left. On the other hand, if the value is positive, meaning that the user has swiped from left to right, we trigger slideChange with direction passed as “previous.” In both cases, autoplay functionality gets stopped.

This is a pretty simple user gesture implementation. To build on this, we could add previous/next buttons to trigger slideChange on click or add a bulleted list to go directly to a slide based on its index.

CSS/JavaScript Slider Wrap-up and Final Thoughts on CSS

So there you go, a pure CSS /JS way of coding a non-standard slider layout with modern transition effects.

I hope you find this approach useful as a way of thinking and could use something similar in your front-end projects when coding for a project that was not necessarily conventionally designed.

For those of you interested in the image transition effect, I’ll go over this in the next few lines.

If we revisit the slides HTML structure I’ve provided in the intro section we’ll see that each image slide has a div around it with the CSS class of abs-mask . What this div does is that it hides a portion of the visible image by a certain amount by using overflow:hidden and offsetting it in a different direction than the image. For example, if we look at the way the previous slide is coded:

The previous slide has a -100% offset in its X axis, moving it to the left of the current slide, however, the inner abs-mask div is translated 80% to the right, providing a narrower viewport. This, in combination with having a larger z-index for the active slide results in a sort of cover effect—the active image covers the previous while in the same time extending its visible area by moving the mask which provides the full view.

Understanding the basics

What are css properties that can be animated.

The most standard CSS properties we can animate are transform, opacity, color, background-color, height, width, etc. The complete list can be found in Mozilla technical documentation.

What is a CSS keyframe animation?

A CSS keyframe animation is 0-100% time representation of all the transitions that should occur on the selected element for a specified period of time. This way multiple transitions can be combined into a seamless visual representation.

What is a transition property?

A transition is a property that allows for CSS properties to be transitioned between two values. For example, hovering over an element and let it transition its opacity from 0 to 1.

What is CSS specificity?

By interpreting specificity the browser decides which CSS rule to interpret. CSS specificity is dependant on selector types: Type selectors, Class selectors, ID selectors. Combining multiple selectors, adding sibling and child combinators manipulates the specificity as well.

CSS in the browser: How does it work?

To get your HTML content styled by CSS the browser uses the following method. Upon loading HTML, it combines its content with the style information provided, creates a DOM tree, and finally displays its contents.

Stefan Vitasovic's profile image

Located in Belgrade, Serbia

Member since October 18, 2018

About the author

Wordpress-powered angular: jwt authentication using graphql.

World-class articles, delivered weekly.

Subscription implies consent to our privacy policy

Toptal Developers

  • Algorithm Developers
  • Angular Developers
  • AWS Developers
  • Azure Developers
  • Big Data Architects
  • Blockchain Developers
  • Business Intelligence Developers
  • C Developers
  • Computer Vision Developers
  • Django Developers
  • Docker Developers
  • Elixir Developers
  • Go Engineers
  • GraphQL Developers
  • Jenkins Developers
  • Kotlin Developers
  • Kubernetes Experts
  • Machine Learning Engineers
  • Magento Developers
  • .NET Developers
  • R Developers
  • React Native Developers
  • Ruby on Rails Developers
  • Salesforce Developers
  • SQL Developers
  • Tableau Developers
  • Unreal Engine Developers
  • Xamarin Developers
  • View More Freelance Developers

Join the Toptal ® community.

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.

Content by Category

  • Freelance Design
  • General Design
  • Inspiration
  • Logo Design
  • Mockup Templates
  • Motion Design
  • Photography
  • Presentation & Slides
  • Print Design
  • WordPress Plugins
  • WordPress Themes

Content by Application

  • After Effects
  • Apple Motion
  • DaVinci Resolve
  • Final Cut Pro
  • Illustrator
  • Premiere Pro

adobe stock icon

40 Creative Examples of Sliders in Web Design for Inspiration

Using slideshows or sliders within web design are an effective method of highlighting your portfolio projects, eCommerce products or even key site related messages and information. As the current landing page design trends dictates, they are typically found above the fold on the homepage.

For this article, we have found some high quality, beautifully designed and inspirational examples of sliders. Enjoy :)

Backyard Burgers

Feeling hungry? Take a look at this website and choose the menu you would like to satisfy your appetite with.

Backyard Burgers hero image slider

A very attractive and dynamic website with loads of creatively designed and interactive slides.

Converse hero image slider

Four beautiful and visually appealing slides that change automatically or you can also change the slide by clicking the small button to view the individual slides.

Hm Andrei hero image slider

Marcs Design

The slides have been incorporated well in this design, giving the impression that they are being browsed with a laptop.

Marcs Design hero image slider

Marco Rotoli

Marco Rotoli hero image slider

Tea Round App

Tea Round App hero image slider

These Are Things

These Are Things hero image slider

A vertically moving slide show with a very catchy and appealing effect. You can click the number or the arrow to view the next slide.

Studio XL hero image slider

Josh Smith Design

This websites main page consists of full size slides with the navigation options presented at the bottom of the page.

josh Smith Design hero image slider

Utah travel

Lovely slideshow that is presented as a stack of photographs.

Utah travel hero image slider

Doopsuiker Poppies

Two simple yet beautifully designed sliders at the front of this webpage.

suikerdraakje hero image slider

Visitphilly

Here you will see that a realistic view is presented by each individual slide that look simply amazing and attention grabbing.

Visitphilly hero image slider

A horizontal website with 42 slides that you can browse from left to right. The slide quality is truly first class.

Sven Prim hero image slider

Five different and classic slides of some of the World’s most beautiful places. Click on a small thumbnail to view its enlarged view.

TravelBuzz hero image slider

Wearesignals

A dark themed website with four different and unique slides that highlights the key points about this website.

Wearesignals hero image slider

Espressoa Partments

The slides of the apartments change dynamically and gives a great overview of how each apartment looks.

Espressoa Partments hero image slider

Malcolm Reading

Here the slides change vertically one by one. They specialize in the arts, museums and public realm.

Malcolm Reading hero image slider

A very interactive website that presents the slides in a totally different manner and allows you to browse further.

Rottefella hero image slider

Jax Vineyards

Jax Vineyards hero image slider

Full Fat Studios

Full Fat Studios hero image slider

A French website showcasing the key points through different well designed slides.

Nealite hero image slider

New to the website? Simply check out the slides and you will get the idea what the website is all about and what it offers.

Slidedeck hero image slider

Design Royale

Design Royale hero image slider

Purple Rock Scissors

Purple Rock Scissors hero image slider

La Masa Mimatta

Very colorful and beautifully designed slides that integrate with the website very well.

La Masa Mimatta hero image slider

Fox Classics

The things that set this website apart are its high quality graphics and collection of images for the slides.

Fox Classics hero image slider

Charlie Gentle

Here the slides are divided in two section with arrows placed at the centre to navigate. When you click the arrow, both the slides move simultaneously.

Charlie Gentle hero image slider

Galan Design

Galan Design hero image slider

Studio Break Fast

An extremely interactive website that demonstrates the slides in a completely different mode and allow you to browse further.

Studio Break Fast hero image slider

Household Design

Household Design hero image slider

Print Mornyc

The website of Print Mor NYC highlights their printing excellence in their slides. Simply click the arrow to move to the next slide.

Print Mornyc hero image slider

Hwo Architects

The slides move vertically giving you an idea of what you can expect from the website.

Hwo Architects hero image slider

Grunnarbeid

Grunnarbeid hero image slider

Glitz Photography

Exceptionally colorful slides that incorporate with the website incredibly well.

Glitz Photography hero image slider

This is what the slide show of a mobile development website should be.

DFANY hero image slider

Style and Conscience

Style and Conscience hero image slider

Bohemia Design

Bohemia Design hero image slider

Edit Studios

Edit Studios hero image slider

Dconvulsions

Dconvulsions hero image slider

Related Topics

  • Web Design Inspiration

Google slides UI on laptop and mobile

How to Engage New Website Visitors With Web Slideshows

Jamie Juviler

Updated: June 15, 2022

Published: September 08, 2020

Eight seconds . That’s how much time you have to capture the average internet user’s attention on your website. You can tweak your content and page layout as much as possible, but there’s no way around it: Engaging website visitors, especially first-timers, is a real challenge for online businesses.

two women using a computer in an office to create a web slideshow

However, this challenge is very much solvable thanks to the numerous web design technologies at our disposal. Among all the methods for quickly grabbing attention and prompting action, you’ve probably seen the web slideshow technique. And there’s a good chance it could work on your site, too.

Now, when you hear the term slideshow , your mind might immediately jump to PowerPoint presentation , and from there, conference room and boring .

If so, try to forget about PowerPoint for a moment. As it turns out, web slideshows are among the most popular and effective methods for conveying visual content to visitors.

In this guide, we’ll learn about common uses of web slideshows, the best practices for implementing them, and how to get started with placing one on your website.

What is a website slideshow?

A website slideshow, also known as a “slider,” is a web page feature for presenting multiple images in a gallery-like manner. A slider displays one image at a time, and cycles between images automatically after a timeout and/or after a user input, such as a swipe or a button click.

Specifically, online businesses tend to use sliders on their homepage to communicate their missions or to showcase CTAs for new products. Take this simple example from Microsoft’s website :

Image Source

This style of presentation aids the browsing experience in two primary ways. First, it draws the viewer in by placing important content above the fold, no scrolling required. This content could be new products or offers, an announcement or blog post, or anything else visitors should know.

Second, web slideshows can add visual flair to your pages. For example, cycling through big, vibrant images creates a memorable experience and can even evoke certain positive emotions in readers that they then associate with your brand. This is especially effective for artist portfolios, media companies, and other organizations with a strong emphasis on aesthetics.

When to Use a Web Slideshow

You’ll find sliders across the web, but there are some cases in particular when they work particularly well. Let’s do a quick rundown of their best uses:

New Products/Offers

Place a slider on your homepage and populate it with CTAs showcasing the latest your business has to offer, à la the Microsoft example above. New to CTAs? Check out our favorite examples .

General Information

Many organizations use sliders to communicate their mission, strategy, or story. You’ll see this frequently on sites for consulting agencies, nonprofit and educational organizations, and special projects without a physical product to present.

Product Showcase

Rather than cycling through multiple products, you might focus on one product or product line. With this approach, each slide can explain a different aspect, benefit, or iteration of your product.

Rather than presenting everything at once, a slider breaks down the information into digestible pieces of content. For example, check out this sleek design from Nike, showcasing 15 years of the Dunk sneaker line.

Media companies, creative organizations, and freelance creatives often use sliders to highlight their latest or best work. You might present multiple images from a single project, or multiple projects with links to their dedicated pages on your site.

Featured Articles

News sites and blogs with frequent updates can add CTAs for their latest or most popular content in a slideshow. Avoid plain text CTAs here — instead, use featured images for each post to direct users’ eyes toward your new content.

Now that we’ve seen what sliders can do, let’s next discuss how to implement them. And yes, there is a wrong way to make a slider.

Web Slideshow Best Practices

  • Enable automatic and manual transitions.
  • Visually indicate the number of slides.
  • Optimize for page performance.
  • Mind the transition effects.
  • Make it mobile-friendly.
  • Make it accessible.

From a usability standpoint, sliders are a bit of a double-edged sword. Due to their popularity, slideshows are familiar to the vast majority of people who land on your page, and they should have no issue understanding the purpose of the feature.

However, this also means that poorly-designed sliders will disengage users very quickly, especially if it’s the literal first thing they see. For this reason, it’s essential to carefully plan out your slideshow element and follow these six best practices:

1. Enable automatic and manual transitions.

As I mentioned, web slideshows can rotate through their content automatically based on a time, or manually when a user clicks an arrow button or swipes the screen.

We recommend your slider allows for both methods. On page load, the slider transitions automatically, providing enough time for the user to take in each image. If a user wants to change slides themselves, they can do this too, which might deactivate the timed transitions. This approach gives users better control over the content they want to view. Also, this is how most web sliders are implemented, so it’s intuitive for visitors.

To aid users, place your arrow buttons on both sides of the element (left and right side, or top and bottom). These buttons can be visible within the element by default, or appear when a user hovers over the slideshow. That style choice is up to you.

2. Visually indicate the number of slides.

It’s a good idea to signal how many total slides there are in your slider, so users know how much content is left to view. You can do this with thumbnails that appear on hover-over, numbers (e.g., 1/5, 2/5…), or another subtle visual cue like in the Microsoft example above.

3. Optimize for page performance.

If your page takes more than a few seconds to load, visitors will start losing interest. Many won’t even see the full slider you worked so hard on.

First, think about the number of images in your slideshow. The more slides, the longer the load time, so only include the slides you need. Save the rest of your content for later on the page. Then, optimize your slider images by reducing the file size for each image as much as possible.

Finally, many slideshow builders will implement lazy loading . Only the current slide will load first, and hidden slides won’t load until requested to be shown. This feature spreads out loading needs as much as possible, so look out for it in your search for a slider builder.

4. Mind the transition effects.

Transitions are one seemingly small detail of sliders that folks have very much grown accustomed to, and anything outside the norm could be off-putting.

You might be tempted to bolster your slide transitions with a dissolve effect or a star wipe. I admire your taste, but try to resist that urge and keep your transitions simple. You’re best off going with a simple fade effect or horizontal/vertical pan. This call is up to you, but the less distracting and jarring your transition, the better.

5. Make it mobile-friendly.

Sliders are highly-dynamic, image-heavy elements. If your module isn’t designed to work on smaller screens, it might come out looking like a highly-dynamic, image-heavy mess.

As they make up close to half of your traffic , do your mobile visitors a favor and apply responsive web design principles to your sliders (reputable slider builders and plugins can do this). Or, consider removing the slider from your mobile site altogether to reduce clutter.

6. Make it accessible.

Finally, all of your sliders should be as accessible as you can make them. This means mobile responsiveness, image alt text for each slide (and a textual alternative for the slideshow itself if possible), enabling manual slide transitions, and triggering these transitions with arrow keys in addition to button clicks.

How to Make a Slideshow for a Webpage

Want to give sliders a shot? You have a few options. Let’s review what’s available, from least technical to most technical implementation.

Use a slideshow builder.

For a lightweight solution, use specialized web slideshow building software. With these tools, simply pick your slider content, tweak the settings, and embed the slider element into your page. Start with a free tool like Bannersnack or Cincopa and see how you like it, then consider upgrading to a paid option.

Popular website builders also enable slider functionality, either natively or through either a third-party add-on. Make sure these tools can make your slideshows both responsive and accessible to users.

Use a WordPress slider theme/plugin.

If your website is built on the WordPress CMS, many themes come with built-in slider modules. There are also numerous free and premium slider plugins that will add slideshow functionality to your site, on any post or page. For your WooCommerce store, consider a WooCommerce slider plugin for product displays.

We recommend adding sliders with plugin over a theme, since changing your theme won’t scrap your slideshow. That said, premium themes with sliders are quite convenient in this case.

Manually program a slider.

If you’re feeling brave, try coding an image slider plugin yourself. To work properly, a slider needs HTML, CSS, and JavaScript , the three big languages in frontend development.

Both W3Schools and freeCodeCamp offer tutorials for building your image slider. Or follow our guide to building an image carousel in Bootstrap CSS . Program the slider in, then tweak the CSS to style your new module to fit the rest of your website.

Bonus: Create a Video Slideshow

As an alternative to a manually programmed interactive image slider, you can opt for a video slideshow that displays the same information. If you’re short on time or resources, we highly recommend the free Slideshow Maker from Canva . This tool was designed to be fast, intuitive, and easy for anyone to use, including those without design chops. With Canva, you can easily create slideshows from templates themed for different niches, like explainers, food, and fashion. Populate your slideshow with images and videos from your own library and from Canva’s library of stock media. Then, customize your slideshow with icons, illustrations, animations, and music. Finally, download your slideshow for free (and nope, there’s no watermark).

preview of the free web slideshow builder tool from Canva

Not Just a PowerPoint

Web slideshows aren’t perfectly suited for everyone. However, if you want to emphasize visuals while lowering your bounce rate, we recommend trying them out.

When adding a slider, keep our best practices in mind, and ensure that it serves the overall mission of your site, rather than distract from it. Finally, be sure to keep them visually pleasing and engaging for all. This isn’t a brightly lit conference room, it’s your business!

New Call-to-action

Don't forget to share this post!

Related articles.

I Tried 10 Web Design Frameworks to Find the Best Ones in 2024 (Results & Recommendations)

I Tried 10 Web Design Frameworks to Find the Best Ones in 2024 (Results & Recommendations)

How to Fuse Website Design and SEO [Tips & Examples]

How to Fuse Website Design and SEO [Tips & Examples]

I Tried 10 Responsive Web Design Tools to See if They’re Worth It (2024 Results & Recommendations)

I Tried 10 Responsive Web Design Tools to See if They’re Worth It (2024 Results & Recommendations)

A Deep Dive Into Inclusive Web Design in 2024

A Deep Dive Into Inclusive Web Design in 2024

Website Footers: Best Design Practices & 24 Top Examples

Website Footers: Best Design Practices & 24 Top Examples

The Art of Engagement: Elevating Web Design with Multimedia Magic

The Art of Engagement: Elevating Web Design with Multimedia Magic

User Interface (UI) Design: What Is It? The Beginner’s Guide

User Interface (UI) Design: What Is It? The Beginner’s Guide

The 10 Best Web Design Books (+Recommendations)

The 10 Best Web Design Books (+Recommendations)

Is Your Website EEAT-compliant? What Developers Should Keep In Mind

Is Your Website EEAT-compliant? What Developers Should Keep In Mind

What Is Fluid Design and How Is It Used on Websites?

What Is Fluid Design and How Is It Used on Websites?

Access hundreds of website templates in HubSpot's Theme Marketplace

CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience

How-To Geek

The beginner's guide to google slides.

Want to learn the basics about Google Slides? This beginner's guide walks you through everything from importing your PowerPoint files to sharing presentations online.

Quick Links

What is google slides, how to sign up for an account, how to create a blank presentation, how to import a microsoft powerpoint presentation, how to check your spelling in google slides, how to collaborate on presentations, how to see all recent changes to a presentation, how to link to a specific slide, how to insert special characters into a slide, how to use google slides offline.

If you’re just getting started with Google Slides, its extensive features and add-ons can be a little overwhelming. Here are some tips to help you get going with this powerful alternative to Microsoft PowerPoint.

If you’ve heard of Google Slides before, feel free to skip ahead; if you haven't, here’s a crash course on what you need to know. We’ll go over the basics and get you brushed up on what Google Slides is and how you can get started right away.

Slides is a free, web-based presentation program designed to compete with Microsoft Office PowerPoint. It's part of G Suite---Google's complete office suite (though some people refer to it all as Google Docs). The other main services included in the cloud-based suite are Sheets (Excel) and Docs (Word).

Related: What is Google Workspace, Anyway?

Google Slides is available on all devices and platforms; all you need is an internet connection and a web browser (or, in the case of mobile, the Android and iOS apps ). Google does the rest and handles the brunt of the heavy lifting, while it runs the software in the cloud.

Slides supports several file types, including  .ppt, .pptx , .odp, .jpg, .svg, and .pdf. This makes it easy to view or convert Microsoft Office files directly from Google Drive or insert images directly into a slide.

Related: What Is a PPTX File (and How Do I Open One)?

And since Slides is an online presentation program, you can share and collaborate with multiple people on the same file, and track revisions, changes, and suggestions, all in real-time.

Have you heard enough? Let’s get started.

Before you can use Google Slides, you have to sign up for a Google account (an @gmail account). If you already have one, feel free to move on to the next section. If not, we’ll go over the simplest way to create a Google account and get you set up with Slides.

Head over to  accounts.google.com , click "Create Account," and then click "For Myself."

Click "Create Account," and then click "For Myself."

On the next page, you provide some information---first and last name, username, and password---to create your account.

The Create your Google Account page.

Also, you have to verify your phone number, so Google can make sure you’re not a bot.

The "Verifying your phone number" screen on Google.

After you verify your phone number, the subsequent pages require you to provide a recovery email address and your date of birth and gender. You must also agree to the privacy statement and terms of service. After that, you’re the proud new owner of a Google account.

Now that you have a Google account, it’s time to create your first presentation. Head over to  Google Slides  and place the cursor on the multicolored "+" icon in the bottom-right corner.

Place your cursor on the multicolored plus sign (+).

The + turns into a black pencil icon; click it.

Click the black pencil icon.

Pro Tip: Type 

 into the address bar from any browser and hit Enter to automatically create and open a new blank document.

Drag and drop your PowerPoint file directly into Google Drive.

Even if you’re new to Google Slides, you might already have a collection of Microsoft PowerPoint files you’d like to be able to use. If that’s the case, then you have to  upload all your presentations  before you can view them. While it might not support some of the more advanced features and effects of some PowerPoint presentations, it works pretty well.

When you import a PowerPoint presentation, you can use either Google Slides or  Drive  to upload your files. Both methods let you drag and drop a file from your computer directly into the web browser for easy uploads. Your Drive houses all of your uploaded files, but---for the sake of convenience---when you go to the Slides homepage, it only shows you presentation-type files.

Google Slides homepage.

From the Slides homepage, click the folder icon in the top right, and then click the "Upload" tab. Now, drag and drop any files you want to upload directly into this window.

Click the folder icon in the top corner, click the Upload tab, and then drag a file from your computer into the window.

Once the file uploads, Slides opens it automatically, and it's ready for you to edit, share, or collaborate.

To open a PowerPoint presentation that you want to edit, click the filename with the "P" next to it from your Google Slides homepage.

Click the filename with the "P" next to it.

Click to either view the PowerPoint file or edit it in Slides.

Click "View Only" or "Edit in Google Slides."

After you’ve finished editing your file, you can download and export your presentation back into a Microsoft PowerPoint format. Just go to File > Download As, and then click the "Microsoft PowerPoint" option.

Click "File," "Download As," and then click "Microsoft PowerPoint."

If you’d rather download your presentation as a PDF, ODP, JPEG, TXT, etc., you can do that here, as well.

The download format options window in Google Slides.

Related: How to Import a PowerPoint Presentation into Google Slides

Now that you have a few presentations, it’s time to make sure your  spelling and grammar are correct . Slides is equipped with a spellchecker. If you misspell something, it underlines the error with a squiggly line and prompts you to make a change.

This should be on by default, but you can make sure in Tools > Spelling > Underline Errors.

Click "Tools," select "Spelling," and then click "Underline Errors."

To see spelling corrections and suggestions, right-click the word with the line underneath. Alternatively, press Ctrl+Alt+X (Windows) or Command+Alt+X (Mac) to open the Spell Check and Grammar tool.

Right-click the error to view the spellchecker's correction.

Along with a spellchecker, Google Slides comes loaded with a built-in dictionary and thesaurus. To use them, highlight a word, right-click it, and then click "Define [word]."

Click "Define [word]."

While this should get you started, we have  a deeper dive into Google’s spelling and grammar checker  if you want more info.

Related: How to Check Your Spelling in Google Docs

The "Share with Others" options in Google Slides.

One of the best features of Google Slides is its ability to  generate a shareable link.  Anyone you share the link with can view, suggest edits to, or directly edit the presentation. This eliminates the hassle of sending a file back and forth between collaborators. Each person has her own text entry cursor to use on her computer.

To do this, click the orange "Share" button in the file you want to share. Next, choose how and with whom you want to send a link to the file. You can type email addresses or click "Get Shareable Link" in the top corner to hand out the invitation yourself.

Type email addresses or click "Get Shareable Link."

From the drop-down menu, you can select one of these options for what other users can do:

  • Off:  Sharing is disabled. If you’ve previously shared a link with others, it will no longer work and revokes any permissions they once had.
  • Anyone with the link can edit:  Gives the shared users full read/write access. They still can’t delete it from your Drive, though---this is just for the contents of the file.
  • Anyone with the link can comment:  Allows shared users to leave comments which is handy for team projects.
  • Anyone with the link can view : Shared users can view the file, but can’t edit it in any way. This is the default action when you share a file, and it's the best option if you’re trying to share a file for download.

You can do a lot more with these shareable links, as they also work with other Drive files and on mobile. For a deeper look at how links work and how to generate them,  check out our post .

Related: How to Create Shareable Download Links for Files on Google Drive

The Version history of a presentation in Google Slides.

When you share documents with others, it’s difficult to keep track of all the small changes that happen if you’re not present. For that, there’s  revision history . Google keeps track of all the changes that occur in a document and groups them into periods to reduce clutter. You can even revert a file to any of the previous versions listed in the history with a click of your mouse.

You can view a list of all recent changes by clicking File > Version History > See Version History. Alternatively, you can press Ctrl+Alt+Shift+H (Command+Option+Shift+H on Mac).

Click "File," select "Version History," and then click "See Version History."

Related: How to See Recent Changes to Your Google Docs, Sheets, or Slides File

You can also share a link to a specific slide in your presentation with a friend or coworker, without having to mention which one you're referencing. When someone clicks the link and the presentation loads, it jumps directly to the slide you're referencing. You do have to enable file sharing before you can link to a specific slide in your presentation, though.

Because each slide has a unique URL, all you have to do to link to one is click it in the left pane, and then copy the URL from the address bar.

Click the slide, and then copy the URL from the address bar.

Google Slides also has a character insertion tool. This allows you to insert special characters into your presentation without having to remember any Alt-codes. There are tons of symbols, characters, languages, and so much more. So, whether you want an arrow, different language scripts, or if you just want a few silly emojis to spruce up your presentation, Google Slides makes it easy to include them.

To open the character insertion tool, click "Insert," and then click "Special Characters."

Click "Insert," and then click "Special Characters."

From here, you can manually search for specific characters with the drop-down menus.

The "Insert Special Characters" drop-down menu in Google Slides.

Use the search bar to find a specific character or emoji.

The "Insert Special Characters" search bar with "smiling" typed in and the resulting emojis.

You can also use your drawing skills to search.

The "Draw " search feature with a sad face drawn in and the resulting emojis.

Related: How to Insert Symbols into Google Docs and Slides

What happens if you need to access Google Slides but don’t have an internet connection? Although Slides is a web-based product, that  doesn’t mean you can’t use it offline . Any changes you make to the file offline will update the next time you connect to the internet. First, download the extension for Chrome.

To enable a presentation for offline use, go to the Google Slides’ homepage and, in the top-left corner, click the Hamburger menu > Settings. Once here, toggle "Offline" to the On position, and then click "OK."

Click the toggle next to "Offline" to the On position, and then click "OK."

To save storage space on your local machine, Google only downloads and makes the most recently accessed files available offline. To manually enable a file, click the three dots icon, and then toggle "Available Offline" to On.

Click the three dots icon, and then toggle-on "Available Offline."

Related: How to Use Google Docs Offline

Google Slides is a powerful, feature-rich alternative to Microsoft Office's PowerPoint. It's also completely free to use with an internet connection and a Google Account, making it a legitimate competitor for Microsoft.

Beautiful Examples of Sliders in Website Design

Website Examples Nataly Birch • May 26, 2022 • 21 minutes READ

Sliders in web design are one of the most controversial user interface units. Some people love them; some people hate them. The same goes to web developers: some developers cannot imagine a website without them; others never use them.

The main reason for such disagreement is that while websites sliders are great instruments for displaying lots of information within small space, at the same time, they can be SEO-killers, user experience blunders, and destroyers of marketing strategies . Therefore, with such strong arguments for and against, using sliders in web design is always a case of personal preferences.

No-Code Website Builder

  • How to Create a Responsive Image Slider in jQuery and CSS3
  • How to Create an Image Slider using jQuery and CSS3
  • Create a Full-Screen Slider Using HTML, CSS3 and jQuery
  • How to Create a Stylish Image Content Slider in Pure CSS3

Let us consider the essentials and pros and cons of sliders in web design as well as beautiful websites sliders examples so that you can decide on our own whether to use carousels in your next project or not.

With Postcards Email Builder you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before.

Websites Sliders: Essentials

In essence, a website slider is just a carousel for displaying well-organized pieces of information one by one in a cycle. Its main constituents are:

  • Container, a box that covers everything.
  • Slide, a place where the content sits. Here you can add your piece of information: images, videos , titles, text, buttons , and much more.
  • Navigation, a tool for guiding through the slides. It can be left and right arrows, plain “prev” and “next” located on the sides, or even classic music player-inspired controls that let people control autoplay and pause options.
  • Pagination, aka additional navigation. It can be traditional bullets or numbers placed on the bottom of the box, or some modern solutions like a set of short lines arranged in a stack.

On top of that, sliders in web design have a range of transition effects to avoid abrupt and overwhelming shifting between blocks of information. Modern websites sliders examples are also populated with dynamic effects, interactive features, and various pioneering tricks.

There are many ways to create a slider. You can use Bootstrap , jQuery plugins , or simply build everything from scratch. In this case, consider these helpful tutorials:

Beautiful Examples of Sliders in Website Design

Good Reasons for Using Slider in Web Design

Although a large share of developers talks colleagues out of using sliders in web design, there are some good reasons for using carousels on your website.

First, if you do not have much space but want to deliver lots of information, then carousels are just irreplaceable. No one likes to read long pages. With a compact and neat structure, carousels help to create a comfortable user experience. When the information is dished up in bite-sized portions and occupies a relatively small area, it is much easier to zero in on it, digest it and get real value.

Secondly, website sliders can be critical in achieving goals in the marketing strategy. Imagine you have an e-commerce store. Chances are you have a series of photoshoots of products. Predictably, you want to show these products under various angles or create a product tour so that your clients can fully appreciate the potential and value of the offer. A slider will demonstrate all these shots and keep prospects engaged despite their short attention spans.

Finally, there are many websites sliders examples with testimonials that build trust and credibility in the online audience. Instead of creating a long page with numerous clients’ feedbacks, it is much better to gather everything under one roof, set a comfortable pace for cycling, and auto-play the carousel.

There are many other compelling reasons for using sliders in web design, such as

With Startup App and Slides App you can build unlimited websites using the online website editor which includes ready-made designed and coded elements, templates and themes.

  • Make an impression on the hero area .
  • Reinforce the impact of the overall design and experience.
  • Show highlights engaging users before the main content.
  • Provide helpful visual material for the content.
  • Demonstrate not one but two or three new additions or popular offers.
  • Draw the user’s attention and focus it on one section.
  • Display text snippets elegantly and unobtrusively.
  • Enrich content with information right inside the reading flow.
  • Create a promotional landing page.
  • Power modern storytelling experiences, especially those that need to cover lots of information.

Good Reasons for Using Slider in Web Design

Personal portfolio of Tomek Michalski

Cons of Sliders in Web Design

We have already outlined some strong reasons for using sliders in web design. It is time to throw some cold water on everything since there is a number of valid cons:

  • The poorly-made slider is considered bad by search engines. It can easily ruin your SEO scores.
  • The slider may slow down the website. Not only does it negatively influence user experience, but it is also bad for search engines since Google considers the website’s speed as weighty criteria for ranking.
  • According to statistics, people do not like to click on carousels or CTAs in slides. Therefore, they are almost useless for increasing conversion rates .
  • Too many options may confuse customers and make them even more indecisive.
  • The slider may work incorrectly on small screens due to poor optimization. This can scare away mobile audience that is prevailing these days.
  • In a small screen, content in the slider may be challenging to interact with. Therefore, the carousel requires special styles and behavior for mobile telephones and tablets.
  • Some people consider sliders as advertisement banners, ignoring them completely.
  • If the browser does not support JavaScript or some modern CSS features, then the slider may break the entire design and structure.
  • Majority websites sliders do not meet accessibility requirements making them blind spots for disabled people.

Some of these disadvantages are serious, like, bad ranking in Google or poor accessibility. However, there is no obstacle insurmountable. For instance, if your slider affects page load speed due to heavy jQuery scripts, then it should be revised and properly optimized . The same can be done with the majority of items in the list.

When the slider is well-thought-out, there is no reason to avoid it. Let us consider some good tips on how to use sliders in web design along with good websites sliders examples.

Cons of Sliders in Web Design

How to Use Sliders in Web Design: Tips

The web is teeming with websites sliders examples, but not all of them bring benefits to the projects.

The deal is, your slider may have an impressive design or mind-blowing interactive features that make it look like a top-notch user interface element. However, if it does not bring value to the audience or even worse if it conflicts with marketing strategies or upsets the user experience, it will be useless or even harmful.

Consider two sliders examples that demonstrate how you can fail the mission even with an awesome idea in the core.

Panamaera is a digital agency with creative juice flowing. The company has a single screen website that is a popular choice these days.

Predictably, the horizontal slider is a heart and soul of it. It comfortably accommodates all the favorite works presented as short videos. It is spiced up with inspiring transition effects and mouse-based interactivity.

Without a doubt, the carousel does its job well: it displays content and draws attention with its modern look, but it lacks in good user experience. The reason for that is banal: navigation is a real nightmare.

There are no apparent ways to move through the slides. You will not find here customary left and right arrows as well as prev and next buttons. The bullets-based pagination is also missing. All you have is just a microscopic serial number that indicates the current slide. To make matters worse, the speed of cycling is high; you have to switch your attention all the time.

The rule of thumb: users should always be in control, and a way to gain this control should be evident from the get-go. No navigation – no user experience.

How to Use Sliders in Web Design

The same goes to the personal portfolio of Rik Wanders .

Again, we can see a one-screen promo page where horizontal slider underlies the aesthetics. Unlike the previous example, it does not have any intricate features or modern tricks. Though, it certainly does have a sense of style.

What about navigation? Well, it is here where the shoe pinches. If you want to shift between slides manually, then you need to guess how to do this since there is no navigation nor pagination nor thumbnails, whatsoever. The catch is you need to use the keyboard to shift between slides. Therefore, for regular people who are accustomed to using a mouse for surfing through the web, it can be a true challenge to figure out that.

Rik Wanders

Rik Wanders

To deliver result with the slider, stick to these basic rules:

  • Always provide navigation. Do not rely on user’s instincts on figuring out how to deal with the component by themselves. Navigation is must-have—the more obvious, the better. Side arrows are commonly used for this purpose. Stick to this convention since it will save you from lots of misunderstandings and disappointments.
  • If it fits your design, add pagination. Although it is not critical to have pagination, nevertheless, it is highly recommended to have an extra type of navigation in a bank.
  • Navigation should meet touch-screen devices. Specifically, your users should be allowed to drag slides or swipe through slides.
  • Set the delay time properly. If your users do not have enough time to read the information on the slide, they will be gutted and just skip this section or even worse go away.
  • If you want to say something important, say it on the first slide. Due to the short attention span and banner blindness, users may simply ignore interaction with the website slider. However, one thing is for sure; they will certainly see the first slide, so chances are they will get its message.
  • Do not overdo with the effects. If you have an impressive transition effect, maybe WebGL-powered interactive features inbuilt in each slide will be a little too much. Use only one intricate solution.
  • Use WebGL, Three.js, and other high-end libraries with caution. Remember, not all users will be capable of seeing them in action. Not only because their browsers may not support them, but also because these solutions may slow down their PCs or laptops.
  • Make slider accessible for all groups of people. For example, set alts for images, supply HTML blocks with additional information for read-only devices, etc.
  • Test a slider across all screen sizes, browsers, and devices to provide a consistent experience for users.

Alan Menken

Alan Menken

Types of Sliders in Web Design

Sliders in web design can be classified according to various criteria. For example, depending on a purpose, we can break them into several categories:

  • Hero area sliders to enhance the first impression.
  • Presentation sliders to display portfolio pieces.
  • Text snippet carousels.
  • Showreels, sliders that include short videos of the most impressive works.
  • Informational sliders to support the content with accompanying visual material as well as provide extra data neatly and compactly.
  • Testimonial sliders to reinforce the brand and company.
  • Product sliders, etc.

Depending on the design and experience, we can break them into other categories:

  • image sliders;
  • video sliders;
  • dynamic sliders;
  • interactive sliders;
  • 3D sliders, etc.

However, in general, we outline just two main types: horizontal sliders and vertical sliders.

Horizontal Sliders in Web Design

Though it is hard to say when the first slider was born, however, it all started with the horizontal one. It was and still is a top choice among web developers. Therefore, we can see a whole range of horizontal sliders examples on the web. Let us consider some of them.

Examples of Horizontal Sliders in Web Design

The first one to consider is the Personal portfolio of Yannis Yannakopoulos. The portfolio is mind-blowing. It is impressive and original. It seems that Yannis perfectly knows how to get the most out of a slider in web design

The slideshow provides a solid foundation for the artist to show off. It has modern tricks and extravagant solutions, including mouse-based interactivity that makes it look incredible. Also, the artist has taken care of handy navigation, putting the user in the driver’s seat.

Horizontal Sliders

Another case in point and another personal portfolio ; this time it is a personal website of Gosha Khidzhakadze. Unlike Yannis, Gosha has gone for bite-sized slides. As a result, we can see two and even three different slides simultaneously. However, they do not interfere with each other. On the contrary, they complement each other reinforcing the idea.

What’s more, even though slides have intricate hover effects, still the carousel is used as a supporting device. Placed on the back, it gives way to the overwhelming title “Gosha,” thereby contributing to the overall aesthetics, supporting the brand identity, and hinting about the artistic and professional level of an owner.

Horizontal Slider

Vertical Sliders in Web Design

Although vertical sliders in web design are not as popular as horizontal ones, though they have certainly carved a niche for themselves. Consider some everyday situations when vertical sliders are top choices.

  • A vertical slider is a great solution when the developer wants to surprise the audience with an unexpected twist without reinventing the wheel. In this particular case, shifting between slides along Y-axis may easily do the work.
  • A vertical slider is an excellent basis on which you can build on extravagant solutions for hero areas. As a rule, this approach can be seen in personal portfolios whose welcome screens are jazzed up with modern interactions and fancy dynamic effects.
  • The vertical sliders power many modern storytelling experiences, especially those that need to tell a story in small, easily digestible and appetizing portions.
  • A vertical slider is used to create single-page microsites .

Consider two representative vertical sliders examples.

Examples of Vertical Sliders in Web Design

Climate History is a typical website slider example of nowadays that lures in the online audience with a splendid storytelling experience. The website aims to raise awareness about the burning issue without scaring people away.  Therefore, the vertical slider where the content and dynamic solutions create a perfect symbiosis is just what the doctor ordered.

Here you can see 14 slides. Can you imagine a horizontal slider with the same amount? I bet it will kill the mood instantly. However, this is not a case. A vertical slider deals with this situation flawlessly. It tells the story and, at the same time, keeps people engaged.

Examples of Vertical Sliders

Although the official website of Cloudforce cannot boast of the same impressive amount of slides, it has just 6; still, it is enough to create an impression.

Here a vertical slider is used to create a small, compact yet impressive microsite. It introduces a story behind the brand in a stylish manner. Each slide effectively represents the company. You can even see here a carousel on one of the slides. The user experience is engaging and intriguing. The idea is smart and well-realized.

Vertical slider

Cloudforce, Climate History, personal portfolios of Yannis Yannakopoulos, and Gosha Khidzhakadze are fantastic websites sliders examples of nowadays. Let us consider some more modern sliders examples so that you can see the diversity of solutions and approaches that are used to take this fundamental UI element to the next level.

Modern Sliders Examples

The interactive presentation is what makes the statement these days. Everything static is boring. Therefore, the web developers delight the online crowd with a sheer diversity of dynamic solutions.

The current state of technologies allows developers to let their imagination run riot. As a result, we can see an accelerating trend of improving carousels with the help of pioneering techniques. Sophisticated transition effects, fancy mouse-based interactions, hotspots , 3D scenes are some of those incredible things. Consider some real-life websites sliders examples with inspiring ideas.

Bite-sized Sliders

Personal portfolio of Kelly Milligan is one of those sliders examples that will surprise you with its clever usage of whitespace. You will not see here an overpowering full-screen drama. The hero area features just a relatively small rectangle placed at the heart of the page.

However, it does not mean that the solution is modest and uncompetitive. Indeed, it is just the reverse. Such an unusual capsule approach instantly catches an eye. On top of that, it has a remarkable transition effect and mouse interactions that transform it into a mere delight to explore.

Bite-sized Sliders

Mouse Wheel Navigation

Skal is another website slider example where the content is displayed in small portions. We saw this kind of traditional carousel a million times at the dawn of horizontal sliders. However, this one was reimagined with the help of modern solutions.  As a result, we can enjoy a blast from the past that brings positive emotions and, at the same time, pleases the audience with some creative tricks.

Note two things. First, the slider keeps a low profile that lets the main tagline shine.

Second, you will not see here traditional navigation nor pagination. You should switch between slides with the help of mouse wheel. At some point, it may be confusing; however, the team has taken care of this issue by making navigation blatantly obvious.

Mouse Wheel Navigation

Mouse Interactions

Mouse interactions have become an integral part of modern websites. This fast-growing mainstream is particularly evident in hero areas. Therefore, it comes as no surprise that sliders in web design are packed with such features. Consider Peak’n Film , an excellent website slider example, as a vivid proof.

The homepage carousel delights users with its compact arrangement. There are no full-screen images, whatsoever. Each slide occupies half of the available space sitting right in the heart of the screen. At first, it seems that there is a bulk of fresh air due to the generous amount of whitespace on the sides. However, everything changes when you start to move your mouse cursor.

First, you can see that the slider area is much bigger since the previous and next slides can be seen on the sides when you hover over them. Secondly, the mouse is in charge here. It activates captions and movement. Besides, it becomes a call-to-action button . Smart.

Mouse Interactions

Cool Transition Effects

Fancy transition effects are another vast area to explore. It is here where developers reveal all their creative potential. Although these effects may cardinally slow down the website and make user’s PC go wild, nevertheless, when done right, they bring nothing but a pleasure to the experience. Consider Harcome as a fantastic slider example where block reveal animation produces a powerful impression. Note several things. This is a horizontal slider with a classic sliding effect. However, it does not look outdated; on the contrary, it looks refreshing, stylish, and modern. The thing is the team has improved this old-school approach with several tricks. So what have they done?

  • They have added airy feel by using huge margins.
  • They have opted in favor of elegant line style graphics that give a sense of subtlety to the aesthetics.
  • They have reimagined the trivial sliding effect with the help of block reveal animation .

Cool Transition Effects

Content Sliders or simply sliders as we call them have become an almost integral part of web designing. While we all know that the concept of web designing is based on adding an attractive visual effect to the web page, these sliders help a lot in the business. Now, the question is what are these sliders? Content sliders are a set of an exceptionally resourceful variety of navigation tools that are utilized to present different types of information (images or pictures, posts or blogs, variety of news as well as information about different types of products and their features) in the web pages.

Various forms of sliders are available to make your web page look more attractive. They range from sliders that automatically present a slideshow to those which get activated through the usage of a specific tab or button. The high popularity of the modern web pages and blogs can be attributed to the successful usage of the sliders which act as focal points on the web pages and are indeed one of the smartest ways of online interaction between the users across the globe.

In this article, we will discuss the different types of sliders used. With more and more competition in the virtual world of online business, new designs and concepts of sliders are being innovated every day. There are sliders that contain stylish and gorgeous layouts. The user can navigate through these sliders and change the images by using arrows. Certain sliders contain highly textured backgrounds containing excellent color designs which attract the users easily.

As discussed earlier, apart from the conventional sliders, there are certain sliders that change automatically from one image to another. However, the images in these sliders can also be changed by clicking a tiny button. There are some sliders that present a slide show when activated. These sliders have an extremely beguiling as well as a pleasing effect on the user. You can also move from one image to another by a simple click of an arrow or tab. Certain sliders contain images or descriptions of painting or drawing, museums, and other forms of human craftsmanship. They contain a series of images or information that can be gone through by simple clicks of the mouse.

Other Examples of Sliders in Web Design

Stackslider: 3d image slider.

The slider is tailored to the fun. Coming with a lovely 3d feeling and some catchy twists, it will definitely become a highlight of your project, which in addition is aimed to place your multimedia content on a prominent place.

Grow Interactive

slide in web page

Grow Interactive’s slider has to cover lots of content both multimedia and textual and display it in a non-intrusive way. Not much white space worsens the situation. However, compactly arranged and neatly formatted blocks with data on the right, and a series of thumbnails are managed to save the day.

Mark Dearman

slide in web page

Mark Dearmn’s portfolio incorporates a plain yet elegant content slider that skillfully combines areas for image and description. The design aesthetics perfectly echoes with the overall theme, while simple control buttons provide users with an intuitive tool for browsing through the work section.

slide in web page

The layout of Bitfoundry’s main slider is anything but conventional. There is a distinctive area for HTML content supported by a set of circular graphics that serve as a navigation. What does strike the eye is a design that has a strong dose of creativity and refinement. Soft coloring, ornamental details, neat structure, sleek shadow, and gradient buttons handle the fantastic appearance.

BigEye Creative

slide in web page

BigEye Creative has a seamless slider that ideally fits the overall design and complements the general feeling. It offers 2 plain arrows for navigation that is quite sufficient to move comfortably through the small number of items.

Büro Maisengasse

slide in web page

Büro Maisengasse’s front page is marked by a unique content slider that at first glance seems to be conventional and boring. However, everything changes when you hit a next or previous button, and the new portion of data appears. The information is broken into digestible pieces that are beautifully framed. The transition is accompanied by some lovely effects that make the component look a bit alive.

Mathieu Clauss

slide in web page

Mathieu Clauss leverages a classic, elegant image slider that takes up the whole browser screen and adapts to its dimension, providing users that come from tablets and cell phones with an optimal experience. It skillfully sheds light on the best works of the artist, preventing them from overlooking even tiny detail.

Elless Design

slide in web page

The website shows the consistency in design. It is constructed from components that are made in the same style and fashion. Thus, the slider is based on a primary 2-tone coloring, uses some extras decorative tricks that spice up text and images, and has distinctive bold borders that set it apart from the environment.

Marco Rotoli

slide in web page

The content slider has the same illustrative aesthetics as the whole website. Subtle pattern, nifty circular controls, densely packed together text and lots of space for visuals seize the user’s attention and direct it to the important points.

slide in web page

Banneton’s homepage features a marvelous slider that boasts of an artistic nature and a certain charm. With its ribbon-style block for displaying description, a sophisticated textured backdrop that mimics a pile of old papers, tiny square-shaped buttons for navigation, it easily puts the selected content above everything else.

slide in web page

Instrument’s landing page has a clean and crisp appearance, so does the chief slider. It employs standard circular buttons for moving between items and has a solid dark box for showing extra information that thanks to its relatively wide size does not go unnoticed.

 Jérôme Détraz

slide in web page

Jérôme Détraz’s personal portfolio omits needless things, and as a result, the huge content slider instantly catches the eye. It has a flat style appearance and beautiful coloring that lets the component naturally blend into the composition. Each slide is split into two parts to showcase the information in a straightforward way.

slide in web page

Boerdam makes use of a regular full-screen slider that gives the featured content the top priority. For better readability, the designer utilizes solid stripes that stand in sharp contrast to foreground captions, bluish buttons that look eye-catching, and flat plain arrow-shaped buttons for simplifying navigation.

DigitalConvulsions

slide in web page

Digital Convulsions employs a seamless content slider well-suited to the composition. Tiny circular buttons with a glossy surface and emboss touch go well with semi-realistic device mockups. The background with the highlighting effect reinforces the composition.

HyperX Media

slide in web page

HyperX Media has a slider that looks simple yet functional. The structure is neat and sleek, double borders make the component more prominent and vivid, and the footer provides users with the aid panel that includes links to the other slides.

Doopsuiker Poppies

slide in web page

Doopsuiker Poppies’ slider works well with the whole environment. Surprisingly, it has a pretty plain design with no decorative elements at all, yet this only benefits it, allowing providing users with a comfortable experience. In such a complex and intricate composition, this oasis of simplicity and straightforwardness is exactly what is needed.

Philadelphia

slide in web page

Philadelphia makes use of a huge responsive slider that puts the content to the center stage. As befit, the title and description are supported by the solid and monotone backdrop that offers an optimal contrast for great readability.

slide in web page

TravelBuzz slider keeps with the style and occupies the leading position. Much like the previous example, it is a responsive component that does not have any clear boundaries. Set of tiny thumbnails on the bottom acts as navigation, while semi-transparent dark canvas is used to hold and display the extra data.

Wearesignals

slide in web page

Wearesignals’ primary slider takes up two-thirds of the browser screen width and is adjacent to the accordion. The latter slightly lessens its importance, yet it still seizes the attention and directs it to the images. The interesting detail is pagination that is performed as a set of solid squares that have an original active state.

Malcolm Reading Consultants

slide in web page

Malcolm Reading Consultants has a content slider that is broken into 3 even parts. Such a solution enables us to embrace more data simultaneously. It is also stretched to the top to act as a backdrop for the header section. The red backdrop for displaying description is an excellent choice here.

slide in web page

Rottefella’s slider employs the same coloring as the main website, ideally complementing the aesthetics. Huge bold titles look prominent and distinctive thanks to drastic pink shade. Darkened images allow the main text on the left to be easily readable and scannable.

Jax Vineyards

slide in web page

Jax Vineyards’ slider does not have much to boast of, yet it certainly looks elegant and stylish. The transparent backdrop makes the component an integral, almost inbuilt detail of the composition. Ultra-narrow arrows on the top may look a bit seamless; however, they fit like a glove.

slide in web page

Relogik’s slider does not break away from the whole theme line. Grayish coloring makes it look more elegant. Although gradient style CTA is too small for such area, yet due to a ton of white space, neat arrangement and scarce amount of text it does not get lost.

 Design Royale

slide in web page

Design Royale has an ultra-narrow slider that barely excels from the overall content flow. This is not a standard solution, yet it has its benefits. The navigation is straightforward, and nothing distracts the user’s attention from images and descriptions.

Purple Rock Scissors

slide in web page

Purple Rock Scissors has an enormous, almost overwhelming slider where the content seizes the central stage. Small arrows that sit in the lower right corner, tiny graphics and lots of white space point out that the content has the first prerogative.

Back Yard Burgers

slide in web page

It is hard to delineate boundaries of the slider, at least at first glance, since it ideally blends in, becoming an essential detail of the theme. It is a bit content-heavy, nevertheless, plain and clear arrows save users from getting lost.

FOX Classics

slide in web page

Fox Classics opts in favor of traditional image slider with an additional set of thumbnails on the bottom and tiny numeric buttons for navigation. It has a retro appeal and demonstrates skillful manipulations with color and typography that contribute to readability and make the component perfectly suitable for the layout.

slide in web page

Converse adopts a sophisticated and intricate take on a basic slider that treats HTML content as a piece of art. With a grunge background, rough frames, extra ornamental details it gets a creative endeavor and looks simply exceptional.

Tea Round App

slide in web page

Tea Round App showcases the featured content through a skeuomorphic-inspired slider that enables users to read and navigate comfortably. Such tiny artistic details as a paper note, gradient buttons, handwritten type and sketchy objects are the main visual force.

These Are Things

slide in web page

These are things’ has an elegant and fancy slider that matches the tone of the website. It incorporates distinctive traits such as ribbons, primary coloring, neat edges, clean borders and a subtle shadow. Light semitransparent wide stripe used for titles always stays in focus.

Little Black Dress Society

slide in web page

Little black dress’ slider helps engage users with relatively huge images and exquisite designs. An arc used as a top border paired with soft light coloring adds a required touch of femininity. The navigation bar presented, as usual, as a range of circles and additional play/stop/pause buttons for the infinite slideshow are nice features that are distinctive and well-marked.

La Masa Mimatta

slide in web page

La Masa Mimatta’s slider meets the overall design theme and intensifies the content. The transparent background lets it feel natural and native. Text and image do not interfere with each other, establishing a focal point on the screen.

Whatever controversial, sliders in web design deserve special attention. Of course, they have many cons, but still, they have many pros. What’s more, in some cases, they are even irreplaceable. Therefore, as a rule, using carousels is a matter of taste and personal opinion.

We have considered outstanding websites sliders examples where the user experience is flawless. Sometimes, these intricate slideshows pushed our PCs to the limit; still, they produced a favorable impression, requiring just some good optimization to be impeccable.

Tell us, what do you think about our collection of beautiful sliders examples? What is your favorite solution? Do you use sliders in web design?

If you feel the urge to familiarize users with the important content from the first seconds of their staying on the website then the slider can come in handy. It is easily perceived by users and in majority cases becoming the first component that seizes the attention. Although it does not cover a bulk of data, yet it dishes it up in digestible portions that are much more efficient.

Moreover, like the owners of the above-listed examples, you can always play with the design and layout, transforming it from a simple plain box that just shows images into a masterpiece with strong aesthetics and animation effects that liven up the content and strengthen the whole impression. However, you should always remember about the functionality and clear navigation tool.

Like what you're reading? Subscribe to our top stories.

Nataly Birch

Nataly Birch

Nataly is an exceptional web designer and developer with a master's degree in computer science. She is highly skilled in helping clients establish a strong online presence and achieve their digital marketing goals across various sectors, including email design, email marketing, and web development. Nataly remains at the forefront of the industry by staying updated with the latest trends through continuous learning.

30+ Examples of HTML5 Websites

30+ Examples of HTML5 Websites

Beautiful Examples of Login Forms for Websites and Apps

Beautiful Examples of Login Forms for Websites and Apps

Top Web Design Trends 2023

Top Web Design Trends 2023

Seasonal Icons: Winter Inspiration and Free Packages

Seasonal Icons: Winter Inspiration and Free Packages

Examples of CSS Website Designs for Inspiration

Examples of CSS Website Designs for Inspiration

Best Status Website Badge Examples: How to Customize the Design

Best Status Website Badge Examples: How to Customize the Design

Best Status Page Examples: Advanced Customization, Design, and Incident Reports

Best Status Page Examples: Advanced Customization, Design, and Incident Reports

Best Landing Page Examples You Need for Inspiration

Best Landing Page Examples You Need for Inspiration

Create beautiful responsive emails and newsletters easily.

Made by Designmodo.

This website design and code was built using our tools. Treat it as a proof of concept.

Subscribe now to receive discounts, news, and updates. We pinky swear to not spam you. 😉

  • Postcards: Email Builder
  • Slides: Website Generator
  • Startup: Bootstrap Builder
  • Static Pages
  • Affiliate Program
  • Help Articles
  • Perks (Partners Deals)
  • Email Templates
  • Bootstrap Templates
  • Website Templates
  • Gmail Email Templates
  • Mailchimp Email Templates
  • Email Marketing Templates
  • Email Newsletter Templates
  • Siter.io: No Code Design Tool
  • Pulsetic: Uptime Monitoring
  • Static.app: Static Website Hosting
  • Mailpost.io: Email Marketing Software

Copyright © 2010-2024. All Rights Reserved

We use cookies to ensure that we give you the best experience on our website. Privacy Statement .

shopping_cart Cart

Your cart is empty 🙀

  • Become an Affiliate
  • Lost Password?
  • Inspiration
  • Website Builders

In This Article

1. simple click page transition, 2. tiles page css transition, 3. scaling css transition, 4. curtain pure css page transition, 5. circular clip transition, 6. full css menu page transitions, 7. multi-directional css page transitions, 8. sliding css page transitions, 9. cubic page transition, 10. css transition loader screen, 11. thumbnail to fullscreen transition, 12. pure css sliding page transition, 13. basic page transition, 14. scroll sliding css transition, 15. background css page transition, 16. lollipop button pure css transition, 17. css reveal transition effect, 18. multi-step css content transition, 19. section full-screen css transitions, how do you make a smooth transition in css, final thoughts, related articles, 19+ amazing css page transitions ( with beautiful examples ).

Luke Embrey Avatar

Updated on: February 14, 2024

CSS is a great technology that you can use to add amazing styles to a webpage and bring out your creative side as a designer or developer.

One way to add more of a unique and fun feature to your website is CSS page transitions. They can be pure CSS page transitions or have a little JavaScript to help create some of the more advanced techniques – either way, you can do so much with just pure CSS.

Let’s jump straight in and check out some amazing CSS page transitions!

Collection Of Pure CSS Page Transitions

In this list, you will find a mix of pure CSS page transitions and some with a little JavaScript to create some stunning effects, hopefully, one inspires you to create something beautiful with it.

Based on a few HTML, CSS, and JavaScript frameworks, this example shows you how you can create a stunning event-driven page transition.

Click the “Start” button and watch the effect. You can set this up to go to multiple pages as well but the demo comes with one page only.

A tiled CSS page transitions effect that can be used to switch between different content.

Click the button in the middle and watch the effect take place, the transition is super smooth and very engaging. You can easily add more elements to the new page as well.

This demo has multiple cool effects going on at once, and they all come together to create a stunning CSS transition when clicked. Hover over the image and it interacts with the movement of the mouse.

Click the image and it scales into view as a larger full-screen image, you could easily change this and add text or additional elements to create more of a page.

A curtain sliding-based pure CSS transition effect that lets you switch between content, the demo is quite basic and has not much styling to it, but you can easily edit the CSS to change it up.

Very simple and easy to use on your website.

A super simple transition that creates a beautiful page animation with a circular shape.

This transition example makes use of JavaScript and the Anime.js library and therefore it is not a pure-CSS solution.

But if you don’t mind the JS, this effect is perfect for transitions between pages on your site.

A fully complete CSS and JavaScript-based menu with smooth transitions between pages.

Click the menu buttons and watch the cool transition between each page, you can navigate back home by using the center button, each page has its own color as well but you could easily add a background image if you wanted.

A super cool and fancy CSS and JavaScript-based page transition demo which slides new content into view.

The animations are really smooth and it is easy to add your own elements or additional pages. The demo uses a button to trigger the transitions.

A sliding CSS transition effect with buttons on the left that trigger the page transition. The pages are full screen and slide in and out with the content, you can add more elements in the HTML and each page has a title.

The transition is very smooth and is great for full-screen content.

A fancy and cool demo that is built as a portfolio, it has an animated background and you can click the “View Portfolio” button to watch the page transition.

The animation is very smooth and obviously, in this demo, you would need to add your own content and elements but the whole transition effect is there.

Some CSS page transitions are triggered by clicking a button but another use for them is for switching between pages that need to load.

This example shows us how you can use a CSS transition loader to load content in the background and then show the page when it is ready, everything is animated using CSS and it is very smooth.

CSS page transitions can be used for all sorts of things, one of the best use cases is to transition from an image to more text/information.

This page transition uses a thumbnail which when clicked brings up a larger background and some text to explain what was clicked on, you can then use the cross in the top right to close the page and click another. It uses some JavaScript but nothing too complicated.

Built with pure HTML and CSS, this transition starts upon page load, you could use this effect to make elements appear on a scroll or when a page loads.

It could also be paired with some basic JavaScript to trigger the animation on click or between multiple elements. Either way, this can be a great starting point for CSS page transitions.

A great example of what a simple page transition can look like.

This example uses an almost pure-CSS solution to create the animation between pages.

There are no external JS libraries and the few lines of JavaScript are super basic to deal with clicks, detection of the end of animations, and page load.

Another scrolling CSS page transition now, this one is more complete and works with multiple pages. In this example, you can see that there are 8 slides to scroll through, try scrolling and watching the fancy animation switch between different pages.

Each slide has its own title and subtitle, and there is also a slide counter on the left side.

A CSS page transition based on scrolling, the background will slide in and out, enabling you to show different images or even elements if you were to change it – which could be done very easily in the HTML.

There is even some basic pagination at the bottom with the page number and indication dots.

A more of a unique CSS transition, this is a button that transitions into a page that has a title and a main body of text.

You could easily use this to set up multiple buttons and have pages display over the main page like a modal. Very modern and allows you to stay on the same page overall.

CSS page transitions can be used for a lot of things and this one is initially used to hide a full-screen menu, once clicked it opens up the menu and its different pages.

You can scroll to each page yourself, or use the menu button to select a section and transition to each section on the screen.

This CSS page transition uses a hamburger menu, check out this article we wrote on some amazing CSS hamburger menus you can use yourself

The whole setup with this demo is super cool, the design itself is very engaging and it isn’t just a basic functionality demo – you can actually see how this transition effect can be used within a real possible website.

By clicking the “Read More” button it will start the first transition, the content scales, and slides into view – more text is displayed and the main image becomes smaller to make room for the text.

Click the “ See Map” to then watch the final transition of the map flipping into view and the text fading out – you then have the final step to transition back to the home page.

A full-screen layout that, when clicked, each section opens up and scales into view. The CSS transition creates a full-screen layout of each section when clicked.

Each section has its own close button so that you can return back to the original screen. You could easily add more elements to each section.

Make sure you are only animating the elements you need to and don’t include too many elements, which may become resource-intensive for some devices – CSS will generally create a smooth transition for you by using the cubic Bézier curve algorithm. With this function, you can customize the acceleration and deceleration of your transition to generate a smooth transition.

Hopefully, you have found some page transitions that you like and can use yourself in your own projects – you can take these examples and create your own unique effect on your websites.

Some examples here are just basic functionality demos, but some are more complete than others, so you should find something that suits your skillset and needs with what you want to use CSS page transitions for.

  • CSS Transition [Timing Function & Delay]
  • CSS Transition Duration
  • 20 CSS Animated Backgrounds [CodePens]
  • 7 CSS & JS Scroll Text Animations [CodePen Examples]
  • 15+ CSS Text Animation Effects [With Examples]

Luke Embrey

Luke Embrey

Luke Embrey is a full-stack developer, BSc in Computer Science and based in the UK. You can find out more about him at https://lukeembrey.com/

Don’t Miss…

web developer portfolio examples share

A project by Alvaro Trigo

  • United States
  • Netherlands
  • New Zealand
  • United Kingdom

5 Ways to Put PowerPoint Presentation on Web

By Tips to share presentation online

Want to share your original and creative presentations with others all over the world? Putting PowerPoint presentation on Web sounds a good idea. Especially in this era of Internet on which everyone can view various resources using their computers.

Here are 5 different ways to put PowerPoint presentation on Web. Each way has its cons and pros.

Method 1 Upload and link PowerPoint File directly

Yes, you could just upload PowerPoint file to your web site and link to it. Visitors click and download the file to view the presentation on their computers.

Visitors should download the presentation before viewing.

Visitors should install

to view it.

The presentation file may have a big file size.

Just upload your presentation to your Website and link to it.

Share your presentation with all the animations and special effects.

Method 2 Share presentation on Slideshare.net

Slideshare.net is a famous presentation sharing website. Think of it as something like YouTube for slide shows. You can upload your presentations in PPT, PPS or POT formats to SlideShare and they're converted into shared media.

All the animations, multimedia files in the presentation will disappear.

The presentation can be viewed on any computers.

Method 3 Publish as HTML web page

PowerPoint lets you save your presentation as HTML, as a web page (Office button -> Save As -> Other Formats, and then choose Web Page in the "Save as type" pull-down menu).

Each slide is saved as a separate image, with its own page, so you have to upload an entire folder of files to your server.

It will not display properly for website visitors who aren't using IE.

Free open source software may be a stronger choice in this instance. OpenOffice Impress , the PowerPoint look-alike from http://www.OpenOffice.org , lets you create a PPT presentation from scratch, and it will also convert an existing PowerPoint presentation to HTML in a form that's compatible with a broader range of browsers.

Method 4 Flash it using Wondershare PPT2Flash

Actually, OpenOffice even offers to export your presentation as a Flash (SWF) format, but animations will disappear.

Wondershare PPT2Flash, an add-in of PowerPoint, lets you convert PowerPoint presentation to Flash with one-click.

3 steps to convert your presentation to Flash:

Download and install PPT2Flash -> Import PowerPoint presentation -> Click "Publish" to convert.

Has up to 90% reduction in file size after conversion.

Flash can be shown properly on any computers.

The conversion retains all the animations, hyperlinks, multimedia file in your presentation.

Flash is difficult to modify .

Method 5 Record it using Camtasia Studio

Download and install Comtasia (http://www.techsmith.com) on your computer and then follow the steps below.

Step 1, save your PPT file as PPS file.

Step 2, Set Camtasia studio to record the whole screen.

Step 3, Play your PowerPoint PPS file and Press “F9” to start recording the screen.

Step 4, when you reach your last blank slide, Press F10 to tell Camtasia Recorder to stop recording. You will be prompted to save the captured slideshow, so choose a directory and enter filename.

Step 5, save your capture in SWF format.

It will a little time-consuming if there are many slides in your presentation.

Best way to publish your presentation on Web

If you want to make animated and protected presentation on Web in minutes, converting PowerPoint to Flash using Wondershare PPT2Flash sounds downright elegant!

Showing a Flash movie on web is most often as easy as uploading your SWF file to your web space and using a few lines of object / embed code (http://www.w3schools.com/flash/flash_inhtml.asp) to embed the file on your page.

Camtasia can record the screen and sound when your play your PowerPoint, but should pay $299 to buy which is higher than PPT2Flash ($59.95). For Mac users, you can upload your presentation to slideshare.net . If you only want to create static presentation on web, using OpenOffice to export your presentation to HTML or Flash would be better.

I hope you can use these 5 methods to share your presentation on web easily. Of course, if you have any other good methods, please let me know. Thanks!

This story, "5 Ways to Put PowerPoint Presentation on Web" was originally published by ITworld .

  • Enterprise Applications

Copyright © 2008 IDG Communications, Inc.

slide in web page

How TO - Slideshow Gallery

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

Slideshow Gallery

A slideshow is used to cycle through elements:

slide in web page

Try it Yourself »

Create A Slideshow Gallery

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

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

Advertisement

Step 3) Add JavaScript:

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.

' height=

Creating more immersive presentations in Google Slides

What’s changing.

speaker-spotlight in slides

Who’s impacted 

Why it’s important , getting started .

  • Admins: There is no admin control for this feature. 
  • End users: To add the spotlight shape into Slides, go to Insert > speaker spotlight or click the speaker spotlight button in the toolbar. Visit the Help Center to learn more about using speaker spotlight .  

Rollout pace 

  • Rapid Release domains : Gradual rollout (up to 15 days for feature visibility) starting on February 15, 2024 
  • Scheduled Release domains : Gradual rollout (up to 15 days for feature visibility) starting on March 6, 2024 

Availability 

  • Available to Google Workspace Business Standard, Business Plus, Enterprise Essentials, Enterprise Essentials Plus, Enterprise Standard, Enterprise Plus, and Education Plus 

Resources 

  • Google Help: Use speaker spotlight

Share on Twitter

Filter by product

  • Accessibility
  • Admin console
  • Cloud Search
  • Directory Sync
  • Drive for desktop
  • Education Edition
  • G Suite for Education
  • G Suite for Government
  • Google Apps Script
  • Google Calendar
  • Google Chat
  • Google Classroom
  • Google Cloud Directory Sync
  • Google Docs
  • Google Drawings
  • Google Drive
  • Google Forms
  • Google Hangouts
  • Google Keep
  • Google Maps
  • Google Meet
  • Google Meet Hardware
  • Google Photos
  • Google Sheets
  • Google Sites
  • Google Slides
  • Google Tasks
  • Google Vault
  • Google Voice
  • Google Workspace
  • Google Workspace Add-ons
  • Google Workspace for Education
  • Google Workspace Marketplace
  • Google Workspace Migrate
  • Marketplace
  • Microsoft Exchange
  • Microsoft Outlook
  • Premier Edition
  • Rapid Release
  • Rapid Releases
  • Scheduled Release
  • Security and Compliance
  • Weekly Recap
  • What's New

Filter by date

Subscribe by feed, subscribe by email, localized google workspace updates, useful links, join the official community for google workspace administrators.

In the Google Cloud Community, connect with Googlers and other Google Workspace admins like yourself. Participate in product discussions, check out the Community Articles, and learn tips and tricks that will make your work and life easier. Be the first to know what's happening with Google Workspace.

______________

Learn about more Google Workspace launches

On the “What’s new in Google Workspace?” Help Center page, learn about new products and features launching in Google Workspace, including smaller changes that haven’t been announced on the Google Workspace Updates blog.

A collage of colorful PowerPoint designs organized into tidy rows

5 golden rules of PowerPoint design

february 6, 2024

A smiling woman with blonde hair, glasses, and a leopard print cardigan poses with her hands on her hips in front of an olive green background.

by Deb Ashby

Wondering how to design the perfect PowerPoint presentation? It's easier than you think–just follow five simple rules to get started:

1. Consider using templates

When building a slide deck, it’s important to maintain consistency throughout. We want to ensure we are using consistent font styles, colors and themes. This can be tricky when designing from scratch, so why not start from a template?

Microsoft Create contains hundreds of pre-made, customizable PowerPoint templates, which means you don’t have to start from scratch and the fonts and colors are already set for you.

Simply choose a template from the gallery, customize it as needed, and you are done!

Screenshots of slides in a branded PowerPoint presentation, in hues of navy, maroon, and brown.

2. No walls of text

We’ve all seen PowerPoint presentations where slides contain too much text. The human brain struggles to listen and read at the same time. If you are presenting to an audience, keep the text on slides to a minimum.

Consider employing the “5-5-5" rule. No more than 5 lines, no more than 5 words, no more than 5 minutes. Think short and sharp memory joggers instead of rambling paragraphs.

Where possible, consider replacing text with visuals to represent your point. People remember images more than words.

A minimalist, black and white PowerPoint template

3. Be mindful of colors and fonts

No one wants their audience to leave with a headache after an hour of straining to read slides. We need to ensure that our presentation is easy to read for everyone – even for those in the nosebleed seats at the back! Think about the font you are using. Is it appropriate for the presentation? What about the font size? Can people at the back easily read? What about people with visual impairment? Ensure all text is at least 24pts.

When it comes to color, ensure all slides have good contrast. Dark backgrounds should have light font and vice versa.

4. Use animation sparingly

Animation can really liven up an otherwise flat presentation. However, it should be used thoughtfully and sparingly. Too much of the wrong type of animation with objects flying in and zooming around the screen, while fun, can look confusing and unprofessional.

Animation should be subtle. With every animation you add, ask yourself, "Is this going to enhance my presentation or distract from it?"

5. Engage your audience

When presenting to an audience, there is usually an awkward time before the presentation begins while the speaker waits for everyone to arrive. During this time, people may start scrolling on their phones or get distracted with work emails, and it can be hard to pull the audience back.

To avoid this issue, work to grab your audience's attention before the presentation even starts. Instead of just having the title slide on the screen, consider creating "kiosk slides." These are a series of slides that contain a combination of interesting things for the audience to look at or engage with. Maybe you have an interesting image? A funny quote or fun facts? Or maybe there is a question you want them to think about prior to the session?

Create these slides and have them automatically cycle round before the presentation starts.

A PowerPoint presentation for a whitepaper proposal.

Related topics

slide in web page

Example prompts to try with Microsoft Copilot with Graph-grounded chat

Experience the power of Get started with Microsoft Copilot with Graph-grounded chat  (formerly named Microsoft 365 Chat). See how much time you can save and how much more you can get done. Use Microsoft Copilot to catch up, create content, and ask questions. This article provides several example prompts you can try.

Tip:  When you’re giving Copilot instructions, you can direct it to specific work content by using the forward slash key (“/”), then typing the name of a file, person, or meeting.  If you write a prompt and don’t reference a specific file, person, or meeting, Copilot will determine the best source of data for its response, including all your work content.

Synthesize large amounts of data into simple, consumable responses and catch up on things quickly. Here are some examples:

You've been on vacation now you're back. You need to find out what's going on with Project X. Find the latest about Project X. What's the current timeline? When are deliverables due?

You've just joined a new team and you're trying to ramp up on recent activities. Summarize team communications over the last 30 days. What are the team's priorities? 

There's been a recent change in how your team is tracking work. Find information about the new way our team is tracking work. Include email communications and points of contact for questions.

Create content

Brainstorm ideas and draft new content based on information at work. Here are some examples:

You want to draft a one-page description of a new project (let's call it Project Foo) that's just about to kick off at work. Using information in file1, file2, and file3, write a one-page description of Project Foo. Write it so non-technical people can understand what the project is about and when it's scheduled to be completed.

You're preparing an email to invite customers to attend an upcoming conference and visit your company's booth. Using information in Document Z, write a fun, catchy email inviting our customers to come see us at our booth during next month's conference.

You want to plan a morale event for your team. List 3-5 ideas for group activities in the Seattle area that would be suitable for my team. Include approximate cost and time estimates. 

Ask questions

Find information and get answers quickly, even if you can't remember where the information you need is or how it was shared. Here are some examples:

You need to know what's left in the budget for supplies. How much did we spend on supplies for Project Foo?  How much budget do we have left for Project Foo?

Your team received customer feedback. You want to identify the top things your team should address. Review the feedback we received from customers via email last week. What are the top three issues we should address?

Overview of Microsoft Copilot with Graph-grounded chat

Use Copilot at Microsoft365.com

Use Copilot in Teams

Use Copilot at Bing.com

Facebook

Need more help?

Want more options.

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

slide in web page

Microsoft 365 subscription benefits

slide in web page

Microsoft 365 training

slide in web page

Microsoft security

slide in web page

Accessibility center

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

slide in web page

Ask the Microsoft Community

slide in web page

Microsoft Tech Community

slide in web page

Windows Insiders

Microsoft 365 Insiders

Was this information helpful?

Thank you for your feedback.

  • Newsletters

Google’s Gemini is now in everything. Here’s how you can try it out.

Gmail, Docs, and more will now come with Gemini baked in. But Europeans will have to wait before they can download the app.

  • Will Douglas Heaven archive page

In the biggest mass-market AI launch yet, Google is rolling out Gemini , its family of large language models, across almost all its products, from Android to the iOS Google app to Gmail to Docs and more. You can also now get your hands on Gemini Ultra, the most powerful version of the model, for the first time.  

With this launch, Google is sunsetting Bard , the company's answer to ChatGPT. Bard, which has been powered by a version of Gemini since December, will now be known as Gemini too.  

ChatGPT , released by Microsoft-backed OpenAI just 14 months ago, changed people’s expectations of what computers could do. Google, which has been racing to catch up ever since, unveiled its Gemini family of models in December. They are multimodal large language models that can interact with you via voice, image, and text. Google claimed that its own benchmarking showed that Gemini could outperform OpenAI's multimodal model, GPT-4, on a range of standard tests. But the margins were slim. 

By baking Gemini into its ubiquitous products, Google is hoping to make up lost ground. “Every launch is big, but this one is the biggest yet,” Sissie Hsiao, Google vice president and general manager of Google Assistant and Bard (now Gemini), said in a press conference yesterday. “We think this is one of the most profound ways that we’re going to advance our company’s mission.”

But some will have to wait longer than others to play with Google’s new toys. The company has announced rollouts in the US and East Asia but said nothing about when the Android and iOS apps will come to the UK or the rest of Europe. This may be because the company is waiting for the EU’s new AI Act to be set in stone, says Dragoș Tudorache, a Romanian politician and member of the European Parliament, who was a key negotiator on the law.

“We’re working with local regulators to make sure that we’re abiding by local regime requirements before we can expand,” Hsiao said. “Rest assured, we are absolutely working on it and I hope we’ll be able to announce expansion very, very soon.”

How can you get it? Gemini Pro, Google’s middle-tier model that has been available via Bard since December, will continue to be available for free on the web at gemini.google.com (rather than bard.google.com). But now there is a mobile app as well.

If you have an Android device, you can either download the Gemini app or opt in to an upgrade in Google Assistant. This will let you call up Gemini in the same way that you use Google Assistant: by pressing the power button, swiping from the corner of the screen, or saying “Hey, Google!” iOS users can download the Google app, which will now include Gemini.

Gemini will pop up as an overlay on your screen, where you can ask it questions or give it instructions about whatever’s on your phone at the time, such as summarizing an article or generating a caption for a photo.  

Finally, Google is launching a paid-for service called Gemini Advanced. This comes bundled in a subscription costing $19.99 a month that the company is calling the Google One Premium AI Plan. It combines the perks of the existing Google One Premium Plan, such as 2TB of extra storage, with access to Google's most powerful model, Gemini Ultra, for the first time. This will compete with OpenAI’s paid-for service, ChatGPT Plus, which buys you access to the more powerful GPT-4 (rather than the default GPT-3.5) for $20 a month.

At some point soon (Google didn't say exactly when) this subscription will also unlock Gemini across Google’s Workspace apps like Docs, Sheets, and Slides, where it works as a smart assistant similar to the GPT-4-powered Copilot that Microsoft is trialing in Office 365.

When can you get it? The free Gemini app (powered by Gemini Pro) is available from today in English in the US. Starting next week, you’ll be able to access it across the Asia Pacific region in English and in Japanese and Korean. But there is no word on when the app will come to the UK, countries in the EU, or Switzerland.

Gemini Advanced (the paid-for service that gives access to Gemini Ultra) is available in English in more than 150 countries, including the UK and EU (but not France). Google says it is analyzing local requirements and fine-tuning Gemini for cultural nuance in different countries. But the company promises that more languages and regions are coming.

What can you do with it? Google says it has developed its Gemini products with the help of more than 100 testers and power users. At the press conference yesterday, Google execs outlined a handful of use cases, such as getting Gemini to help write a cover letter for a job application. “This can help you come across as more professional and increase your relevance to recruiters,” said Google’s vice president for product management, Kristina Behr.

Or you could take a picture of your flat tire and ask Gemini how to fix it. A more elaborate example involved Gemini managing a snack rota for the parents of kids on a soccer team. Gemini would come up with a schedule for who should bring snacks and when, help you email other parents, and then field their replies. In future versions, Gemini will be able to draw on data in your Google Drive that could help manage carpooling around game schedules, Behr said.   

But we should expect people to come up with a lot more uses themselves. “I’m really excited to see how people around the world are going to push the envelope on this AI,” Hsaio said.

Is it safe? Google has been working hard to make sure its products are safe to use. But no amount of testing can anticipate all the ways that tech will get used and misused once it is released. In the last few months, Meta saw people use its image-making app to produce pictures of Mickey Mouse with guns and SpongeBob SquarePants flying a jet into two towers. Others used Microsoft’s image-making software to create fake pornographic images of Taylor Swift .

The AI Act aims to mitigate some—but not all—of these problems. For example, it requires the makers of powerful AI like Gemini to build in safeguards, such as watermarking for generated images and steps to avoid reproducing copyrighted material. Google says that all images generated by its products will include its SynthID watermarks. 

Like most companies, Google was knocked onto the back foot when ChatGPT arrived. Microsoft’s partnership with OpenAI has given it a boost over its old rival. But with Gemini, Google has come back strong: this is the slickest packaging of this generation’s tech yet. 

Artificial intelligence

Ai for everything: 10 breakthrough technologies 2024.

Generative AI tools like ChatGPT reached mass adoption in record time, and reset the course of an entire industry.

What’s next for AI in 2024

Our writers look at the four hot trends to watch out for this year

  • Melissa Heikkilä archive page

These six questions will dictate the future of generative AI

Generative AI took the world by storm in 2023. Its future—and ours—will be shaped by what we do next.

OpenAI teases an amazing new generative video model called Sora

The firm is sharing Sora with a small group of safety testers but the rest of us will have to wait to learn more.

Stay connected

Get the latest updates from mit technology review.

Discover special offers, top stories, upcoming events, and more.

Thank you for submitting your email!

It looks like something went wrong.

We’re having trouble saving your preferences. Try refreshing this page and updating them one more time. If you continue to get this message, reach out to us at [email protected] with a list of newsletters you’d like to receive.

Slider Revolution

Slider Revolution

More than just a WordPress slider

CSS Page Transitions For A Better User Experience (50 Examples)

Looking to elevate your website's user experience incorporate css page transitions for a seamless and professional feel. from fade-ins to slides and more, discover the possibilities with these must-try techniques..

slide in web page

User experience is one vital aspect of websites today. When browsing, elements like design, speed, and smoothness are critical.

Transitions are an excellent way to control changes between different pages and elements. You can apply transitions outside your home page when users scroll or access a new page.

A few page transitions pair HTML, CSS, and JavaScript to add interactive styling features. Still, pure CSS page transitions offer numerous possibilities.

This article provides more than 50 code examples for transition effects that can enhance your website’s user experience.

53 CSS Page Transition Styles

Portal effect hero slider.

The hero slider module, enhanced with an enchanting portal effect, acts as an outstanding landing page or a visually striking product presentation for any WordPress website.

Cyber Glitch Effect Slider

Immerse yourself in a futuristic, neon-lit cyber world with this incredible slider template. It showcases glitch effect transitions and a typewriter effect that adds an extra level of intrigue. The custom navigation skin can be easily customized to your preference.

Motion Blur Portfolio Showcase

Experience the sleekness of this showcase slider, offering an optional video popup and a captivating motion blur transition. Complete with a logo and menu, it stands ready to bring your boldest ideas to life in a visually stunning manner.

CSS-Page-Transition – Abhishek razy

Using simple CSS page transitions, such as this example, increases flexibility and ensures all users to interact with the content.

One Page Navigation CSS Menu – Alberto Hartzet

One Page Navigation has a lateral menu and smooth transitions . You can use the code in your own projects as long as you provide credit to the author.

Pure CSS One Page Vertical Navigation – Alberto Hartzet

If you prefer single-page websites, this page transition is ideal. It uses Pug, Sass, and JavaScript for a smooth effect.

Basic CSS Page Transition – Álvaro

The Basis CSS Page Transition delivers a variation of the wipe effect. It is both impactful and easy to implement .

Cool Layout with Fancy Page Transitions and Off-canvas Menu – Álvaro

These desktop-only page transitions use elegant animations and span multiple pages to provide a seamless and engaging user experience.

Design visually attractive and high-performing websites without writing a line of code

WoW your clients by creating innovative and response-boosting websites fast with no coding experience. Slider Revolution makes it possible for you to have a rush of clients coming to you for trendy website designs.

CSS Page Transitions – Álvaro

CSS Page Transitions uses slide transitions activated by buttons on the left side of the page. This page transition is designed for Mobile Web use first.

Page Transitions – Álvaro

The animated page transitions in this transition demo use HTML, Stylus, and JavaScript. This page transition effect uses futuristic animations that enclose the full screen .

Pagination & Layout with Clipped Background Divs – Álvaro

Distinctive CSS page transitions require you to mix transition styles. This one-page example uses SVG path pagination and scrolling to reveal content animation.

Radial Clip Reveal – Page Transition – Álvaro

Made with HTML, CSS, and JavaScript, this page transition allows users to click anywhere to activate the CSS animations.

Tiles Page Transition (CSS) – Álvaro

To activate the Tiles Page Transition, click the central button on the page. It has an SVG circle loader to improve engagement.

Page Transition Loader – Arsen Zbidniakov

A unique page transition loader is the perfect addition to any website. Here you have an SVG circle loader with a morphing effect applied to a responsive animated wireframe.

Pure CSS Page Transition with a Circle Coming From the Center of the Screen – Barnaby

Pure CSS page transitions apply to different website components. This simple page transition opens elements from a circle in the screen center.

Morphin – buzzhows

Animated page transitions like Morphin convey a playful feel to your website. You can apply the effect to links or button clicks.

Transform: translate – Cassandra Rossal

Fullscreen layout page transitions are versatile and impactful. This transition effect is HTML and CSS code. You can use it for your main page or enrich vertical navigation.

Material Design Transition – David Marland

Material design transition uses HTML CSS for a smooth effect and JavaScript to add classes. This two-stage animation recreates the ripple material design transition.

Trying to Make a CSS Page Transition – David Mitchell

CSS animations adapt to different functions. Our small demo showcases an article transition page effect.

Pure CSS Page Transition Effect – Gehan Mendis

The CSS Page Transition Effect acts as a digital folder. When users click on menu items, the background for the main page appears momentarily before opening the selected page.

Kontext – Hakim El Hattab

Kontext is a context-shift 3D page transition written with HTML, CSS, and JavaScript. Its inspiration comes from iOS.

3D Cube Page Transition – Hubert Warzycha

3D Cube page transition features each website page on one side of a cube. Users can browse using pointer buttons or the menu and enjoy responsive animations that enhance the user experience.

Easy CSS Page/Slide Transitions – Jamie Coulter

This transition demo features several different effects and shows how to use them. These CSS page transitions are fun and easy to set up.

Just Another CSS UI – Jamie Coulter

The transition demo for this effect allows you to see how users will interact with your website. It shows how flexible pure CSS can be.

Lollipop Transition – Jeff McCarthy

In this example, the lollipop effect inspired by Android 5.0 triggers by clicking a button to open a new page.

Pure CSS Page Transition – Jessica

Some of the best CSS page transitions are the most simple. This smooth transition is pure CSS to give your website a luxury feel.

Page Transition with Loader – John Heiner

CSS page transitions should be fast and engaging as this page transition loader. Playing the JS section code on load activates the gallery view.

Responsive bodymovin modal/page transition – Jonas Sandstedt

This transition created with Lottie adds playfulness and color. A more responsive animated wireframe will improve user experience.

Page Transition Effect – JosepharDev

By maintaining a constant background presence, this example creates a seamless user experience, giving the impression that users are. navigating a single page with animated content l.

CSS Page Transition – Curtain – Kyle Brumm

Curtain is a simple page transition to change from one slide to another . Despite its plainness, you can adapt the CSS code to fit your style needs.

Simple Page Transition – ktsn

The Simple Page Transition is a layer page reveal effect. You can add classes to the code if your needs are above the one-page navigation.

Marionette – Region CSS Page Transitions – Luiz Américo

Marionette provides a multi-layer page reveal with page transition effect options. The CSS page transitions, including a rotating page transition, allow several movement choices.

GSAP Cubic Bezier Page Transition – Maciej Siwanowicz

The example above originates from GSAP, a powerful JavaScript toolset. The page transition activates when you click the “View Portfolio” button.

Fullscreen Layout Page Transitions – Pure JS/CSS – Marcelo Ribeiro

Some full-screen layout CSS page transitions can make users feel they are navigating one page instead of several. This expanding card page transition exemplifies that strategy.

Pure CSS Panels – Mattia Astorino

Pure CSS panels feature two CSS page transitions. HTML and CSS code reveal content animation with simplicity and elegance.

Dummy Multi-Layer Page Reveal Effect – Mehmet Burak Erman

The dummy multi-layer page reveal effect brings flow and multidirectional navigation . You can use HTML, CSS, and JavaScript code to embed it into your website.

Tiles Page Transition (CSS) – Milan Ricoul

The tiles page transition embraces the preloader concept with a page transition loader. There is an SVG circle loader on this Tiles Page Transition.

CSS Page Transition – Min

This CSS page transition allows users to shift the background page by clicking a direction button.

Article Transition Page – Muna

The Article Transition Page brings simple but elegant content animation. You will notice the page transition is not symmetrical.

Canvas Glitch Intro – nclud team

The Canvas Glitch Intro is unique among CSS page transitions. It captures the glitch effect and transports it to the page load process.

Fullscreen Drag-slider with Parallax – Nikolay Talanov

The Fullscreen drag-slider uses horizontal navigation and parallax . It is responsive and cross-browser compliant.

Skewed OnePage Scroll – Nikolay Talanov

This example is another take on the one-page scroll effect. It slices the pages diagonally, with images and text appearing in opposite directions.

Simple CSS3 Page Transition – Paul DeCotiis

This page transition merges several transition effects and is triggered when you click the image. You can change it to fit more elements according to your needs.

Translation Delay – Rachel Cope

HTML and CSS page transitions rely on the type of effect but also its duration. In the animation above, you can decide how long you want these transitions to last.

Expanding card page transition effect – Rachel Smith

You will have to adapt this Expanding card page transition effect before using it. Still, it is an excellent feature to add dynamism and flow.

Slide Right Pure CSS Page Transition – Rafael Correa

This fullscreen page transition effect allows users to move seamlessly between multiple pages. Like the small demo, you can use contrasting background colors.

Page Transitions – Romswell Roswell Parian Paucar

Like on another transition demo on this list, you will find six transition effects and their variations. These use HTML, CSS, and JavaScript code.

React Animated Page Transitions – Sarah Drasner

React animated page transitions include variations of the morphing effect and others. As with other effects, react animated page transitions operate on JavaScript and CSS.

Page Layout transitions with Pure CSS – SitePoint

These HMTL and CSS page transitions are a variation of the expanding card page transition effect. They require some changes to become keyboard accessible.

Thumbnail to Fullscreen Page Transition – Steve Gardner

This CSS page transition starts with a thumbnail grid. It activates when users select an image that opens seamlessly on the background of a fullscreen page.

CSS Page Transition – Tiago Barros

This context shift transition inspired by a vertical slider covers your fullscreen page . Thus, users appear to stay on the same page while browsing.

Vue2 Page Transitions with GSAP – Tim Rijkse

Here you will find six different page transitions. They use HTML code, CSS, the Vue2 JavaScript framework, and GSAP.

Reveal content animation (and menu) – Tobias Glaus

The Reveal content animation highlights the versatility of CSS page transitions. It merges the reveal effect with vertical navigation.

Page Transition CSS3 – TOMAZKI

You can gain inspiration from effects people already know for your CSS page transitions. This transition is a variation of the wipe effect.

Full Page Scroll Animation Transition – Tyler Chipman

This scrolling transition uses parallax to merge text, shapes, and gradient colors.

If you liked this article about CSS page transitions, you should check out this article about CSS animation libraries .

There are also similar articles discussing cool CSS buttons , CSS shadow effects , CSS blockquotes , and CSS blur effects .

And let’s not forget about articles on CSS charts , CSS headers , CSS parallax effects , and CSS animations on scroll .

Slide

FREE: Your Go-To Guide For Creating Awe-Inspiring Websites

Get a complete grip on all aspects of web designing to build high-converting and creativity-oozing websites. Access our list of high-quality articles and elevate your skills.

slide in web page

Slider Revolution high priest on the mission to find the line between not enough coffee and just a little too much coffee. Same with beer.

For any inquiries or additional resources related to this blog post or else, please don't hesitate to comment below or email me at [email protected] .

Liked this Post? Please Share it!

slide in web page

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Save my name, email, and website in this browser for the next time I comment.

From The Blog

Stunning architecture website templates to make your business stand out, the financial website templates you need for a professional online presence, eye-catching css charts that will revamp your data reporting, popular resources, optimizing load speed and performance, quick setup – slider revolution, create a basic responsive slider, get productive fast.

slide in web page

Join over 35.000 others on the Slider Revolution email list to get access to the latest news and exclusive content.

Privacy Overview

EU AI Act: first regulation on artificial intelligence

The use of artificial intelligence in the EU will be regulated by the AI Act, the world’s first comprehensive AI law. Find out how it will protect you.

A man faces a computer generated figure with programming language in the background

As part of its digital strategy , the EU wants to regulate artificial intelligence (AI) to ensure better conditions for the development and use of this innovative technology. AI can create many benefits , such as better healthcare; safer and cleaner transport; more efficient manufacturing; and cheaper and more sustainable energy.

In April 2021, the European Commission proposed the first EU regulatory framework for AI. It says that AI systems that can be used in different applications are analysed and classified according to the risk they pose to users. The different risk levels will mean more or less regulation. Once approved, these will be the world’s first rules on AI.

Learn more about what artificial intelligence is and how it is used

What Parliament wants in AI legislation

Parliament’s priority is to make sure that AI systems used in the EU are safe, transparent, traceable, non-discriminatory and environmentally friendly. AI systems should be overseen by people, rather than by automation, to prevent harmful outcomes.

Parliament also wants to establish a technology-neutral, uniform definition for AI that could be applied to future AI systems.

Learn more about Parliament’s work on AI and its vision for AI’s future

AI Act: different rules for different risk levels

The new rules establish obligations for providers and users depending on the level of risk from artificial intelligence. While many AI systems pose minimal risk, they need to be assessed.

Unacceptable risk

Unacceptable risk AI systems are systems considered a threat to people and will be banned. They include:

  • Cognitive behavioural manipulation of people or specific vulnerable groups: for example voice-activated toys that encourage dangerous behaviour in children
  • Social scoring: classifying people based on behaviour, socio-economic status or personal characteristics
  • Biometric identification and categorisation of people
  • Real-time and remote biometric identification systems, such as facial recognition

Some exceptions may be allowed for law enforcement purposes. “Real-time” remote biometric identification systems will be allowed in a limited number of serious cases, while “post” remote biometric identification systems, where identification occurs after a significant delay, will be allowed to prosecute serious crimes and only after court approval.

AI systems that negatively affect safety or fundamental rights will be considered high risk and will be divided into two categories:

1) AI systems that are used in products falling under the EU’s product safety legislation . This includes toys, aviation, cars, medical devices and lifts.

2) AI systems falling into specific areas that will have to be registered in an EU database:

  • Management and operation of critical infrastructure
  • Education and vocational training
  • Employment, worker management and access to self-employment
  • Access to and enjoyment of essential private services and public services and benefits
  • Law enforcement
  • Migration, asylum and border control management
  • Assistance in legal interpretation and application of the law.

All high-risk AI systems will be assessed before being put on the market and also throughout their lifecycle.

General purpose and generative AI

Generative AI, like ChatGPT, would have to comply with transparency requirements:

  • Disclosing that the content was generated by AI
  • Designing the model to prevent it from generating illegal content
  • Publishing summaries of copyrighted data used for training

High-impact general-purpose AI models that might pose systemic risk, such as the more advanced AI model GPT-4, would have to undergo thorough evaluations and any serious incidents would have to be reported to the European Commission.

Limited risk

Limited risk AI systems should comply with minimal transparency requirements that would allow users to make informed decisions. After interacting with the applications, the user can then decide whether they want to continue using it. Users should be made aware when they are interacting with AI. This includes AI systems that generate or manipulate image, audio or video content, for example deepfakes.

On December 9 2023, Parliament reached a provisional agreement with the Council on the AI act . The agreed text will now have to be formally adopted by both Parliament and Council to become EU law. Before all MEPs have their say on the agreement, Parliament’s internal market and civil liberties committees will vote on it.

More on the EU’s digital measures

  • Cryptocurrency dangers and the benefits of EU legislation
  • Fighting cybercrime: new EU cybersecurity laws explained
  • Boosting data sharing in the EU: what are the benefits?
  • EU Digital Markets Act and Digital Services Act
  • Five ways the European Parliament wants to protect online gamers
  • Artificial Intelligence Act

Related articles

Digital transformation in the eu, share this article on:.

  • Sign up for mail updates
  • PDF version

This section features overview and background articles for the general public. Press releases and materials for news media are available in the news section .

IMAGES

  1. 25 Photo Slideshow Examples in Web Design to Inspire You

    slide in web page

  2. Slideshows In Web Design: When And How To Use Them

    slide in web page

  3. How To Design Slideshow For Business Website

    slide in web page

  4. Slider Web Design Inspiration

    slide in web page

  5. 30 Free Google Slides Templates For Your Next Presentation

    slide in web page

  6. How to Use Google Slides to Make a Presentation

    slide in web page

VIDEO

  1. Bootstrap.4 slide web, สไลด์หน้าเว็บ, JQuery Slide by Bootstrap, สอนทำเว็บฟรี,Banner, Web Banner

  2. Cara Membuat Background Gambar Transparan untuk PPT, Web site, Google Sites

  3. Happy New Year 2024

  4. Ms. Power Point. Links between Slides and other Websites

  5. #1/2 Beautiful webpage with slider

  6. Slide add page

COMMENTS

  1. 12 Amazing Slider Website Designs [Examples & When to use]

    Website Sliders help consolidate web content into one location, saving time on scrolling or height bloated pages when there is a lot of content to show. Animation and transition effects help engage users and keep them interested. Visuals between slides keep users viewing only the content they need while they consume it, once they have finished ...

  2. How To Create a Slideshow

    Do you want to create a stunning slideshow for your web page? Learn how to use JavaScript and HTML to display a series of images in a dynamic and responsive way. Follow the step-by-step tutorial from W3Schools, the world's largest web developer site.

  3. Responsive Slider Examples For Modern Websites

    An Apple-Inspired Adventure: #Codevember - 10 - Apple Animated Slider by Camila Waz. Camila Waz's Apple Animated Slider showcases a jQuery and slick.js powered slider. Inspired by Apple's slick design philosophy, it's a refreshing and modern take on the traditional slider.

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

    The first step to changing which slides show is to select the slide wrapper (s) and then its slides. When you select the slides you have to go over each slide and add or remove an active class depending on the slide that you want to show. Then just repeat the process for a certain time interval. Keep it in mind that when you remove an active ...

  5. Inspiring Examples of Website Sliders in Modern Web Design

    umdasch. This is a contemporary image slider. It uses bars instead of bullets, has a dark background, and employs a few other modern details. By clicking the video or any of the 360° panels the site will pop into a lightbox. This allows visitors to view the video or navigate a 3D space in a near full-screen mode.

  6. Amazing CSS Slideshow Examples You Can Use In Your Website

    CSS slideshow examples dot the web, showcasing how code breathes life into static pages. They're more than eye-candy; they're the silent narrators of stories told through images and animations. In the dance of pixels we're about to unpack, discover the steps to crafting your own digital ballet. From HTML5 standards to CSS3 transitions ...

  7. Google Slides: Online Slideshow Maker

    Use Google Slides to create online slideshows. Make beautiful presentations together with secure sharing in real-time and from any device.

  8. Full Page Slider With CSS and JavaScript

    Each slide title is an H2 tag with the corresponding data attribute and a link to be able to lead to that project's single page. The rest of our HTML is pretty straightforward as well. We have a logo at the top, static info which tells the user which page they are on, some description, and slider current/total indicator. CSS Overview

  9. How to Create Beautiful HTML & CSS Presentations 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 ...

  10. 40 Creative Examples of Sliders in Web Design

    A vertically moving slide show with a very catchy and appealing effect. You can click the number or the arrow to view the next slide. Themefuse. Josh Smith Design. This websites main page consists of full size slides with the navigation options presented at the bottom of the page. Utah travel. Lovely slideshow that is presented as a stack of ...

  11. W3.CSS Slideshow

    W3.CSS Slideshow - W3Schools W3.CSS Slideshow is a tutorial that teaches you how to create a stylish and responsive slideshow with W3.CSS, a modern CSS framework. You will learn how to use W3.CSS classes, animations, transitions, and buttons to create a slideshow that works on different devices and screen sizes. You will also see examples of different slideshow effects and themes that you can ...

  12. Google Slides: Online Presentations for Business

    Simple sharing controls. Sharing is simple. You can assign permissions to control who views and edits your slides. You can also easily convert your Slides into the desired format to share with others. As a global business, we have people working all over the world. Now they'll be able to communicate and collaborate in real time, using Google ...

  13. How to Engage New Website Visitors With Web Slideshows

    1. Enable automatic and manual transitions. As I mentioned, web slideshows can rotate through their content automatically based on a time, or manually when a user clicks an arrow button or swipes the screen. We recommend your slider allows for both methods.

  14. What Is a Slider in a Website? [Full Explanation + Examples]

    Step 1: Install the plugin from your administrator's page. Step 2: Make a new slider. Step 3: Fill the slider with photos, videos, and text. Step 4: Choose a skin and make the slider publicly viewable by publishing it. Step 5: Insert the slider into a post, a page, or the WordPress theme. 2. Add custom CSS stylesheets

  15. The Beginner's Guide to Google Slides

    How to Create a Blank Presentation. Now that you have a Google account, it's time to create your first presentation. Head over to Google Slides and place the cursor on the multicolored "+" icon in the bottom-right corner. The + turns into a black pencil icon; click it. Pro Tip: Type.

  16. Beautiful Examples of Sliders in Website Design

    The high popularity of the modern web pages and blogs can be attributed to the successful usage of the sliders which act as focal points on the web pages and are indeed one of the smartest ways of online interaction between the users across the globe. In this article, we will discuss the different types of sliders used. With more and more ...

  17. Google Slides: Sign-in

    Sign in. to continue to Slides. Email or phone. Forgot email? Not your computer? Use a private browsing window to sign in. Learn more about using Guest mode. Next. Create account. Access Google Slides with a personal Google account or Google Workspace account (for business use).

  18. 19+ Amazing CSS Page Transitions ( With Beautiful Examples! )

    1. Simple Click Page Transition. See Demo. Based on a few HTML, CSS, and JavaScript frameworks, this example shows you how you can create a stunning event-driven page transition. Click the "Start" button and watch the effect. You can set this up to go to multiple pages as well but the demo comes with one page only. 2.

  19. Embed a presentation in a web page or blog

    Open your presentation in PowerPoint for the web. On the File tab of the Ribbon, click Share, and then click Embed. To create the HTML code to embed your file in the web page, click Generate . In the Embed box, under Dimensions, select the correct dimensions for the blog or web page. Under Embed Code, right-click the code, click Copy, and then ...

  20. 5 Ways to Put PowerPoint Presentation on Web

    Step 1, save your PPT file as PPS file. Step 2, Set Camtasia studio to record the whole screen. Step 3, Play your PowerPoint PPS file and Press “F9†to start recording the screen. Step 4 ...

  21. How To Create a Slideshow

    W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

  22. Amazing homepage slider examples from modern websites

    Depending on the objectives and layout of the website, a homepage slider may have a different amount of slides. To avoid overwhelming customers or lengthening the load time of the website, it is generally advised to keep the number of slides to a minimum. Make sure there are no more than five slides in the slider as a general rule. 3.

  23. Creating more immersive presentations in Google Slides

    End users: To add the spotlight shape into Slides, go to Insert > speaker spotlight or click the speaker spotlight button in the toolbar. Visit the Help Center to learn more about using speaker spotlight. Rollout pace . Rapid Release domains: Gradual rollout ... Help Center page, learn about new products and features launching in Google ...

  24. The 5 golden rules of PowerPoint design

    To avoid this issue, work to grab your audience's attention before the presentation even starts. Instead of just having the title slide on the screen, consider creating "kiosk slides." These are a series of slides that contain a combination of interesting things for the audience to look at or engage with. Maybe you have an interesting image?

  25. Example prompts to try with Microsoft Copilot with Graph-grounded chat

    Tip: When you're giving Copilot instructions, you can direct it to specific work content by using the forward slash key ("/"), then typing the name of a file, person, or meeting. If you write a prompt and don't reference a specific file, person, or meeting, Copilot will determine the best source of data for its response, including all your work content.

  26. Google's Gemini is now in everything. Here's how you can try it out

    Gemini Pro, Google's middle-tier model that has been available via Bard since December, will continue to be available for free on the web at gemini.google.com (rather than bard.google.com). But ...

  27. CSS Page Transitions For A Better User Experience (50 Examples)

    Incorporate CSS page transitions for a seamless and professional feel. From fade-ins to slides and more, discover the possibilities with these must-try techniques. User experience is one vital aspect of websites today. When browsing, elements like design, speed, and smoothness are critical. Transitions are an excellent way to control changes ...

  28. EU AI Act: first regulation on artificial intelligence

    As part of its digital strategy, the EU wants to regulate artificial intelligence (AI) to ensure better conditions for the development and use of this innovative technology. AI can create many benefits, such as better healthcare; safer and cleaner transport; more efficient manufacturing; and cheaper and more sustainable energy.. In April 2021, the European Commission proposed the first EU ...