Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Programming a slideshow with HTML and CSS
Generally, the developer uses JavaScript to add the behaviour to the HTML code. Sometimes, we can also add behaviour to the HTML code using CSS. For example, we can create a slideshow using HTML and CSS rather than using JavaScript with HTML.
We can create custom keyframes to animate the slides and create a slideshow.
Syntax
Users can follow the syntax below to create a slideshow using only HTML and CSS.
.slides {
width: calc(716px * 2);
animation: slideShow 10s ease infinite;
}
@keyframes slideShow {
30% {margin-left: 0px;}
70% {margin-left: calc(-716px * 1);}
}
In the above syntax, the ‘slides’ div contains multiple slides. We have defined the width of the ‘slides’ div according to the total slides it contains. Also, we have added the animation to the slides div.
In the slideshow keyframes, we change the value of the ‘margin-left’ CSS property to change the slide.
Steps
Step 1 – Create a div element and give it the ‘parent’ class name.
Step 2 – Create a nested div element and give the ‘slides’ class name. Furthermore, create multiple nested div elements with the ‘element’ class name representing the slides.
Step 3 – Also, add the content of the slide to the div element with the class name ‘element’.
Step 4 – Now, we require to add the CSS code for the slideshow. Give the fixed width and height to the ‘parent’ div element.
Step 5 – Set the fixed width and height for the ‘element’ div, which is our slide.
Step 6 – For the ‘slides’ div, calculate the total width according to the total number of slides it contains, and add a ‘slideshow’ animation for a particular duration.
Step 7 – Create a ‘slideshow’ keyframe which should change the value of the ‘margin-left’ CSS property to change the slides. Also, we have breakdown the percentage in the gap of 20, as we have 4 slides.
Example
In the example below, we have created 4 different slides and added the text content. Also, we have used the ‘n-th child’ pseudo selector to select the nth slide and change its font size and text color.
<html>
<head>
<style>
/* set the box for the slides */
.parent { height: 300px; width: 600px; overflow: hidden;}
/* set height and width for slide elements */
.element {float: left; height: 500px; width: 716px; backgroundcolor: grey;}
/* set the width of the slides div and animation. */
.slides { width: calc(716px * 4); animation: slideShow 10s ease infinite;}
/* changing the font size and text color for every slide */
.element:nth-child(1) {font-size: 2rem; color: blue;}
.element:nth-child(2) {font-size: 3rem; color: black;}
.element:nth-child(3) {font-size: 4rem; color: green;}
.element:nth-child(4) {font-size: 5rem; color: pink;}
/* creating the animation for the slideShow */
/* for more slides, users can take percentages accordingly. */
@keyframes slideShow {
20% {margin-left: 0px;}
40% {margin-left: calc(-716px * 1);}
60% {margin-left: calc(-716px * 2);}
80% {margin-left: calc(-716px * 3);}
}
</style>
</head>
<body>
<h2> Programming a slideshow using the <i> HTML and CSS </i> only </h2>
<div class = "parent">
<div class = "slides">
<div class = "element">
<h3 class = "content"> This is a slide 1. </h3>
</div>
<div class = "element">
<h3 class = "content"> This is a slide 2. </h3>
</div>
<div class = "element">
<h3 class = "content"> This is a slide 3. </h3>
</div>
<div class = "element">
<h3 class = "content"> This is a slide 4. </h3>
</div>
</div>
</div>
</body>
</html>
In the output, users can see the slideshow of 10 seconds.
In the example below, we have added the images as the content of the slides. Also, we have set image dimensions equal to the full dimensions of the ‘element’ div.
<html>
<head>
<style>
/* set the box for the slides */
.parent { height: 300px; width: 600px; overflow: hidden;}
/* set height and width for slide elements */
.element {float: left; height: 500px; width: 716px; backgroundcolor: grey; }
/* set the width of the slides div and animation. */
.slides {width: calc(716px * 4); animation: slideShow 10s ease infinite;}
img {width: 100%; height: 100%;}
/* creating the animation for the slideshow */
/* for more slides, users can take percentages accordingly. */
@keyframes slideShow {
20% {margin-left: 0px;}
40% {margin-left: calc(-716px * 1);}
60% {margin-left: calc(-716px * 2);}
80% {margin-left: calc(-716px * 3);}
}
</style>
</head>
<body>
<h2> Programming a slideshow using the <i> HTML and CSS </i> only </h2>
<div class = "parent">
<div class = "slides">
<div class = "element">
<img src = "https://www.stockvault.net/data/2011/05/31/124348/thumb16.jpg" alt = "image 1">
</div>
<div class = "element">
<img src = "https://www.stockvault.net/data/2007/03/01/99589/thumb16.jpg" alt = "image 2">
</div>
<div class = "element">
<img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTxtApKDB3clf0BZYxgUlbGiYg7m-DwYlzYd9WXS5u3_K2MjeMZ-Yj3GpWdaNaGYej52l8&usqp=CAU" alt = "image 3">
</div>
<div class = "element">
<img src = "https://thumbs.dreamstime.com/b/mani%C3%A8re-par-les-racines-vertes-de-h%C3%AAtre-de-for%C3%AAt-arbres-en-nature-41019730.jpg" alt = "image 4">
</div>
</div>
</div>
</body>
</html>
In the output, users can observe the slideshow of the images.
Users learned to create a slideshow using HTML and CSS only. However, using JavaScript to create a slideshow is recommended as we can manipulate it more. For example, if we have 100+ slides and need to create a slideshow, CSS code can become more complex as we need to add hard-coded percentage values in the keyframes to animate slides.
3K+ Views
