RHayabusa Posted January 31, 2015 Share Posted January 31, 2015 (edited) Hey Everyone,I've been doing this Responsive CSS3 Image Slider tutorial for a website (using four exactly same sized images) but want it to be responsive for mobile phones except that when at 100% zoom in Firefox it shows this four mangledimages and at 30% zoom shows one image perfectly acting as a slider (please see attached) - note each image is 3000px width by 1200px length: HTML <!DOCTYPE html><html><meta charset="UTF-8"><title></title><head><link rel="stylesheet" type="text/css" href="Layout/Styles/Layout.css"></head><body><div id="slider"><figure><img src="Images/Edited/Engineer1.jpg" alt="Engineer1"><img src="Images/Edited/Engineer2.jpg" alt="Engineer2"><img src="Images/Edited/Engineer3.jpg" alt="Engineer3"><img src="Images/Edited/Engineer4.jpg" alt="Engineer4"></figure></div>This is my website!</body></html> CSS3div#slider { width: 80%; max-width: 3000px; }div#slider figure {position: relative; width: 400%;margin: 0; padding: 0; font-size: 0; text-align: left;}figure#imagestrip img {width: 25%; height: auto; float: left;}div#slider {width: 80%; max-width: 3000px; overflow: hidden}@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 figure {position: relative; width: 400%;margin: 0; padding: 0; font-size: 0; left: 0; text-align: left;animation: 30s slidy infinite;}</div> Please help - thanks Edited January 31, 2015 by RHayabusa Link to comment Share on other sites More sharing options...
funbinod Posted January 31, 2015 Share Posted January 31, 2015 I couldn't understand what ur exact problem is. please go more clear. instead, in your css u have mentioned selector as-- figure#imagestrip img but in your html there is nothing with id 'imagestrip' Link to comment Share on other sites More sharing options...
RHayabusa Posted February 1, 2015 Author Share Posted February 1, 2015 (edited) I couldn't understand what ur exact problem is. please go more clear. instead, in your css u have mentioned selector as-- figure#imagestrip img but in your html there is nothing with id 'imagestrip' Thanks for your help, am trying to change what you've suggested. To re-explain my problem, I wish to have one image slider that animates ands shows the next image, however I've got four images each on a new line animating, as opposed to one that slides to each image. Here is a link to the Winrar file, including images,CSS etc (3mb) if anyone is unsure: https://www.mediafire.com/?svcvn6cco9yz0fz Edited February 1, 2015 by RHayabusa Link to comment Share on other sites More sharing options...
funbinod Posted February 1, 2015 Share Posted February 1, 2015 i don't use firefox (coz i don't like. i dunno why) so i dunno much about firefox. it might be the case of compatibility. just add some lines that can support firefox. like-- @-moz-keyframes slidy { } -moz-animation: 30s slidy infinite; Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now