How to get minimal jQuery slideshow to slide properly?


Tags: javascript,jquery,css

Problem :

Trying to make this minimal jQuery slideshow (Simple jQuery slideshow using animate()), but how do I make the 3rd and 4th image slide "together" like in the 1st and 2nd image?

http://jsfiddle.net/frank_o/eku4Lwt1/44/

JS:

changeSlide(1, $(".slideshow img"));

function changeSlide(i, items) {
    setTimeout(
      function() 
      {
          var currentItem = items.eq(i),
            prevItem = items.eq(i-1);

          prevItem.css("left", -prevItem.width());
          currentItem.css("right", 0);

          changeSlide(i+1, items);
      }, 2000);    
}

HTML:

<div class="slideshow" style="height: 100px; width: 200px; overflow: hidden;">
    <img src="http://lorempixel.com/200/100" />
    <img src="http://lorempixel.com/200/101" />
    <img src="http://lorempixel.com/200/102" />
</div>

CSS:

.slideshow {
    background: white;
    position: relative;
}
.slideshow img {
    position: absolute;
    top: 0;
    right: -200px;
    width: 200px;
    height: 100px;
    -webkit-transition: all 2s ease;                  
}
.slideshow img:first-child {
    left: 0;
}

Ideally they should slide like in this Slick.js example (although I feel Slick is overkill for this job):

http://jsfiddle.net/frank_o/eku4Lwt1/2/



Solution :

I have changed your code quite a bit: JSFidle

First of all, you should do prevItem.css("right", prevItem.width()); instead of prevItem.css("left", -prevItem.width());. And CSS should be changed like this: .slideshow img:first-child { right: 0px; }

I have also changed the animation to circularly repeat. Dunno if you can use it, otherwise here is what you asked for http://jsfiddle.net/eku4Lwt1/56/


    CSS Howto..

    Can't figure out how to set color for specific div's in the loop

    How do I reduce the space between my menu titles and items?

    How to implement fluid font size using pure CSS

    How to Change XYChart's color in JavaFx?

    How to fix a element (have example) on the screen using jquery /css?

    css/html how to make logo appear after heading

    How to create javascript or css fadeInDown on mouseover?

    How to create marquee infinite loop of logos slider with css only

    How to property adjust table?

    How to hover span content from li

    how to make css submenu stay put when subpage has been selected

    How to make parent fullscreen div to grow with absolutely positioned child using CSS and jeet?

    How to build a mobile responsive menu that will always have a 100% height and show all its list items

    How to specifiy the order of CSS classes?

    Jquery - How to set mouseleave event to an after() generating div?

    How to label ABC in a HTML button and Click events

    Border display issue, not sure how to resolve

    How to increase the font size of one word only in the line?

    How to get cards with his content perfectly alligned

    How do I change the alignment of my search box?

    How to create a responsive popup using fancybox 2?

    How to set p margin for a section

    How to add a CSS style to a specific node using Greasemonkey? [closed]

    Facebook Like Button - how to disable Comment pop up box?

    Tab menu in CSS - how to set an active tab

    How to override a CSS class within a content div

    How do I make two arrows in css

    How to make a dropdown float with CSS

    how to remove css from the text box?

    How do I simplify this header with lines on the side, so that it doesn't need css3 background properties?