첫 번째 요소가 보일 때 슬릭 수직 회전 장치에서 회전 장치 레이아웃이 변경됨

Question

Slick으로 수직 회전 장치를 만들었습니다. 나는 디자인에 약간의 변화를 주었고 첫 번째 요소가 회전 목마의 관점에있을 때를 제외하고는 모든 것이 내가 원하는대로 작동했다. 한 번에 내 컨베이어에서 볼 수있는 4 가지 항목이 있지만 첫 번째 요소가 네 가지 항목 중 첫 번째 항목에있을 때 컨베이어의 레이아웃에 문제가 발생합니다.
내 URL은 -
http://www.w3karigar.com/mobile/game2/
당신은 내 웹 사이트에 코드를 볼 수 있습니다. 하지만 아래의 몇 가지를 포함했다 -

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

내 솔루션은 무한 스크롤 있다는 사실에 초점을 맞추고 있습니다. 나는 Slide.js가 마지막 슬라이드의 높이를 정확히 계산하지 못한다고 생각합니다. 첫 슬라이드가 70px 일 때 첫 번째 슬라이드가 30px 위로 이동하게합니다.

다음과 같은 CSS로 이전 및 다음 슬라이드의 높이의 크기를 조정하는 것 같습니다

: 당신은 확인하기 위해 .slick 활성 .slick 전류 대를 조정해야 할 것 또한 보이는

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

당신은 올바른 것을 선택했습니다.

옵션 : 주변 블록의 양쪽에 높이 증가를 제거

1. 흐름이 ​​완벽하게 작동됩니다. 효과는 다르지만 뛰어나지 않습니다. 이전 블록의 높이 증가를 제거

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

2는 흐름이 완벽하게 작동됩니다. 효과는 다르지만 뛰어나지 않습니다.

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