How To Create An Html Slideshow

Programming a slideshow with HTML and CSS

In this article, we will know how to build the slideshow using HTML & CSS. A slideshow can be used to display text or images that continuously scroll from one slide to the other to display its content. This article shows an approach to building a slideshow with the use of only HTML and CSS. It consumes less browser memory and takes less computation power as there is no JavaScript involved. JavaScript-based sliders make the web page slower and also do not work if the user has disabled JavaScript in the browser.

It uses the approach of using animation keyframes to scroll through each of the slides by modifying each of the slide's margin-left property during the animation. The animation type can be specified so that the slides can be animated as per the required duration and effect. We will divide the task into two sections ie., in the first, we will decorate the structure by using only HTML and in the second section, we will decorate the structure by using CSS.

Attention reader! Don't stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.

Approach: For building the slideshow or carousel, we will follow the below approach.

To display the text content on each slide, we have defined a separate div section that will carry content for each slide.
We have the slide-wrapper class to carry all the slide frame that facilitates to apply same animation effect as well as other CSS properties to each slide.
We have used the overflow property so that it will clip the extra content, and the rest of the content will be invisible if the content of an element is too big to fit in the specified area. The float property is used in order to align the contents to the left.
We have used :nth-child() selector in order to apply the background color that will match the elements based on their position in a group of siblings. It matches every element that is the nth-child.
In order to define the animation for the slideshow, the keyframes property will be used to scroll through each of the slides by modifying the margin-left property for each of the slides during the animation.

First Section: This section contains the HTML portion of the page. The slides that have to be shown are defined with their corresponding text.

HTML Code:

HTML

< html >

< head >

< title >HTML and CSS Slideshow</ title >

</ head >

< body >

< div id = "slideshow" >

< div class = "slide-wrapper" >

< div class = "slide" >

< h1 class = "slide-number" >

GeeksforGeeks

</ h1 >

</ div >

< div class = "slide" >

< h1 class = "slide-number" >

A computer science portal

</ h1 >

</ div >

< div class = "slide" >

< h1 class = "slide-number" >

This is an example of

</ h1 >

</ div >

< div class = "slide" >

< h1 class = "slide-number" >

Slideshow with HTML and CSS only

</ h1 >

</ div >

</ body >

</ html >

Second Section: This section consists of all the styling that would be used to make the slideshow. The animation to be used to move each of the slides is defined by setting the margin-left property as required for every slide. This gives it an appearance of smoothly transitioning between each of the slides.

CSS Code:

CSS

body {

font-family : Helvetica , sans-serif ;

padding : 5% ;

text-align : center ;

font-size : 50 ;

}

#slideshow {

overflow : hidden ;

height : 510px ;

width : 728px ;

margin : 0 auto ;

}

.slide {

float : left ;

height : 510px ;

width : 728px ;

}

.slide-wrapper {

width : calc( 728px * 4 );

animation: slide 10 s ease infinite;

}

.slide:nth-child( 1 ) {

background : green ;

}

.slide:nth-child( 2 ) {

background : pink;

}

.slide:nth-child( 3 ) {

background : red ;

}

.slide:nth-child( 4 ) {

background : yellow;

}

@keyframes slide {

20% {

margin-left : 0px ;

}

40% {

margin-left : calc( -728px * 1 );

}

60% {

margin-left : calc( -728px * 2 );

}

80% {

margin-left : calc( -728px * 3 );

}

Complete Code: Here, we will combine the above two sections into one to achieve the mentioned task.

HTML

<!DOCTYPE html>

< html >

< head >

< title >HTML and CSS Slideshow</ title >

< style >

body {

font-family: Helvetica, sans-serif;

padding: 5%;

text-align: center;

font-size: 50;

}

/* Styling the area of the slides */

#slideshow {

overflow: hidden;

height: 510px;

width: 728px;

margin: 0 auto;

}

/* Style each of the sides

with a fixed width and height */

.slide {

float: left;

height: 510px;

width: 728px;

}

/* Add animation to the slides */

.slide-wrapper {

/* Calculate the total width on the

basis of number of slides */

width: calc(728px * 4);

/* Specify the animation with the

duration and speed */

animation: slide 10s ease infinite;

}

/* Set the background color

of each of the slides */

.slide:nth-child(1) {

background: green;

}

.slide:nth-child(2) {

background: pink;

}

.slide:nth-child(3) {

background: red;

}

.slide:nth-child(4) {

background: yellow;

}

/* Define the animation

for the slideshow */

@keyframes slide {

/* Calculate the margin-left for

each of the slides */

20% {

margin-left: 0px;

}

40% {

margin-left: calc(-728px * 1);

}

60% {

margin-left: calc(-728px * 2);

}

80% {

margin-left: calc(-728px * 3);

}

</ style >

</ head >

< body >

< div id = "slideshow" >

< div class = "slide-wrapper" >

< div class = "slide" >

< h1 class = "slide-number" >

GeeksforGeeks

</ h1 >

</ div >

< div class = "slide" >

< h1 class = "slide-number" >

A computer science portal

</ h1 >

</ div >

< div class = "slide" >

< h1 class = "slide-number" >

This is an example of

</ h1 >

</ div >

< div class = "slide" >

< h1 class = "slide-number" >

Slideshow with HTML and CSS only

</ h1 >

</ div >

</ body >

</ html >

Output: