İlk öğe göründüğünde Slick Vertical Carousel öğesinde, karusel düzeni

Question

değiştirir Slick ile bir dikey karusel oluşturdum. Tasarımda bazı değişiklikler yaptım ve her şey, ilk elemanın karuseli görünümü dışında istediğim gibi çalışıyor. Bir zamanlar atlıkarınca görülebilmem için 4 öğe vardır, ancak ilk öğe dört öğenin ilkindeyken, karuselin düzeninde yanlış bir şey olur.
Benim url'dir -
http://www.w3karigar.com/mobile/game2/
Sen benim web sitesinde kodunu görebilirsiniz. Ama aşağıda bir kaç dahil ettik -

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

My Çözüm Eğer sonsuz kaydırma olmalarına odaklanır. Bence Slide.js, LAST slaydının [ilkinden bir önceki] yüzdesini 100px olması gerektiğinde 70px olarak yanlış bir şekilde hesaplıyor ve FIRST slaydınızın 30px yukarı hareket etmesine neden oluyor.

aşağıdaki css ile önceki ve sonraki slaytlar yüksekliğini yeniden boyutlandırma Görünüşe

: emin olmak için .slick aktif .slick-akım vs ayarlamanız gerekir gibi de görünüyor

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

Seçilmiş olan doğru numaraya sahipsin.

Seçenekler: çevreleyen blokların ikisi de yükseklik artışı Çıkarma

1. Akış mükemmel çalışmamasına neden olur. Etkisi farklı, ama değil, ürkek değil. önceki bloklarda yükseklik artışı Çıkarma

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

2. akış mükemmel çalışmamasına neden olur. Etkisi farklı, ama değil, ürkek değil.

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