В Slick Вертикальная карусель, когда первый элемент в поле зрения, расположение карусельных изменений

Я создал вертикальную карусель с Slick. Я сделал некоторые изменения в дизайне, и все работает так, как я хотел, кроме случаев, когда первый элемент находится в представлении карусели. В то время в моей карусели есть 4 элемента, но когда первый элемент находится в первом из четырех предметов, то что-то не так происходит в макете карусели.
Мой URL является -
http://www.w3karigar.com/mobile/game2/
Вы можете увидеть код на моем сайте. Но я включил несколько ниже -
В Slick Вертикальная карусель, когда первый элемент в поле зрения, расположение карусельных изменений

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

источник

2017-01-27 Rohit Kumar

Мое решение акцентирует внимание на том, что вы бесконечно скроллинг. Я думаю, что Slide.js неправильно вычисляет высоту LAST slide [тот, что был до первого], как 70px, когда он должен быть 100px, заставляя ваш FIRST слайд перемещаться на 30 пикселей вверх.

Похоже, вы изменение размера высоты предыдущих и последующих слайдах со следующими CSS:

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

Это также выглядит, как вам нужно настроить .slick-активное вещество против .slick тока, чтобы убедиться, у вас есть правильный выбор.

Варианты:

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; 
}

источник

2017-01-31 01:25:32

Спасибо, удаляя высоту изменения фиксирует проблему, но я не могу добиться того же эффекта другого метода. Скажите, пожалуйста, как я могу это сделать. –

В Slick Вертикальная карусель, когда первый элемент в поле зрения, расположение карусельных изменений

ответ

Смежные вопросы