logo标签列表

在Slick垂直走廊中，当第一个元素处于视图中时，走廊的布局会发生变化。

carouselslick.js
11

我使用Slick创建了一个竖向轮播图。我在设计方面进行了一些更改，一切都按照我的预期工作，除了当轮播图的第一个元素在视图中时。每次轮播4个项目，但当第一个元素在这四个项目中的第一个位置时，轮播图的布局会出现问题。
我的网址是 -
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>

1个回答
3

我的解决方案关注的是您正在进行无限滚动。我认为Slide.js计算最后一张幻灯片[第一张之前的那张]的高度时错误地将其计算为70像素，而实际应该是100像素，导致您的第一张幻灯片向上移动30像素。

看起来您正在使用以下CSS调整先前和下一张幻灯片的高度：

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

似乎您需要调整 .slick-active 和 .slick-current 以确保选择正确的一个。
选项：
1. 在两个周围块中删除高度增加可以使流程完美工作。效果不同，但不会跳动。
#games-carousel .item.slick-active.slick-current, 
#games-carousel .item.slick-current + .slick-active + .slick-active {
    opacity: 0.4;
}

已去除高度的slide.js

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

slide.js with next

谢谢，删除高度更改可以解决问题，但我无法通过其他方法实现相同的效果。请告诉我如何做到这一点。 - Rohit Kumar
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接