jqueryを使用してイメージを次々と移動するにはどうすればいいですか？

Question

私は3つのブロックを保持したい。中央のブロックの画像は、右から左へ順に移動する必要があります。それを達成する方法。

<div class="logo-div"> 
    <div class="logo-top"> 
     <img src="{{media url="wysiwyg/logo_garage.png"}}" alt=""> 
    </div> 
    <div class="logo-middle"> 
     <ul> 
      <li><img src="{{media url="wysiwyg/logo1.png"}}" alt=""> </li> 
      <li><img src="{{media url="wysiwyg/logo2.png"}}" alt=""> </li> 
      <li><img src="{{media url="wysiwyg/logo3.png"}}" alt=""> </li> 
      <li><img src="{{media url="wysiwyg/logo4.png"}}" alt=""> </li> 
     </ul> 
    </div> 
    <div class="logo-bottom"> 
     <img src="{{media url="wysiwyg/logo_vehicle.png"}}" alt=""> 
    </div> 
</div> 

.logo-div{ 
    max-width:300px; 
    margin:0 auto; 
    & ul li{ 
    float:left;} 
} 

$(document).ready(function() { 
    $(".logo-middle li").show("slide", {direction: "right" }, 2000);    
}); 

しかし、上記のコードのinspite他の下記のいずれかで中央ブロックの画像には、リストに与えられ、何の動きはそれに存在しないようになります。私は間違ってどこに行ったのですか？私を助けてください。

Answer 1

Cycle2プラグイン（cycle2）を使用してスライドショーを追加できます。コードが不要なContinuousオプションがあります。周囲の要素にdataタグを追加するだけです。デモページのContinuousを参照してください。

私はちょうど彼らが言うようにスニペットを含んでいました。私のスタイリングは彼らのものほど素晴らしいものではありませんが、ねえ。あなたは:)

を求めていない何もこのfiddleのブランチは、ライブラリを試してみることができます。 CYCLE2についての詳細なドキュメントについては

、もしかしたらこれが助けることができる？自分demos

#gallery { 
 
    width: 100%; 
 
    border: 3px solid gray; 
 
    white-space: nowrap; 
 
    overflow-y: hidden; 
 
} 
 

 
#gallery img { 
 
    height: 200px; 
 
    margin-right: 15px; 
 
    display: inline-block; 
 
    position: relative; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://malsup.github.io/min/jquery.cycle2.min.js"></script> 
 
<div id="gallery" class="cycle-slideshow cycle-autoinit" 
 
data-cycle-fx="scrollHorz" 
 
data-cycle-speed="3000" 
 
data-cycle-timeout="1" 
 
data-cycle-easing="linear" 
 
> 
 
    <img src="http://cdn.sci-news.com/images/enlarge2/image_3725_2e-Jupiters-X-Ray-Aurora.jpg"/> 
 
    <img src="http://cdn.sci-news.com/images/enlarge2/image_3725_2e-Jupiters-X-Ray-Aurora.jpg"/> 
 
    <img src="http://cdn.sci-news.com/images/enlarge2/image_3725_2e-Jupiters-X-Ray-Aurora.jpg"/> 
 
    <img src="http://cdn.sci-news.com/images/enlarge2/image_3725_2e-Jupiters-X-Ray-Aurora.jpg"/> 
 
    <img src="http://cdn.sci-news.com/images/enlarge2/image_3725_2e-Jupiters-X-Ray-Aurora.jpg"/> 
 
    <img src="http://cdn.sci-news.com/images/enlarge2/image_3725_2e-Jupiters-X-Ray-Aurora.jpg"/> 
 
</div>