Trong phần Băng chuyền dọc Slick khi phần tử đầu tiên ở chế độ xem, bố cục của các thay đổi băng chuyền

Question

Tôi đã tạo băng chuyền dọc với Slick. Tôi đã thực hiện một số thay đổi trong thiết kế và mọi thứ đang hoạt động như tôi muốn trừ khi yếu tố đầu tiên nằm trong chế độ xem băng chuyền. Tại một thời điểm có 4 mục được hiển thị trong băng chuyền của tôi nhưng khi phần tử đầu tiên nằm ở vị trí đầu tiên trong bốn mục thì có điều gì đó sai xảy ra trong bố cục của băng chuyền.
Url của tôi là -
http://www.w3karigar.com/mobile/game2/
Bạn có thể xem mã trên trang web của mình. Nhưng tôi đã bao gồm một vài dưới đây -

$('#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>

Answer 1

Giải pháp của tôi tập trung vào thực tế là bạn đang vô cùng cuộn. Tôi nghĩ rằng Slide.js đang tính toán không chính xác phần lớn của trang trình chiếu LAST [cái trước trước] đầu tiên là 70px khi nó phải là 100px, khiến trang trình bày ĐẦU TIÊN của bạn di chuyển lên 30px.

Có vẻ như bạn đang thay đổi kích thước chiều cao của slide trước đó và tiếp theo với css sau:

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

Nó cũng có vẻ như bạn cần phải điều chỉnh .slick chủ động vs .slick-hiện tại để đảm bảo bạn đã chọn đúng.

Options:

1. Loại bỏ sự gia tăng chiều cao ở cả hai khối xung quanh gây ra dòng chảy để làm việc một cách hoàn hảo. Hiệu ứng là khác nhau, nhưng nó không phải là nhảy.

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

2. Loại bỏ sự gia tăng chiều cao trong khối trước đó gây ra các dòng chảy để làm việc một cách hoàn hảo. Hiệu ứng là khác nhau, nhưng nó không phải là nhảy.

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