So i have a form, but i want it on my slider. The form is in a div and the slider is aswell.
This is the HTML
<div id="slider" >
<figure>
<img src="slider1.png" >
<img src="allevoertuigen.png">
<img src="THEORIECURSUS.png">
<img src="PAKKETTEN.png">
<img src="CONTACT.PNG">
</figure>
</div>
This is the CSS
#keyframes slider {
0% {
left: 0;
}
20% {
left: 0;
}
25% {
left: -100
}
45% {
left: -100%
}
50% {
left: -200%;
}
70% {
left: -200%;
}
75% {
left: -300%
}
95% {
left: -300%;
}
100% {
left: -400%;
}
}
#slider {
overflow: hidden;
}
#slider figure img {
width: 20%;
float: left;
}
#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 20s slider infinite;
}
Form is a div with a form tag with labels and submit buttons in it. IF you guys still need the Form code too, here is the gyazo of it. :
https://gyazo.com/1280234e8f37ae6bd8d01bb265ad61d4
I`ve found some things missing in the beginning of the css
0% {left: 0;}
20% {left: 0;}
25% {left: -100;}
45% {left: -100%;}
50% {left: -200%;}
70% {left: -200%;}
75% {left: -300%;}
95% {left: -300%;}
100% {left: -400%;}
Maybe is just that.
Related
Here's the code I'm working with. Works fine in Chrome and Firefox, but not IE and can't figure out what I'm doing wrong. Basically an automatic image slider. In IE I'm just getting the first img with no sliding.
Any help would be appreciated.
<style type="text/css">
#keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
#-webkit-keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
#-moz-keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
#-o-keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
#-ms-keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
body { margin: 0; }
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 30s slidy infinite;
-webkit-animation: 30s slidy infinite;
-moz-animation: 30s slidy infinite;
-o-animation: 30s slidy infinite;
-ms-animation: 30s slidy infinite;
}
</style>
<div id="slider">
<figure>
<img alt="" src="#" />
<img alt="" src="#" />
<img alt="" src="#" />
<img alt="" src="#" />
<img alt="" src="http://static.lakana.com/nxsglobal/lasvegasnow/photo/2016/05/24/5mayors300X100-black-border_1464108603276_8689483_ver1.0.jpg" />
</figure>
</div>
As you can see here, CSS Animations are not supported in IE9: http://caniuse.com/#feat=css-animation
Yeah the problem is having to use IE. If it's for a client you can tell them you can't make this work on legacy browsers, maybe display something in place of it (ideally a message to upgrade their browser)
I have a 5 image css3 infinite slider which is on a continuous loop (there is no jQuery or JS involved here and I don't want any either), however as soon as the last image has slid into position it jumps back to the first image. I have tried adding the first image as the 6th image in the group but this hasn't made any difference, can someone look over my CSS3 calculations to see what I'm doing wrong?
HTML
<div id="slider">
<figure>
<img src="banner01.jpg" alt="">
<img src="banner02.jpg" alt="">
<img src="banner03.jpg" alt="">
<img src="banner04.jpg" alt="">
<img src="banner05.jpg" alt="">
</figure>
</div>
CSS3
#keyframes slidr {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
body { margin: 0; }
div#slider { overflow: hidden; width:710px; height:300px; float:center; margin:auto; }
div#slider figure img {float: left; }
div#slider figure {
position: relative;
height:100%;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 30s slidr;
transition:.7s;
}
Thanks in advance
Your 100% part of the animation - the -400% value - is actually only being displayed for exactly... 0 seconds before it gets rewound to the 0% value. Try adding a gap that keep the -400% value active for longer:
#keyframes slidr {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
85% { left: -300%; }
90% { left: -400%; }
100% { left: -400%; }
}
/* Sorry, I'm on Safari */
#-webkit-keyframes slidr {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
85% { left: -300%; }
90% { left: -400%; }
100% { left: -400%; }
}
body {
margin: 0;
}
div#slider {
overflow: hidden;
width:710px;
height:300px;
/* I dont think this is actually a thing: */
float:center;
margin:auto;
}
div#slider figure img {
float: left;
}
div#slider figure {
position: absolute;
height:100%;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
/* And again, I'm on Safari. Also, speed it up for development purposes. */
-webkit-animation: 10s slidr infinite;
animation: 10s slidr infinite;
transition:.7s;
}
img {
width: 100vw;
height: 400px;
}
<div id="slider">
<figure>
<img src="http://placehold.it/350x150" alt="">
<img src="http://placehold.it/350x150" alt="">
<img src="http://placehold.it/350x150" alt="">
<img src="http://placehold.it/350x150" alt="">
<img src="http://placehold.it/350x150" alt="">
</figure>
</div>
Notice that it actually snaps back to 0 and not animates. You could create a transition again - if you want to - by adding another gap that restores the left value to 0%.
Update to return to start
To return to start, just make sure that:
The total of different steps equals the amount of frames + 1
The last and first step start at 0
In SASS we could easily automate this process:
#mixin keyframes-slider($name, $frames){
// Create keyframes wrapper
#keyframes #{$name} {
// Loop through the amount of frames (-1)
#for $i from 0 through ($frames - 1) {
// Divide the 100% by the amount of frames
// The first frame is 0, and the last will return to 0
#{100% / $frames * $i} { left: -100% * $i; }
}
// Add the final frame
100% { left: 0; }
}
}
Simply use it by including it and it will generate the keyframes you want:
#include keyframes-slider(slidr, 8);
As an example (pre-generated with 8):
/* Thos following is my compressed SASS output. */
#-webkit-keyframes slidr{0%{left:0%}12.5%{left:-100%}25%{left:-200%}37.5%{left:-300%}50%{left:-400%}62.5%{left:-500%}75%{left:-600%}87.5%{left:-700%}100%{left:0}}#keyframes slidr{0%{left:0%}12.5%{left:-100%}25%{left:-200%}37.5%{left:-300%}50%{left:-400%}62.5%{left:-500%}75%{left:-600%}87.5%{left:-700%}100%{left:0}}
/* This is a quick way to give a good example. */
ul {
width: 800px;
height: 100px;
padding: 0;
margin: 0;
list-style: none;
-webkit-animation: slidr 10s infinite;
animation: slidr 10s infinite;
position: absolute;
left: 0;
top: 0;
}
div, li {
width: 100px;
height: 100px;
float: left;
font-size: 30px;
background: #ececec;
}
li:nth-child(2n){
background: #dd0300;
}
div {
position: relative;
overflow: hidden;
}
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</div>
Is it possible to create a slider with HTML and CSS?
if yes than how to create a slider using HTML and CSS?
yes try this code . here is a link Simple css slider
html code
#-webkit-keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
#keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
body {
margin: 0;
}
div#slider {
overflow: hidden;
}
div#slider figure img {
width: 20%;
float: left;
}
div#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 10s slidy infinite;
/* change this time to reduce time*/
-webkit-animation: 10s slidy infinite;
/* change this time to reduce time*/
}
<div id="slider">
<figure>
<img src="http://demosthenes.info/assets/images/austin-fireworks.jpg" alt="">
<img src="http://demosthenes.info/assets/images/taj-mahal.jpg" alt="">
<img src="http://demosthenes.info/assets/images/ibiza.jpg" alt="">
<img src="http://demosthenes.info/assets/images/ankor-wat.jpg" alt="">
<img src="http://demosthenes.info/assets/images/austin-fireworks.jpg" alt="">
</figure>
</div>
try following link. it is very simple and easy to understand
http://qnimate.com/creating-a-slider-using-html-and-css-only/
here is a slidy effect, this slider is working in Internet Explorer but not working in Google Chrome
Any Idea
here is my HTML
-----xxxxx-----
<body>
<div id="slider">
<figure>
<img src="images/1.jpg" alt=""/>
<img src="images/2.jpg" alt=""/>
<img src="images/3.jpg" alt=""/>
<img src="images/4.jpg" alt=""/>
<img src="images/1.jpg" alt=""/>
</figure>
</div>
</body>
-----xxxxx-----
here is my CSS
-----xxxxx-----
#slider{
width: 80%;
max-width: 980px;
overflow-x: hidden;
overflow-y: hidden;
}
#slider figure{
width:500%;
position:relative;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
padding-top:0px;
padding-right:0px;
padding-bottom:0px;
padding-left:0px;
font-size:0px;
text-align:left;
-webkit-animation:30000ms slidy infinite;
-moz-animation:30000ms slidy infinite;
-ms-animation:30000ms slidy infinite;
-o-animation:30000ms slidy infinite;
animation:30000ms slidy infinite;
}
figure img {
width: 20%;
height: auto;
float: left;
}
#keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
-----xxxxx-----
Now i need to know where i am making mistake
/* Chrome, Safari, Opera */
#-webkit-keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
Add this css and try again.
Here is in fiddle an example of the problem that I'm facing. This animation has different behavior in different browsers. I need to make all work as Chrome. Tested on Chrome and Firefox.
HTML:
<div class='wrap'>
<div class='animate'></div>
</div>
CSS:
#keyframes test {
0% {
left: 0;
right: inherit;
width: 0;
}
10%{ width: 100%;}
49%{ width: 100%;}
59% {
left: inherit;
right: 0;
width: 0;
}
100% { width: 0;}
}
#-webkit-keyframes test {
0% {
left: 0;
right: inherit;
width: 0;
}
10%{ width: 100%;}
49%{width: 100%;}
59% {
left: inherit;
right: 0;
width: 0;
}
100% {width: 0;}
}
.wrap{
height: 10px;
position: relative;
width: 100%;
}
.animate{
background: #000;
height: 10px;
position: absolute;
top: 0;
-webkit-animation: test 6s infinite;
animation: test 6s infinite;
}
You can use this solution jsfiddle.net/vVGmR/2 - the only one css rule is animated here and it works. Tested on IE10, latest Firefox, Opera and Chrome
#keyframes test {
0% {left: -100%;}
10% {left: 0;}
49% {left: 0;}
59% {left: 100%;}
99.99% {left: 100%;}
100% {left: -100%;}
}
#-webkit-keyframes test {
0% {left: -100%;}
10% {left: 0;}
49% {left: 0;}
59% {left: 100%;}
99.99% {left: 100%;}
100% {left: -100%;}
}
.wrap{
height: 10px;
position: relative;
width: 100%;
overflow: hidden;
}
.animate{
background: #000;
height: 10px;
position: absolute;
top: 0;
width: 100%;
-webkit-animation: test 6s infinite;
animation: test 6s infinite;
}