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.
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 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;
}
I have a slider on the homepage and other large hero images on other static pages. All 100% screen width. On smaller screens the other hero images stay larger (height wise) than my slider images. All images heights are set to auto.
I need the slider images to not just scale based on full width. I don't care if they get cut-off, the image heights are becoming too small on mobile. It seems the difference is the background-size: cover and the padding. But when I try it it doesn't work the same, I'm either putting it on the wrong element or it's messing with it because the slider width is 500%?
The hero images are built like this:
<div class="hero" style="background-image: url('/images/static/shop/hero_necklaces.jpg');">
<div class="hero-text">
<h1>Jewelry</h1>
</div>
</div>
#media (max-width: 480px)
.hero {
padding-top: 60px;
padding-bottom: 60px;
}
#media (max-width: 650px)
.hero {
padding-top: 90px;
padding-bottom: 90px;
}
.hero {
width: 100%;
height: auto;
padding-top: 140px;
padding-bottom: 140px;
display: table;
vertical-align: middle;
-webkit-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
The slider is built like this:
<div id="captioned-gallery" class="homepage-slider">
<figure class="slider">
<figure>
<img src="${request.contextPath}/images/static/home/header_hero1.jpg" alt="The 2015 Fall Collection">
<!--<figcaption class="hero-text">Sample Text 1</figcaption>-->
</figure>
<figure>
<img src="${request.contextPath}/images/static/home/header_hero2.jpg" alt="Get Paid to Share the Hope">
</figure>
<figure>
<img src="${request.contextPath}/images/static/home/header_hero3.jpg" alt="Handcrafted Artisan Made">
</figure>
<figure>
<img src="${request.contextPath}/images/static/home/header_hero1.jpg" alt="The 2015 Fall Collection">
</figure>
</figure>
</div>
div#captioned-gallery {
width: 100%;
overflow: hidden;
}
.homepage-slider {
padding-bottom: 115px;
}
figure { margin: 0; }
#-webkit-keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
100% { left: -300%; }
}
#keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
100% { left: -300%; }
}
figure.slider {
position: relative;
width: 500%;
font-size: 0;
-webkit-animation: 40s slidy infinite;
animation: 40s slidy infinite;
}
figure.slider figure {
width: 20%;
height: auto;
display: inline-block;
position: inherit;
}
figure.slider img {
width: 100%;
height: auto;
margin: 0px;
}
The slider seems to work fine, other than a long pause at the end. I've adjusted the width of the slider to 400%, each slide to 25%, and the animation. I'm guessing that the slider originally had 5 slides in it (4 with the first repeated at the end), and you didn't adjust for it.
div#captioned-gallery {
width: 100%;
overflow: hidden;
}
.homepage-slider {
padding-bottom: 115px;
}
figure {
margin: 0;
}
#-webkit-keyframes slidy {
0% {
left: 0%;
}
30% {
left: 0%;
}
33.33% {
left: -100%;
}
63.33% {
left: -100%;
}
66.66% {
left: -200%;
}
96.66% {
left: -200%;
}
99.99% {
left: -300%;
}
100% {
left: -300%;
}
}
#keyframes slidy {
0% {
left: 0%;
}
30% {
left: 0%;
}
33.33% {
left: -100%;
}
63.33% {
left: -100%;
}
66.66% {
left: -200%;
}
96.66% {
left: -200%;
}
99.99% {
left: -300%;
}
100% {
left: -300%;
}
}
figure.slider {
position: relative;
width: 400%;
font-size: 0;
-webkit-animation: 10s slidy infinite;
animation: 10s slidy infinite;
}
figure.slider figure {
width: 25%;
height: auto;
display: inline-block;
position: inherit;
}
figure.slider img {
width: 100%;
height: auto;
margin: 0px;
}
<div id="captioned-gallery" class="homepage-slider">
<figure class="slider">
<figure>
<a href="${request.contextPath}/category/Jewelry">
<img src="http://placehold.it/1280x600/000ff0" alt="The 2015 Fall Collection">
</a>
<!--<figcaption class="hero-text">Sample Text 1</figcaption>-->
</figure>
<figure>
<a href="${request.contextPath}/jsp/static/joinUs.jsp">
<img src="http://placehold.it/1280x600/0ff000" alt="Get Paid to Share the Hope">
</a>
</figure>
<figure>
<a href="${request.contextPath}/jsp/static/impact.jsp">
<img src="http://placehold.it/1280x600/00ff00" alt="Handcrafted Artisan Made">
</a>
</figure>
<figure>
<a href="${request.contextPath}/category/Jewelry">
<img src="http://placehold.it/1280x600/000ff0" alt="The 2015 Fall Collection">
</a>
</figure>
</figure>
</div>
If you want the slider images to be "taller" on mobile, gradually as the screen sizes shrinks, then my suggestion would be to increase the size of the .slider object using a combination of calc on width and margin left (margin left half the difference of width), and add overflow:hidden on .home-page-slider.
If you don't mind a sudden shift, at say 600px width or less, then just make the margin left -10% and width 120% at that beakpoint on the img like this:
div#captioned-gallery {
width: 100%;
overflow: hidden;
}
.homepage-slider {
padding-bottom: 115px;
}
figure {
margin: 0;
}
#-webkit-keyframes slidy {
0% {
left: 0%;
}
30% {
left: 0%;
}
33.33% {
left: -100%;
}
63.33% {
left: -100%;
}
66.66% {
left: -200%;
}
96.66% {
left: -200%;
}
99.99% {
left: -300%;
}
100% {
left: -300%;
}
}
#keyframes slidy {
0% {
left: 0%;
}
30% {
left: 0%;
}
33.33% {
left: -100%;
}
63.33% {
left: -100%;
}
66.66% {
left: -200%;
}
96.66% {
left: -200%;
}
99.99% {
left: -300%;
}
100% {
left: -300%;
}
}
figure.slider {
position: relative;
width: 400%;
font-size: 0;
-webkit-animation: 10s slidy infinite;
animation: 10s slidy infinite;
}
figure.slider figure {
width: 25%;
height: auto;
display: inline-block;
position: inherit;
overflow:hidden;
}
figure.slider img {
width: 100%;
height: auto;
margin: 0px;
}
#media (max-width: 600px)
{
figure.slider img { width: 120%; margin-left: -10%; margin-right: -10% }
}
<div id="captioned-gallery" class="homepage-slider">
<figure class="slider">
<figure>
<a href="${request.contextPath}/category/Jewelry">
<img src="http://placehold.it/1280x600/000ff0" alt="The 2015 Fall Collection">
</a>
<!--<figcaption class="hero-text">Sample Text 1</figcaption>-->
</figure>
<figure>
<a href="${request.contextPath}/jsp/static/joinUs.jsp">
<img src="http://placehold.it/1280x600/0ff000" alt="Get Paid to Share the Hope">
</a>
</figure>
<figure>
<a href="${request.contextPath}/jsp/static/impact.jsp">
<img src="http://placehold.it/1280x600/00ff00" alt="Handcrafted Artisan Made">
</a>
</figure>
<figure>
<a href="${request.contextPath}/category/Jewelry">
<img src="http://placehold.it/1280x600/000ff0" alt="The 2015 Fall Collection">
</a>
</figure>
</figure>
</div>
Smooth:
div#captioned-gallery {
width: 100%;
overflow: hidden;
}
.homepage-slider {
padding-bottom: 115px;
}
figure {
margin: 0;
}
#-webkit-keyframes slidy {
0% {
left: 0%;
}
30% {
left: 0%;
}
33.33% {
left: -100%;
}
63.33% {
left: -100%;
}
66.66% {
left: -200%;
}
96.66% {
left: -200%;
}
99.99% {
left: -300%;
}
100% {
left: -300%;
}
}
#keyframes slidy {
0% {
left: 0%;
}
30% {
left: 0%;
}
33.33% {
left: -100%;
}
63.33% {
left: -100%;
}
66.66% {
left: -200%;
}
96.66% {
left: -200%;
}
99.99% {
left: -300%;
}
100% {
left: -300%;
}
}
figure.slider {
position: relative;
width: 400%;
font-size: 0;
-webkit-animation: 10s slidy infinite;
animation: 10s slidy infinite;
}
figure.slider figure {
width: 25%;
height: auto;
display: inline-block;
position: inherit;
overflow: hidden;
}
figure.slider img {
width: 100%;
height: auto;
margin: 0px;
}
#media (max-width: 600px) {
figure.slider img {
width: -webkit-calc(100% + ((600px - 100%) / 5));
width: calc(100% + ((600px - 100%) / 5));
margin-left: -webkit-calc(10% - 60px);
margin-left: calc(10% - 60px);
margin-right: -webkit-calc(10% - 60px);
margin-right: calc(10% - 60px);
}
}
<div id="captioned-gallery" class="homepage-slider">
<figure class="slider">
<figure>
<a href="${request.contextPath}/category/Jewelry">
<img src="http://placehold.it/1280x600/000ff0" alt="The 2015 Fall Collection">
</a>
<!--<figcaption class="hero-text">Sample Text 1</figcaption>-->
</figure>
<figure>
<a href="${request.contextPath}/jsp/static/joinUs.jsp">
<img src="http://placehold.it/1280x600/0ff000" alt="Get Paid to Share the Hope">
</a>
</figure>
<figure>
<a href="${request.contextPath}/jsp/static/impact.jsp">
<img src="http://placehold.it/1280x600/00ff00" alt="Handcrafted Artisan Made">
</a>
</figure>
<figure>
<a href="${request.contextPath}/category/Jewelry">
<img src="http://placehold.it/1280x600/000ff0" alt="The 2015 Fall Collection">
</a>
</figure>
</figure>
</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/
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.