Scribd
Upload
52 views6 pages

CSS e HTML BANNERS ROTATIVO 02 A 10

This document provides the HTML and CSS code to create image slideshows with different numbers of slides. The HTML code contains a <figure> element with <img> tags for each image. The CSS defines a slideshow animation keyframe that shifts the images left by increments of 100% as the percentage increases. It also styles the slider container and images within it. The keyframe animation percentages are adapted for 2-10 slides to smoothly transition between each image.

Uploaded by

pedrinoliveira100
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
52 views6 pages

CSS e HTML BANNERS ROTATIVO 02 A 10

This document provides the HTML and CSS code to create image slideshows with different numbers of slides. The HTML code contains a <figure> element with <img> tags for each image. The CSS defines a slideshow animation keyframe that shifts the images left by increments of 100% as the percentage increases. It also styles the slider container and images within it. The keyframe animation percentages are adapted for 2-10 slides to smoothly transition between each image.

Uploaded by

pedrinoliveira100
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 6

FOR 2 SLIDES

HTML
<div style="position: relative; background: rgb(248, 249, 250);"><div id="slider">
<figure>
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
</figure>
</div>
</div>

CSS
@keyframes slideshow {

25% {left: 0;}


50% {left: 0;}
75% {left: -100%;}
100% {left: -100%;}
}
#slider{overflow:hidden;width:50%;margin:5px auto; border: 5px solid
transparent;border-radius: 10px;}
#slider figure img{width:20%;float:left;}
#slider figure{position:relative;width:500%;margin:0;left:0;text-
align:left;animation:15s slideshow infinite}
@media screen and (max-width: 767px) {#slider {overflow: hidden; width: 100%;
margin: 0 auto;}}

FOR 3 SLIDES
HTML
<div style="position: relative; background: rgb(248, 249, 250);"><div id="slider">
<figure>
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
</figure>
</div>
</div>

CSS
@keyframes slideshow {

17% {left: 0;}


34% {left: 0;}
50% {left: -100%;}
67% {left: -100%;}
84% {left: -200%;}
100% {left: -200%;}
}
#slider{overflow:hidden;width:50%;margin:5px auto; border: 5px solid
transparent;border-radius: 10px;}
#slider figure img{width:20%;float:left;}
#slider figure{position:relative;width:500%;margin:0;left:0;text-
align:left;animation:15s slideshow infinite}
@media screen and (max-width: 767px) {#slider {overflow: hidden; width: 100%;
margin: 0 auto;}}

FOR 4 SLIDES
HTML
<div style="position: relative; background: rgb(248, 249, 250);"><div id="slider">
<figure>
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
</figure>
</div>
</div>

CSS
@keyframes slideshow {

12% {left: 0;}


25% {left: 0;}
37% {left: -100%;}
50% {left: -100%;}
62% {left: -200%;}
75% {left: -200%;}
87% {left: -300%;}
100% {left: -300%;}
}
#slider{overflow:hidden;width:50%;margin:5px auto; border: 5px solid
transparent;border-radius: 10px;}
#slider figure img{width:20%;float:left;}
#slider figure{position:relative;width:500%;margin:0;left:0;text-
align:left;animation:15s slideshow infinite}
@media screen and (max-width: 767px) {#slider {overflow: hidden; width: 100%;
margin: 0 auto;}}

FOR 5 SLIDES
HTML
<div style="position: relative; background: rgb(248, 249, 250);"><div id="slider">
<figure>
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
</figure>
</div>
</div>

CSS
@keyframes slideshow {

10% {left: 0;}


20% {left: 0;}
30% {left: -100%;}
40% {left: -100%;}
50% {left: -200%;}
60% {left: -200%;}
70% {left: -300%;}
80% {left: -300%;}
90% {left: -400%;}
100% {left: -400%;}
}
#slider{overflow:hidden;width:50%;margin:5px auto; border: 5px solid
transparent;border-radius: 10px;}
#slider figure img{width:20%;float:left;}
#slider figure{position:relative;width:500%;margin:0;left:0;text-
align:left;animation:15s slideshow infinite}
@media screen and (max-width: 767px) {#slider {overflow: hidden; width: 100%;
margin: 0 auto;}}

FOR 6 SLIDES
HTML
<div style="position: relative; background: rgb(248, 249, 250);"><div id="slider">
<figure>
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
</figure>
</div>
</div>

