スライドショーの別の画像にテキストを追加するには

Question

私はjQueryを学んでいます。テキストとエフェクトを追加しようとしていて、さまざまなスライドショーで遊んでいます。

私はこのcodepenをテンプレートとして使用していますが、イメージ上にテキストを追加すると、それは流動的に滑らず、スライドショーを壊して壊してしまいます。私は3つの異なるイメージを持ち、それぞれに異なる引用符を付ける必要があります。

https://codepen.io/pawluczkowycz/pen/emymwa

``<div id="slideshow"> 
    <div id="frame"> 
    <img class="slide" src="http://placehold.it/350x150/ffffff/f0265b&text=1"> 
    <img class="slide" src="http://placehold.it/350x150/ffffff/47d1c0&text=2"> 
    <img class="slide" src="http://placehold.it/350x150/ffffff/006400&text=3"> 
    </div> 
</div> 

誰もが解決策を持っていますか？

Answer 1

イメージの周囲にコンテナを作成し、position: relativeで配置し、という要素をテキストの上に重ねて配置します。

var $frame = $('#frame'); 
 
\t  
 
\t setInterval(function() { 
 
\t \t var slides = $('.slide'); 
 
\t \t slides.first().appendTo($frame); 
 
}, 3000);

body { background-color: #ddd;} 
 
#slideshow { 
 
    position: relative; 
 
    background-color: #ccc; 
 
    border: 1px solid #555; 
 
    border-top: none; 
 
    box-shadow: 0 1px 9px #222; 
 
    width: 60%; 
 
    margin: 50px auto; 
 
} 
 
#frame { 
 
    position: relative; 
 
    background-color: transparent; 
 
    width: 100%; 
 
\t margin: 0 auto; 
 
} 
 
.slide:first-child { 
 
    display: block; 
 
    width: 100%; 
 
} 
 
.slide img { 
 
    width: 100%; 
 
    display: block; 
 
    max-width: 960px; 
 
    height: auto; 
 
    margin: 0 auto; 
 
} 
 
.slide:not(:first-child) { 
 
    display: none; 
 
} 
 
.text { 
 
    position: absolute; 
 
    top: 0; left: 0; right: 0; 
 
    background: rgba(0,0,0,0.5); 
 
    color: white; 
 
    margin: 0; 
 
    padding: 1em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="slideshow"> 
 
    <div id="frame"> 
 
    <div class="slide"><img src="http://placehold.it/350x150/ffffff/f0265b&text=1"> 
 
     <p class="text">foo</p> 
 
    </div> 
 
    <div class="slide"><img src="http://placehold.it/350x150/ffffff/f0265b&text=2"> 
 
     <p class="text">foo</p> 
 
    </div> 
 
    <div class="slide"><img src="http://placehold.it/350x150/ffffff/f0265b&text=3"> 
 
     <p class="text">foo</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

（多分背景など）の画像とキャプションが含まれているのdiv内の画像を包むようにしてください。 次に、画像の代わりにdivをスライドさせます。

Answer 3

チェックこの：

var $frame = $('#frame'); 
 
\t  
 
\t setInterval(function() { 
 
\t \t var slides = $('.slide'); 
 
\t \t slides.first().appendTo($frame); 
 
}, 3000);

body { background-color: #ddd;} 
 
#slideshow { 
 
    position: relative; 
 
    background-color: #ccc; 
 
    border: 1px solid #555; 
 
    border-top: none; 
 
    box-shadow: 0 1px 9px #222; 
 
    width: 60%; 
 
    margin: 50px auto; 
 
} 
 
#frame { 
 
    position: relative; 
 
    background-color: transparent; 
 
    width: 100%; 
 
\t margin: 0 auto; 
 
} 
 
.slide { 
 
    position:relative; 
 
} 
 
.slide:first-child ,.slide > img{ 
 
    display: block; 
 
    width: 100%; 
 
    max-width: 960px; 
 
    height: auto; 
 
    margin: 0 auto; 
 
} 
 
.slide:not(:first-child) { 
 
    display: none; 
 
} 
 

 
.slide > div { 
 
    position:absolute; 
 
    padding:10px; 
 
    background:rgba(0,0,0,.2); 
 
    font-family:helvetica,tahome,serif; 
 
    font-size:18px; 
 
    bottom:0; 
 
    left:0; 
 
    right:0 
 
    
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="slideshow"> 
 
    <div id="frame"> 
 
    <div class="slide" > 
 
     <div> 
 
     Eaxmple Text for Slide No.1 
 
     </div> 
 
    <img src="http://placehold.it/350x150/ffffff/f0265b&text=1"> 
 
    </div> 
 
    <div class="slide" > 
 
     <div> 
 
     Eaxmple Text for Slide No.2 
 
     </div> 
 
    <img src="http://placehold.it/350x150/ffffff/47d1c0&text=2"> 
 
    </div> 
 
    <div class="slide"> 
 
     <div> 
 
     Eaxmple Text for Slide No.3 
 
     </div> 
 
     <img src="http://placehold.it/350x150/ffffff/006400&text=3"> 
 
    </div> 
 
    </div> 
 
</div>