JoelJonsson Posted June 16, 2014 Share Posted June 16, 2014 Hi, First, i need to tell you that i am not experienced in CSS or coding myself but i have fairly good overall technical knowledge. I'm in need of a very simple full screen slideshow consisting of 4 images. I found a CSS3/javascript for this here: http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/ I've tried to tweak it a bit to suite my needs. However, its not really optimal. I would like to change it so it doesnt fade between the images, a fast cut would be better. Also the original was for 6 images but i tried to change it to a 4 image slideshow but im not sure i did it correctly. Can someone help me with these two issues? thanks guys! the HTML looks like this: <!DOCTYPE html><!--[if lt IE 7 ]> <html class="ie ie6 no-js" lang="en"> <![endif]--><!--[if IE 7 ]> <html class="ie ie7 no-js" lang="en"> <![endif]--><!--[if IE 8 ]> <html class="ie ie8 no-js" lang="en"> <![endif]--><!--[if IE 9 ]> <html class="ie ie9 no-js" lang="en"> <![endif]--><!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]--> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Claires slideshow Screen 1</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Fullscreen Background Image Slideshow with CSS3 - A Css-only fullscreen background image slideshow" /> <meta name="keywords" content="css3, css-only, fullscreen, background, slideshow, images, content" /> <link rel="shortcut icon" href="../favicon.ico"> <link rel="stylesheet" type="text/css" href="css/demo.css" /> <link rel="stylesheet" type="text/css" href="css/style1.css" /> <script type="text/javascript" src="js/modernizr.custom.86080.js"></script> </head> <body id="page"> <ul class="cb-slideshow"> <li><span>Image 01</span><div></div></li> <li><span>Image 02</span><div></div></li> <li><span>Image 03</span></div></li> <li><span>Image 04</span><div></div></li> </ul> </body></html> and the CSS looks like this: .cb-slideshow,.cb-slideshow:after { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 0; }.cb-slideshow li span { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; color: transparent; background-size: cover; background-position: 50% 50%; background-repeat: none; opacity: 0; z-index: 0; -webkit-backface-visibility: hidden; -webkit-animation: imageAnimation 72s linear infinite 0s; -moz-animation: imageAnimation 72s linear infinite 0s; -o-animation: imageAnimation 72s linear infinite 0s; -ms-animation: imageAnimation 72s linear infinite 0s; animation: imageAnimation 72s linear infinite 0s; }.cb-slideshow li:nth-child(1) span { background-image: url(../images/1.jpg) }.cb-slideshow li:nth-child(2) span { background-image: url(../images/2.jpg); -webkit-animation-delay: 18s; -moz-animation-delay: 18s; -o-animation-delay: 18s; -ms-animation-delay: 18s; animation-delay: 18s; }.cb-slideshow li:nth-child(3) span { background-image: url(../images/3.jpg); -webkit-animation-delay: 36s; -moz-animation-delay: 36s; -o-animation-delay: 36s; -ms-animation-delay: 36s; animation-delay: 36s; }.cb-slideshow li:nth-child(4) span { background-image: url(../images/4.jpg); -webkit-animation-delay: 54s; -moz-animation-delay: 54s; -o-animation-delay: 54s; -ms-animation-delay: 54s; animation-delay: 54s; }/* Animation for the slideshow images */@-webkit-keyframes imageAnimation { 0% { opacity: 0 } 1% { opacity: 1 } 2% { opacity: 1 } 25% { opacity: 1 } 26% { opacity: 0 } 27% { opacity: 0 } 100% { opacity: 0 }}@-moz-keyframes imageAnimation { 0% { opacity: 0 } 1% { opacity: 1 } 2% { opacity: 1 } 25% { opacity: 1 } 26% { opacity: 0 } 27% { opacity: 0 } 100% { opacity: 0 }}@-o-keyframes imageAnimation { 0% { opacity: 0 } 1% { opacity: 1 } 2% { opacity: 1 } 25% { opacity: 1 } 26% { opacity: 0 } 27% { opacity: 0 } 100% { opacity: 0 }}@-ms-keyframes imageAnimation { 0% { opacity: 0 } 1% { opacity: 1 } 2% { opacity: 1 } 25% { opacity: 1 } 26% { opacity: 0 } 27% { opacity: 0 } 100% { opacity: 0 }}@keyframes imageAnimation { 0% { opacity: 0 } 1% { opacity: 1 } 2% { opacity: 1 } 25% { opacity: 1 } 26% { opacity: 0 } 27% { opacity: 0 } 100% { opacity: 0 }} /Joel Link to comment Share on other sites More sharing options...
es131245 Posted June 17, 2014 Share Posted June 17, 2014 Slideshow are made on JS and Jquery. I think all data is in Jquery module. Link to comment Share on other sites More sharing options...
JoelJonsson Posted June 17, 2014 Author Share Posted June 17, 2014 Slideshow are made on JS and Jquery. I think all data is in Jquery module. Ok, does that mean i need to change the javascript in order to get my issues solved? Joel Link to comment Share on other sites More sharing options...
es131245 Posted August 14, 2014 Share Posted August 14, 2014 Yes, you can modify code for you exact situation. Or sometimes its easier to write your own. Link to comment Share on other sites More sharing options...
davej Posted August 14, 2014 Share Posted August 14, 2014 You can google for pure css3 slideshows. 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