Generally, the developer uses JavaScript to add the behavior to the HTML code. Sometimes, we can also add behavior 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.
Users can follow the following syntax to create slideshows 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 define the width of the 'slides' div based on the total number of slides it contains. Additionally, we added animation to the slideshow div.
In the slideshow keyframes, we change the value of the ‘margin-left’ CSS property to change the slide.
Step 1 - Create a div element and give it a '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.
In the example below, we have created 4 different slides and added text content. Additionally, we 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.
Example
In the example below, we add an image as the content of the slide. Additionally, we set the dimensions of the image to the full size 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, the user can observe a slideshow of images.
ConclusionUsers learned to create slideshows using only HTML and CSS. However, it is recommended to use JavaScript to create slideshows since we can manipulate it more flexibly. For example, if we have more than 100 slides and need to create a slideshow, the CSS code may become more complex because we need to add hardcoded percentage values in keyframes to animate the slideshow.
The above is the detailed content of Write slideshows using HTML and CSS. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
