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)
Related
I recently created a css slideshow based on animation,my question how should i add a description to those images that changes with every image that rotates.
Here is the code:
Html
<div id="slider">
<figure>
<img src="http://www.gettyimages.pt/giresources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg" alt>
<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" alt>
<img src="http://www.planwallpaper.com/static/images/magic-of-blue-universe-images.jpg" alt>
<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" alt>
<img src="http://www.planwallpaper.com/static/images/magic-of-blue-universe-images.jpg" alt>
</figure>
</div>
CSS
#-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;
height:100%;
}
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;
-webkit-animation: 30s slidy infinite;
animation: 30s slidy infinite;
}
Here is the fiddel
My problem is how should i sincronize the description with the image, i would use transitions but i dont know how should i queue the transitions for the descriptions...
P.S Sorry for any grammatical mistakes.
I'd probably do something like this
The idea being it's a whole div that animated not just the image.
HTML:
<div id="slider">
<figure>
<div class="slide">
<img src="http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg" alt />
<span class="caption">Slide number 01</span>
</div>
<div class="slide">
<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" alt>
<span class="caption">Slide number 02</span>
</div>
<div class="slide">
<img src="http://www.planwallpaper.com/static/images/magic-of-blue-universe-images.jpg" alt>
<span class="caption">Slide number 03</span>
</div>
<div class="slide">
<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" alt>
<span class="caption">Slide number 04</span>
</div>
<div class="slide">
<img src="http://www.planwallpaper.com/static/images/magic-of-blue-universe-images.jpg" alt>
<span class="caption">Slide number 05</span>
</div>
</figure>
</div>
CSS:
#-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;
height: 100%;
}
div#slider figure .slide {
width: 20%;
float: left;
background: #ccc;
}
div#slider figure img {
width: 100%;
}
div#slider figure .caption {
width: 100%;
color: #333;
font-weight: bold;
}
div#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
-webkit-animation: 30s slidy infinite;
animation: 30s slidy infinite;
}
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.
I have this code for creating a slider image, but for some reason it won't work on both Chrome and FF, I've managed to make it work on one at a time, but not both...
here's the code:
//Works on FF atm//
#-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%; }
}
#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%; }
}div#slider{
overflow: hidden;
}
div#slider figure img{
width: 20%;
float: left;
}
div#slider figure{
position: relative;
width: 500%;
margin: 0;
left:0;
font-size: 0;
-webkit-animation: slidy 5s infinite; /* Safari 4+ */
-moz-animation: slidy 5s infinite; /* Fx 5+ */
-o-animation: slidy 5s infinite; /* Opera 12+ */
animation: slidy 5s infinite; /* IE 10+ */
}
and the html:
<div id="slider">
<figure>
<img alt="" src="<?php bloginfo('template_url'); ?>/img/headerPhoto1.png" >
<img alt="" src="<?php bloginfo('template_url'); ?>/img/headerPhoto2.png" >
<img alt="" src="<?php bloginfo('template_url'); ?>/img/headerPhoto3.png" >
<img alt="" src="<?php bloginfo('template_url'); ?>/img/headerPhoto4.png" >
<img alt="" src="<?php bloginfo('template_url'); ?>/img/headerPhoto5.png" >
</figure>
</div>
Thanks !
Please refer to this JSFiddle code, I have checked in ipad2, ipad mini and ipad air, also on chrome on android mobile
<div id="slider">
<figure>
<img alt="" src="https://www.google.co.in/images/srpr/logo11w.png" >
<img alt="" src="https://www.google.co.in/images/srpr/logo11w.png" >
<img alt="" src="https://www.google.co.in/images/srpr/logo11w.png" >
<img alt="" src="https://www.google.co.in/images/srpr/logo11w.png" >
<img alt="" src="https://www.google.co.in/images/srpr/logo11w.png" >
</figure>
</div>
I think you should cross check the photos you have uploaded, if they are accessible properly.
<img alt="" src="<?php bloginfo('template_url'); ?>/img/headerPhoto1.png" >
If you have any query then please modify the jsfiddle, and resend the link.
Regards D.
i am trying to get a css slideshow working and i cannot see why it is not. The fault is in the keyframes. I am trying to get the images to come down from the top mask, and then once hidden, the previous image will go back up into the mask. This only works on keyframes 1 and 2. I cannot see why. My coursework deadline is soon, please help!
CSS code:
#content {
background-color: white;
/* border: 1px solid black; */
padding: 0;
width: 100%;
-webkit-box-shadow: 0px 0px 30px 4px #acafb3;
-moz-box-shadow: 0px 0px 30px 4px #acafb3;
box-shadow: 0px 0px 30px 4px #acafb3;
}
#slider {
background-image: url('images/ssgbritain.jpg');
border: 5px solid #eaeaea;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
height: 265px;
width: 998px;
overflow: visible;
position: relative;
}
#fig-container {
margin:0;
padding:0;
position:relative;
}
#mask {
overflow: hidden;
height: 270px;
}
#slider figure {
width: 998px;
/* Width Image */
height: 265px;
/* Height Image */
position: absolute;
top: -270px;
/* Original Position - Outside of the Slider */
}
figure:nth-child(1) {
animation:cycle 25s linear infinite;
-moz-animation:cycle 25s linear infinite;
-webkit-animation:cycle 25s linear infinite;
}
figure:nth-child(2) {
animation:cycle2 25s linear infinite;
-moz-animation:cycle2 25s linear infinite;
-webkit-animation:cycle2 25s linear infinite;
}
figure:nth-child(3) {
animation:cycle3 25s linear infinite;
-moz-animation:cycle3 25s linear infinite;
-webkit-animation:cycle3 25s linear infinite;
}
figure:nth-child(4) {
animation:cycle4 25s linear infinite;
-moz-animation:cycle4 25s linear infinite;
-webkit-animation:cycle4 25s linear infinite;
}
figure:nth-child(5) {
animation:cycle5 25s linear infinite;
-moz-animation:cycle5 25s linear infinite;
-webkit-animation:cycle5 25s linear infinite;
}
#keyframes cycle {
0% {
top: 0px;
}
25% {
top: 0px;
}
26% {
top: -270px;
}
96% {
top: -270px;
}
100% {
top: 0px;
}
}
#-webkit-keyframes cycle {
0% {
top: 0px;
}
4% {
top: 0px;
}
25% {
top: 0px;
}
26% {
top: -270px;
}
96% {
top: -270px;
}
100% {
top: 0px;
}
}
#keyframes cycle2 {
0% {
top: -270px;
}
20% {
top: -270px;
}
24% {
top: 0px;
}
41% {
top: 0px;
}
42% {
top: -270px;
}
100% {
top: -270px;
}
}
#-webkit-keyframes cycle2 {
0% {
top: -270px;
}
20% {
top: -270px;
}
24% {
top: 0px;
}
41% {
top: 0px;
}
42% {
top: -270px;
}
100% {
top: -270px;
}
#keyframes cycle3 {
0% {
top: -270px;
}
36% {
top: -270px;
}
40% {
top: 0px;
}
61% {
top: 0px;
}
62% {
top: -270px;
}
100% {
top: -270px;
}
}
#-webkit-keyframes cycle3 {
0% {
top: -270px;
}
36% {
top: -270px;
}
40% {
top: 0px;
}
61% {
top: 0px;
}
62% {
top: -270px;
}
100% {
top: -270px;
}
#keyframes cycle4 {
0% {
top: -270px;
}
52% {
top: -270px;
}
56% {
top: 0px;
}
81% {
top: 0px;
}
82% {
top: -270px;
}
100% {
top: -270px;
}
}
#-webkit-keyframes cycle4 {
0% {
top: -270px;
}
56% {
top: -270px;
}
60% {
top: 0px;
}
81% {
top: 0px;
}
82% {
top: -270px;
}
100% {
top: -270px;
}
}
#keyframes cycle5 {
0% {
top: -270px;
}
68% {
top: -270px;
}
72% {
top: 0px;
}
100% {
top: 0px;
}
}
#-webkit-keyframes cycle5 {
0% {
top: -270px;
}
76% {
top: -270px;
}
80% {
top: 0px;
}
92% {
top: 0px;
}
96 % {
top: -270px;
}
100% {
top: -270px;
}
}`
HTML code:
<div id="content">
<div id="slider">
<div id="mask">
<div id="fig-container">
<figure>
<img src="http://coursework/web/images/shopping.jpg" alt="Shopping centre" />
<figcaption>rger</figcaption>
</figure>
<figure>
<img src="http://coursework/web/images/ssgbritain.jpg" alt="SS Great Britain" />
<figcaption>rger</figcaption>
</figure>
<figure>
<img src="http://coursework/web/images/susbridge.jpg" alt="Suspension Bridge" />
<figcaption>rger</figcaption>
</figure>
<figure>
<img src="http://coursework/web/images/xmasmarket.jpg" alt="Suspension Bridge" />
<figcaption>rger</figcaption>
</figure>
</div>
</div>
</div>
P.s ignore the bad positioning of the image, seems to only be like that on jsfiddle.
Check this fiddle
You have errors in your css!! Simple as that, just checking the identation you will figure it out.
#-webkit-keyframes cycle3 is never closing!
#keyframes cycle {
0% {
top: 0px;
}
25% {
top: 0px;
}
26% {
top: -270px;
}
96% {
top: -270px;
}
100% {
top: 0px;
}
}
#-webkit-keyframes cycle {
0% {
top: 0px;
}
4% {
top: 0px;
}
25% {
top: 0px;
}
26% {
top: -270px;
}
96% {
top: -270px;
}
100% {
top: 0px;
}
}
#keyframes cycle2 {
0% {
top: -270px;
}
20% {
top: -270px;
}
24% {
top: 0px;
}
41% {
top: 0px;
}
42% {
top: -270px;
}
100% {
top: -270px;
}
}
#-webkit-keyframes cycle2 {
0% {
top: -270px;
}
20% {
top: -270px;
}
24% {
top: 0px;
}
41% {
top: 0px;
}
42% {
top: -270px;
}
100% {
top: -270px;
}
}
#keyframes cycle3 {
0% {
top: -270px;
}
36% {
top: -270px;
}
40% {
top: 0px;
}
61% {
top: 0px;
}
62% {
top: -270px;
}
100% {
top: -270px;
}
}
#-webkit-keyframes cycle3 {
0% {
top: -270px;
}
36% {
top: -270px;
}
40% {
top: 0px;
}
61% {
top: 0px;
}
62% {
top: -270px;
}
100% {
top: -270px;
}
}
#keyframes cycle4 {
0% {
top: -270px;
}
52% {
top: -270px;
}
56% {
top: 0px;
}
81% {
top: 0px;
}
82% {
top: -270px;
}
100% {
top: -270px;
}
}
#-webkit-keyframes cycle4 {
0% {
top: -270px;
}
56% {
top: -270px;
}
60% {
top: 0px;
}
81% {
top: 0px;
}
82% {
top: -270px;
}
100% {
top: -270px;
}
}
#keyframes cycle5 {
0% {
top: -270px;
}
68% {
top: -270px;
}
72% {
top: 0px;
}
100% {
top: 0px;
}
}
#-webkit-keyframes cycle5 {
0% {
top: -270px;
}
76% {
top: -270px;
}
80% {
top: 0px;
}
92% {
top: 0px;
}
96% {
top: -270px;
}
100% {
top: -270px;
}
}