イメージとテキストを同時にスライドさせる方法

サムネイルイメージとテキストを同時にコントロールしたいと思っています。誰でも私にこれを行う方法を教えてもらえますか？私はすでにそのページに2つのスライダがあるので、私はブートストラップスライダを望んでいません。イメージとテキストを同時にスライドさせる方法

私のHTMLコード

<div class="events"> 
<img src="slide-1.jpg" /> 
<h5>Date</h5> 
<h2>Event name</h2> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse cursus pellentesque nunc, in eros liaculis id cursus consectetur.</p> 
<a class="readmore" href="#">Read more</a> 
</div>

CSSコード

.events {width:400px;} 
.readmore {padding:8px 15px; background:#ff6000; color:#FFFFFF; text-decoration:none;}

出典

2016-07-21 Jeseem Shajahan

、あなたはここにある答え：http://stackoverflow.com/questions/29218554/how-to-slide-images-text-at-the-same-time-をusing-jquery – ihemant360

私は今まであなたがスライドするスライドいることを確認すると、スライドコンテナ内の最初の要素である、1枚のスライドして例を働きました。お役に立てれば。

テキストは画像の中央に配置されています。画像は一種のログなので、実際に見るには少し下にスクロールする必要があります。私が思う

$(".slide-out").click(function(){ 
 
    $(".slides .slide:first").toggleClass("slide-left"); 
 
});

.slide { 
 
    position: relative; 
 
    transition: all 1s; 
 
    left: 0; 
 
} 
 

 
.slide-left { 
 
    transition: all 1s; 
 
    left: -100%; 
 
} 
 

 
.slides { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.slide img { 
 
    max-width: 400px; 
 
} 
 

 
.slide .caption { 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    left: 20px; 
 
} 
 

 
h4, p { 
 
    color: #fff !important; 
 
} 
 

 
button { 
 
    position: fixed; 
 
}

<html> 
 
    <head> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    </head> 
 
    <body> 
 
    <div class="controls"> 
 
     <button class="slide-out">Toggle Slide</button> 
 
    </div> 
 
    <div class="slides"> 
 
     <div class="slide"> 
 
     <img src="http://previews.123rf.com/images/dvu/dvu0905/dvu090500006/4894562-compressed-orange-isolated-on-a-black-background-Stock-Photo.jpg" class="img-responsive"/> 
 
     <div class="caption"> 
 
      <h4>Slide header</h4> 
 
      <p>Whatever caption you want</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

出典

2016-07-21 14:16:33 zsawaf

イメージとテキストを同時にスライドさせる方法

答えて

関連する問題