Jump to content

Having really Small Problem with CSS3 Image Slider

Recommended Posts

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:


<!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>
div#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 confused.gif





Edited by RHayabusa
Link to post
Share on other sites

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 by RHayabusa
Link to post
Share on other sites

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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...