How to move the images one after the other using jquery?

Question

I want to keep three blocks. the images in the middle blocks should be moving one after the other from right to left. How to achieve that.

<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 );             
});

But inspite of above code the images in middle block in listed one below the other as it is given in list and there is no movement in it. Where have I went wrong. Please help me.

Answer 1

You can use the Cycle2-plugin (cycle2) to add a slideshow. There's a Continuous option which doesn't require any code, just add some data tags to your surrounding element. See Continuous on their Demo page.

I included a snippet which does exactly as they say. My styling isn't as fabulous as theirs, but hey. Not what you asked for :)

You could also branch of this fiddle to experiment with the library.

For further documentation about Cycle2, just see their 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>