固定背景画像上のテキストとイメージスライダ

現在、私はMaterializecss Image Sliderを使って作業しています。実際に私が望むのは、固定フルスクリーンの背景画像を保持し、テキストと画像を固定背景画像上にスライドさせることです。固定背景画像上のテキストとイメージスライダ

今のところスライダークラスの背景色を透明にしていますが、動作していません。

$(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>

出典

2017-01-07 Shinoy Shaji

あなたの質問は明らかではありません。あなたが解決しようとしたこととあなたが直面した問題を分け合わせると良いでしょう。 – Rahul

私はbg-imageとテキストが固定されたスライダが必要です。 –

最後に、私は私の質問の答えを見つけました。

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>

出典

2017-01-07 06:40:57

あなたはsectionのstyle属性に引用問題の世話をする場合には動作するようです。 style=""で二重引用符を使用すると、二重引用符を二重引用符で囲むことはできません。したがって、その属性内の二重引用符を削除するか、一重引用符で置き換える必要があります。また、rgba(255,255,255,0)は透明度の1つの方法ですが、より簡単な方法はtransparentを使用することですが、さらに簡単な方法は、デフォルトで背景がないため、その線を完全に削除することです。ここに実用的なデモがあります - http://codepen.io/anon/pen/MJwOBR

出典

2017-01-07 05:53:24

でも問題はありませんが、固定された背景画像に1つの画像をスライドさせる方法が問題です。 –

固定背景画像上のテキストとイメージスライダ

答えて

関連する問題