Slider html5/css display 2 row of images instead one - css

Question

Im trying to insert images in slider. For now only 5 demonstrates in 1 row, but i got 7 and the rest demonstrates in second row. Looks ugly. I know that major changes probably in css , but i have no idea what i need to change.
Thank you for response.
css:
#keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -20%; }
45% { left: -30%; }
50% { left: -40%; }
70% { left: -50%; }
75% { left: -80%; }
95% { left: -90%; }
100% { left: -100%; }
}
body, figure {
margin: 0;
font-family:
"HelveticaNeue-Light",
"Helvetica Neue Light",
"Helvetica Neue",
Helvetica, Arial,
"Lucida Grande",
sans-serif;
font-weight: 50;
font-size: 15px;
}
div#captioned-gallery {
width: 100%; overflow: hidden;
}
figure.slider {
position: relative; width: 300%;
font-size: 0; animation: 30s slidy infinite;
}
figure.slider figure {
width: 20%; height: auto;
display: inline-block; position: inherit;
}
figure.slider img { width: 20%; height: auto; }
figure.slider figure figcaption {
position: absolute; bottom: 0;
background: rgba(0,0,0,0.3);
color: #fff; width: 100%;
font-size: 1rem; padding: .6rem;
}
Image of Resin Toy Cars
Image of Cat Statuettes

Answer 1

Here's one I made earlier ;) You can ignore the transforms that was an effect for another transition. Here is a fiddle for you http://jsfiddle.net/RachGal/o6haapvt/
* {
margin: 0;
padding: 0;
}
.pic-wrapper {
position: absolute;
width: 100%;
height: 100%;
overflow:hidden;
}
figure {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity:0;
/*animation*/
animation: slideShow 42s linear infinite 0s;
-o-animation: slideShow 42s linear infinite 0s;
-moz-animation: slideShow 42s linear infinite 0s;
-webkit-animation: slideShow 42s linear infinite 0s;
}
.pic-1 {
animation-delay: 0s;
-o-animation-delay: 0s;
-moz-animation-delay: 0s;
-webkit-animation-delay: 0s;
background: url(http://www.rachelgallen.com/images/daisies.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.pic-2 {
animation-delay: 6s;
-o-animation-delay: 6s;
-moz-animation-delay: 6s;
-webkit-animation-delay: 6s;
background: url(http://www.rachelgallen.com/images/snowdrops.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.pic-3 {
animation-delay: 12s;
-o-animation-delay: 12s;
-moz-animation-delay: 12s;
-webkit-animation-delay: 12s;
background: url(http://rachelgallen.com/images/mountains.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.pic-4 {
animation-delay: 18s;
-o-animation-delay: 18s;
-moz-animation-delay: 18s;
-webkit-animation-delay: 18s;
background: url(http://www.rachelgallen.com/images/purpleflowers.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.pic-5 {
animation-delay: 24s;
-o-animation-delay: 24s;
-moz-animation-delay: 24s;
-webkit-animation-delay: 24s;
background: url(http://www.rachelgallen.com/images/yellowflowers.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.pic-6 {
animation-delay: 30s;
-o-animation-delay: 30s;
-moz-animation-delay: 30s;
-webkit-animation-delay: 30s;
background: url(http://www.rachelgallen.com/images/daisies.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.pic-7 {
animation-delay: 36s;
-o-animation-delay: 36s;
-moz-animation-delay: 36s;
-webkit-animation-delay: 36s;
background: url(http://www.rachelgallen.com/images/snowdrops.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
figure figcaption {
position: absolute;
bottom: 0;
text-align:center;
background: rgba(0, 0, 0, 0.3);
color: #fff;
width: 100%;
font-size: 1rem;
padding: .6rem;
}
/* keyframes*/
#keyframes slideShow {
0% {
opacity: 0.5;
transform:scale(1);
-ms-transform:scale(1);
}
4% {
opacity: 1
}
24% {
opacity: 1;
}
28% {
opacity: 0;
}
100% {
opacity: 0;
transform:scale(1);
-ms-transform:scale(1);
}
}
#-o-keyframes slideShow {
0% {
opacity: 0.5;
-o-transform:scale(1);
}
4% {
opacity: 1
}
24% {
opacity: 1;
}
28% {
opacity: 0;
}
100% {
opacity: 0;
-o-transform:scale(1);
}
}
#-moz-keyframes slideShow {
0% {
opacity: 0.5;
-moz-transform:scale(1);
}
4% {
opacity: 1
}
24% {
opacity: 1;
}
28% {
opacity: 0;
-moz-transform:scale(1.1);
}
100% {
opacity: 0;
-moz-transform:scale(1);
}
}
#-webkit-keyframes slideShow {
0% {
opacity: .5;
-webkit-transform:scale(1);
}
4% {
opacity: 1
}
24% {
opacity: 1;
}
28% {
opacity: 0;
}
100% {
opacity: 0;
-webkit-transform:scale(1);
}
}
<div class="pic-wrapper">
<figure class="pic-1">
<figcaption>Daisies</figcaption>
</figure>
<figure class="pic-2">
<figcaption>Snowdrops</figcaption>
</figure>
<figure class="pic-3">
<figcaption>Mountains</figcaption>
</figure>
<figure class="pic-4">
<figcaption>Purple Flowers</figcaption>
</figure>
<figure class="pic-5">
<figcaption>Yellow Flowers</figcaption>
</figure>
<figure class="pic-6">
<figcaption>Daisies Again</figcaption>
</figure>
<figure class="pic-7">
<figcaption>Snowdrops Again</figcaption>
</figure>
</div>