Responsive Carousel Issue - prependTo Jumps

278
November 22, 2016, at 10:49 AM

I am trying to do the responsive carousel which should proportionally hide last item on screen re-size. In the code below everything works fine and does what I want, except one thing. When slide is moving item disappears and quickly appears back the next one in the row. I need to put one item on background and make it invisible somehow, but I could not find the way to do it not loosing centered position of all items.

HTML

<div id="slider-wrapper">
    <div class="slider">
        <div class="slide">
            <div class="item">
                slide1
            </div>
        </div>
        <div class="slide">
            <div class="item alt">
                slide2
            </div>
        </div>
        <div class="slide">
            <div class="item">
                slide3
            </div>
        </div>
        <div class="slide">
            <div class="item alt">
                slide 4
            </div>
        </div>
    </div>  
</div>
<div id="controls">
  <div id="prev">PREV</div>  
  <div id="next">NEXT</div>  
</div>    

CSS

#slider-wrapper {
    position: relative;
    margin: 50px auto;
    overflow: hidden;
    text-align: center;
    width: 100%;
    height:200px;
}
#slider-wrapper .slider {
    position: relative;
    width: 100%;
}
#slider-wrapper .slide {
    position: relative;
    display: inline-block;
    width: 250px;
    height:200px;
}
.item{
    line-height: 200px;
    background: pink;
}
.item.alt{
    line-height: 200px;
    background: red;
}
#controls{
    position: relative;
    height: 50px;
    width: 220px;
    margin: 0 auto;
}
#controls div{
    position: absolute;
    height: 50px;
    width: 100px;
    background: grey;
    color: white;
    text-align: center;
    line-height: 50px;
}
#next{
    margin-left: 120px;
}

JQuery

var slider = function(){
    var slideWidth = $('.slide').width();
    $('.slide:last-child').prependTo('.slider');
        function moveLeft() {
        $('.slider').animate({
            left: + slideWidth
        }, 200, function () {
            $('.slide:last-child').prependTo('.slider');
            $('.slider').css('left', '');
        });
    };
    function moveRight() {
        $('.slider').animate({
            left: - slideWidth
        }, 200, function () {
            $('.slide:first-child').appendTo('.slider');
            $('.slider').css('left', '');
        });
    };
        $('#prev').on("click",function(){
        moveRight();
    });
    $('#next').on("click",function(){
        moveLeft();
    });
}
$(document).ready(function(){
    slider();
});

Here also a JSFiddle example https://jsfiddle.net/Lv64275r/2/

Rent Charter Buses Company
READ ALSO
Animate div height to fit new content

Animate div height to fit new content

I want to animate div height to fit new content with slide down animation. .

391
How to create slide in/out panels using Bootstrap 3 collapse?

How to create slide in/out panels using Bootstrap 3 collapse?

I'm trying to create an effect with Bootstrap 3 and the collapse plugin where the content panels always slide up when hidden, and slide down when revealed. .

426
What is the difference between hiding elements with jQuery and CSS?

What is the difference between hiding elements with jQuery and CSS?

I created something similar to slider, which has three blocks with two pictures and description in each. At the top it shows one of these blocks with its two pictures and description.

307