In Slick Vertical Carousel when first element is in view, layout of the carousel changes

Question

I created a vertical carousel with Slick. I made some changes in design and everything is working as I wanted except when the first element is in the view of the carousel. At a time there are 4 items to be visible in my carousel but when the first element is at the first of the four items then something wrong happens in the layout of the carousel.
My url is -
http://www.w3karigar.com/mobile/game2/
You can see the code on my website. But I have included a few below -

    $('#games-carousel').slick({
        dots: false,
        arrows: false,
        infinite: true,
        speed: 200,
        slidesToShow: 4,
        vertical: true,
        verticalSwiping: true,
        swipeToSlide: true
    });
    $('#games-carousel').slick('setPosition');

#games-carousel .item {
    display: block;
    width: 100%;
    height: 70px;
    opacity: 0.2;
    padding: 1px 0;
    transition: all 0.2s ease-in;
    transform: translate3d(0,0,0);
}
#games-carousel .item .cover, #games-carousel .item .info {
    width: 50%;
    float: left;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}
#games-carousel .item .cover {
    padding: 0 7px 0px 5px;
    overflow: visible;
}
#games-carousel .item .cover img {
    max-height: 100%;
    width: auto;
    float: right;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.1);
}
#games-carousel .item .info {
    padding-left: 7px;
    font-size: 11px;
    color: #C5ED34;
    text-transform: uppercase;
}
#games-carousel .item .info span {
    font-size: 14px;
    display: block;
    line-height: 16px;
    color: #ffffff;
}

#games-carousel .item.slick-current + .slick-active {
    height: 150px;
    opacity: 1;
    padding: 5px 0;
}
#games-carousel .item.slick-current + .slick-active .info {
    font-size: 17px;
}
#games-carousel .item.slick-current + .slick-active .info span {
    font-size: 25px;
    line-height: 30px;
}
#games-carousel .item.slick-current + .slick-active .cover img {
    box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.2);
}

#games-carousel .item.slick-active.slick-current, #games-carousel .item.slick-current + .slick-active + .slick-active {
    height: 100px;
    opacity: 0.4;
}
#games-carousel .item.slick-current + .slick-active + .slick-active .info, #games-carousel .item.slick-current .info {
    font-size: 14px;
}
#games-carousel .item.slick-current + .slick-active + .slick-active .info span, #games-carousel .item.slick-current .info span {
    font-size: 18px;
    line-height: 22px;
}
#games-carousel .item.slick-current + .slick-active + .slick-active .cover img, #games-carousel .item.slick-current .cover img {
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}
#games-carousel .item {
    display: block;
    width: 100%;
    height: 70px;
    opacity: 0.2;
    padding: 1px 0;
    transition: all 0.2s ease-in;
    transform: translate3d(0,0,0);
}
#games-carousel .item .cover, #games-carousel .item .info {
    width: 50%;
    float: left;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}
#games-carousel .item .cover {
    padding: 0 7px 0px 5px;
    overflow: visible;
}
#games-carousel .item .cover img {
    max-height: 100%;
    width: auto;
    float: right;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.1);
}
#games-carousel .item .info {
    padding-left: 7px;
    font-size: 11px;
    color: #C5ED34;
    text-transform: uppercase;
}
#games-carousel .item .info span {
    font-size: 14px;
    display: block;
    line-height: 16px;
    color: #ffffff;
}

#games-carousel .item.slick-current + .slick-active {
    height: 150px;
    opacity: 1;
    padding: 5px 0;
}
#games-carousel .item.slick-current + .slick-active .info {
    font-size: 17px;
}
#games-carousel .item.slick-current + .slick-active .info span {
    font-size: 25px;
    line-height: 30px;
}
#games-carousel .item.slick-current + .slick-active .cover img {
    box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.2);
}

#games-carousel .item.slick-active.slick-current, #games-carousel .item.slick-current + .slick-active + .slick-active {
    height: 100px;
    opacity: 0.4;
}
#games-carousel .item.slick-current + .slick-active + .slick-active .info, #games-carousel .item.slick-current .info {
    font-size: 14px;
}
#games-carousel .item.slick-current + .slick-active + .slick-active .info span, #games-carousel .item.slick-current .info span {
    font-size: 18px;
    line-height: 22px;
}
#games-carousel .item.slick-current + .slick-active + .slick-active .cover img, #games-carousel .item.slick-current .cover img {
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}

<div id="games-carousel">
    <div class="item adventure">
        <div class="cover">
            <img class="cover-img" src="images/ac3.jpg" alt="" />
        </div>
        <div class="info">
            <span>Assassin's Creed 3</span>Adventure
        </div>
    </div>
    <div class="item adventure">
        <div class="cover">
            <img class="cover-img" src="images/ac3.jpg" alt="" />
        </div>
        <div class="info">
            <span>Assassin's Creed 3</span>Adventure
        </div>
    </div>
    <div class="item adventure">
        <div class="cover">
            <img class="cover-img" src="images/ac3.jpg" alt="" />
        </div>
        <div class="info">
            <span>Assassin's Creed 3</span>Adventure
        </div>
    </div>
    <div class="item adventure">
        <div class="cover">
            <img class="cover-img" src="images/ac3.jpg" alt="" />
        </div>
        <div class="info">
            <span>Assassin's Creed 3</span>Adventure
        </div>
    </div>
    <div class="item lorem">
        <div class="cover">
            <img class="cover-img" src="images/ac3.jpg" alt="" />
        </div>
        <div class="info">
            <span>Assassin's Creed 3</span>Adventure
        </div>
    </div>
    <div class="item lorem">
        <div class="cover">
            <img class="cover-img" src="images/ac3.jpg" alt="" />
        </div>
        <div class="info">
            <span>Assassin's Creed 3</span>Adventure
        </div>
    </div>
    <div class="item lorem">
        <div class="cover">
            <img class="cover-img" src="images/ac3.jpg" alt="" />
        </div>
        <div class="info">
            <span>Assassin's Creed 3</span>Adventure
        </div>
    </div>
    <div class="item lorem">
        <div class="cover">
            <img class="cover-img" src="images/ac3.jpg" alt="" />
        </div>
        <div class="info">
            <span>Assassin's Creed 3</span>Adventure
        </div>
    </div>
  </div>

Vitalize

Answer 1

My Solution focuses on the fact that you are infinitely scrolling. I think that Slide.js is incorrectly computing the hight of the LAST slide [the one before the first] as 70px when it should be 100px, causing your FIRST slide to move 30px up.

It looks like you are resizing the height of previous and next slides with the following css:

#games-carousel .item.slick-active.slick-current, 
#games-carousel .item.slick-current + .slick-active + .slick-active {
    height: 100px;
    opacity: 0.4;
}

It also looks like you need to adjust the .slick-active vs .slick-current to make sure you have the right one selected.

Options:

1. Removing the height increase in both of the surrounding blocks causes the flow to work perfectly. The effect is different, but its not jumpy.

#games-carousel .item.slick-active.slick-current, 
#games-carousel .item.slick-current + .slick-active + .slick-active {
    opacity: 0.4;
}

2. Removing the height increase in the previous blocks causes the flow to work perfectly. The effect is different, but its not jumpy.

#games-carousel .item.slick-active.slick-current{
    opacity: 0.4;
}
#games-carousel .item.slick-current + .slick-active + .slick-active {
    height: 100px;
    opacity: 0.4;
}

Woodard

Thanks, removing the height changes fixes the issue but I cannot achieve the same effect by another method. Please tell me how can I do this. – Vitalize