CSS
@keyframes slideshow {

8% {left: 0;}
17% {left: 0;}
25% {left: -100%;}
34% {left: -100%;}
42% {left: -200%;}
50% {left: -200%;}
58% {left: -300%;}
67% {left: -300%;}
75% {left: -400%;}
84% {left: -400%;}
92% {left: -500%;}
100% {left: -500%;}
}
#slider{overflow:hidden;width:50%;margin:5px auto; border: 5px solid
transparent;border-radius: 10px;}
#slider figure img{width:10%;float:left;}
#slider figure{position:relative;width:1000%;margin:0;left:0;text-
align:left;animation:15s slideshow infinite}
@media screen and (max-width: 767px) {#slider {overflow: hidden; width: 100%;
margin: 0 auto;}}

FOR 7 SLIDES
HTML
<div style="position: relative; background: rgb(248, 249, 250);"><div id="slider">
<figure>
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
</figure>
</div>
</div>

CSS
@keyframes slideshow {
7% {left: 0;}
14% {left: 0;}
21% {left: -100%;}
28% {left: -100%;}
35% {left: -200%;}
42% {left: -200%;}
50% {left: -300%;}
57% {left: -300%;}
64% {left: -400%;}
71% {left: -400%;}
78% {left: -500%;}
85% {left: -500%;}
92% {left: -600%;}
100% {left: -600%;}
}
#slider{overflow:hidden;width:50%;margin:5px auto; border: 5px solid
transparent;border-radius: 10px;}
#slider figure img{width:10%;float:left;}
#slider figure{position:relative;width:1000%;margin:0;left:0;text-
align:left;animation:15s slideshow infinite}
@media screen and (max-width: 767px) {#slider {overflow: hidden; width: 100%;
margin: 0 auto;}}

FOR 8 SLIDES
HTML
<div style="position: relative; background: rgb(248, 249, 250);"><div id="slider">
<figure>
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
</figure>
</div>
</div>

CSS
@keyframes slideshow {

6% {left: 0;}
12% {left: 0;}
18% {left: -100%;}
25% {left: -100%;}
31% {left: -200%;}
37% {left: -200%;}
43% {left: -300%;}
50% {left: -300%;}
56% {left: -400%;}
62% {left: -400%;}
68% {left: -500%;}
75% {left: -500%;}
81% {left: -600%;}
87% {left: -600%;}
93% {left: -700%;}
100% {left: -700%;}
}
#slider{overflow:hidden;width:50%;margin:5px auto; border: 5px solid
transparent;border-radius: 10px;}
#slider figure img{width:10%;float:left;}
#slider figure{position:relative;width:1000%;margin:0;left:0;text-
align:left;animation:15s slideshow infinite}
@media screen and (max-width: 767px) {#slider {overflow: hidden; width: 100%;
margin: 0 auto;}}

FOR 9 SLIDES
HTML
<div style="position: relative; background: rgb(248, 249, 250);"><div id="slider">
<figure>
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
</figure>
</div>
</div>

CSS
@keyframes slideshow {

5% {left: 0;}
11% {left: 0;}
16% {left: -100%;}
22% {left: -100%;}
27% {left: -200%;}
33% {left: -200%;}
38% {left: -300%;}
44% {left: -300%;}
49% {left: -400%;}
55% {left: -400%;}
62% {left: -500%;}
67% {left: -500%;}
73% {left: -600%;}
78% {left: -600%;}
84% {left: -700%;}
89% {left: -700%;}
94% {left: -800%;}
100% {left: -800%;}
}
#slider{overflow:hidden;width:50%;margin:5px auto; border: 5px solid
transparent;border-radius: 10px;}
#slider figure img{width:10%;float:left;}
#slider figure{position:relative;width:1000%;margin:0;left:0;text-
align:left;animation:15s slideshow infinite}
@media screen and (max-width: 767px) {#slider {overflow: hidden; width: 100%;
margin: 0 auto;}}

FOR 10 SLIDES
HTML
<div style="position: relative; background: rgb(248, 249, 250);"><div id="slider">
<figure>
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
</figure>
</div>
</div>

CSS
@keyframes slideshow {

5% {left: 0;}
10% {left: 0;}
15% {left: -100%;}
20% {left: -100%;}
25% {left: -200%;}
30% {left: -200%;}
35% {left: -300%;}
40% {left: -300%;}
45% {left: -400%;}
50% {left: -400%;}
55% {left: -500%;}
60% {left: -500%;}
65% {left: -600%;}
70% {left: -600%;}
75% {left: -700%;}
80% {left: -700%;}
85% {left: -800%;}
90% {left: -800%;}
95% {left: -900%;}
100% {left: -900%;}
}
#slider{overflow:hidden;width:50%;margin:5px auto; border: 5px solid
transparent;border-radius: 10px;}
#slider figure img{width:10%;float:left;}
#slider figure{position:relative;width:1000%;margin:0;left:0;text-
align:left;animation:15s slideshow infinite}
@media screen and (max-width: 767px) {#slider {overflow: hidden; width: 100%;
margin: 0 auto;}}

You might also like