Text and Image Slider over a fixed background image
Question
Currently, I'm working with the Materializecss Image Slider. Actually what I want is to Keep a fixed full-screen Background image and the texts and images slide over through the fixed background images.
For now, I put background-color of the slider class as transparent, but it's not Working.
$(document).ready(function(){ $('.slider').slider(); });
section { background: url('http://lorempixel.com/580/250/nature/4') center center no-repeat; background-size: cover; } .slider .slides { background-color: rgba(255,255,255,0); margin: 0; height: 400px; }
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>Materialize slider</title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/materialize.css"> </head> <body> <section> <div class="slider"> <ul class="slides"> <li> <div class="caption center-align"> <h3>This is our big Tagline!</h3> <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5> </div> </li> <li> <div class="caption left-align"> <h3>Left Aligned Caption</h3> <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5> </div> </li> <li> <div class="caption right-align"> <h3>Right Aligned Caption</h3> <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5> </div> </li> <li> <div class="caption center-align"> <h3>This is our big Tagline!</h3> <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5> </div> </li> </ul> </div> </section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js'></script> <script src="js/index.js"></script> </body> </html>
3 answers
solution1
2 ACCPTED 2017-01-07 06:40:57
Finally, I found the Answer for my question.
function step(n){ //$(".content-switcher").hide(); if(n==1){ $(".content-switcher").animate({ "left":"-600px" },"slow"); } else if(n==2){ $(".content-switcher").animate({ "left":"-1200px" },"slow"); } else if(n==3){ $(".content-switcher").animate({ "left":"0px" },"slow"); } }
.container{ width: 600px; margin: 0 auto; outline:1px solid red; overflow: hidden; background-image: url("https://static.vecteezy.com/system/resources/previews/000/093/696/original/vector-yellow-abstract-background.jpg"); } .slider{ width: 1800px;} .content-switcher{ width: 600px; float: left; position: relative; top:0; left: 0; }
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>Simple Content Slider</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <a href="#" onclick="step(1); return false;" style="color: #fff">Step 1</a> <a href="#" onclick="step(2); return false;" style="color: #fff">Step 2</a> <a href="#" onclick="step(3); return false;" style="color: #fff">Step 3</a> <div class="slider"> <div class="content-switcher" id="content1"> <p>1Lorem ipsum dolor sit amet, consectetur adipisicing elit . Saepe sint enim autem beatae sunt distinctio fugiat facilis accusamus dolorum labore quis natus culpa laudantium eos consequatur excepturi rerum error velit.</p> <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437"> <p>1Lorem ipsum dolor sit amet, consectetur adipisicing elit . Saepe sint enim autem beatae sunt distinctio fugiat facilis accusamus dolorum labore quis natus culpa laudantium eos consequatur excepturi rerum error velit.</p> <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437"> <p>1Lorem ipsum dolor sit amet, consectetur adipisicing elit . Saepe sint enim autem beatae sunt distinctio fugiat facilis accusamus dolorum labore quis natus culpa laudantium eos consequatur excepturi rerum error velit.</p> </div> <div class="content-switcher" id="content2"> <img src="http://images2.fanpop.com/image/user_images/Starmight350-808191_384_377.jpg"> <p>2Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe sint enim autem beatae sunt distinctio fugiat facilis accusamus dolorum labore quis natus culpa laudantium eos consequatur excepturi rerum error velit.</p> </div> <div class="content-switcher" id="content3"> <p>3Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe sint enim autem beatae sunt distinctio fugiat facilis accusamus dolorum labore quis natus culpa laudantium eos consequatur excepturi rerum error velit.</p> </div> </div> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script> </body> </html>
solution2
1 2017-01-07 05:53:24
Seems to work if you take care of the quote issue in the section 's style attribute. If you use double-quotes with style="" then you can't have double-quotes within those double-quotes. So you need to remove the double-quotes within that attribute or replace them with single quotes. Also rgba(255,255,255,0) is one way to do transparency, but an easier way is to use transparent - but an even easier way is just to remove that line entirely because there is no background by default, so it's transparent. Here's a working demo - http://codepen.io/anon/pen/MJwOBR
solution3
1 2018-08-07 05:49:50
You can take a div with overlay class and set overlay div on the whole image like below:
Add div after <section> tag take class name as class="overlay"
<div class="overlay"></div>
Add some CSS for set overlay div on image
.overlay
{
position: absolute;
height: 100%;
width: 100%;
background-color: rgba(255, 255, 255, 0.17);
}
And add CSS for display text properly
.caption {
position: relative;
z-index: 99;
}
Try this.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.