Slideshow 循环2&x27；s scrollHorz没有'；不能在全屏图像上顺利工作

我目前正在使用Cycle2和scrollHorz全屏（100%宽度和高度）的背景图像，它们的大小为“cover”，此外，页面上没有回调或很多其他内容，因此它是一个非常基本的滑块

我发现当浏览器太大时，幻灯片过渡会出现锯齿状，而不是平滑的。不过，屏幕越小越好。我也没有遇到任何“褪色”的问题，或者至少它根本不明显

我尝试过各种放松和速度的组合，但运气不太好

我不确定这是css还是cycle2，我无法通过谷歌找到类似的问题，有人能解释一下吗

HTML

<ul id="homepage-carousel" class="hero">
    <li class="homepage-carousel-item" style="background-image: url('hero1.jpg');">
        <div class="homepage-carousel-info">
            <h1 class="homepage-carousel-title">Title</h1>              
            <h2 class="homepage-carousel-subtitle">Subtitle</h2>                
            <div class="homepage-carousel-desc">
                <p>some info here</p>
            </div>                                  
            <div class="homepage-carousel-link"><a class="homepage-carousel-url" href="#" title=""><span>Read More</span></a></div> 
        </div>
    </li>
    <li class="homepage-carousel-item" style="background-image: url('hero2.jpg');">
        <div class="homepage-carousel-info">
            <h1 class="homepage-carousel-title">Title</h1>              
            <h2 class="homepage-carousel-subtitle">Subtitle</h2>                
            <div class="homepage-carousel-desc">
                <p>some info here</p>
            </div>                                  
            <div class="homepage-carousel-link"><a class="homepage-carousel-url" href="#" title=""><span>Read More</span></a></div> 
        </div>
    </li>
    <li class="homepage-carousel-item" style="background-image: url('hero3.jpg');">
        <div class="homepage-carousel-info">
            <h1 class="homepage-carousel-title">Title</h1>              
            <h2 class="homepage-carousel-subtitle">Subtitle</h2>                
            <div class="homepage-carousel-desc">
                <p>some info here</p>
            </div>                                  
            <div class="homepage-carousel-link"><a class="homepage-carousel-url" href="#" title=""><span>Read More</span></a></div> 
        </div>
    </li>
</ul>

---

这不是周期问题

背景尺寸：封面的性能非常糟糕

您也可以通过在幻灯片中添加
transform:translate3d（0,0,0）
来减轻一些痛苦，但仍然会有起伏

用实际图像替换背景通常会提高我的性能，比如。不过，图像越大，在任何浏览器中的性能就越慢；渲染大型运动图像对他们来说很困难

然后，只需调整图像的大小和位置，因为您可以使用以下内容：

.homepage-carousel-item > img, .homepage-carousel-info { position:absolute; }
.homepage-carousel-item > img {
    /*img size*/
    min-width:100%;
    min-height:100%;
    width:auto;
    height:auto;
    /*img pos*/
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);/*offset position based on img size*/
}

如果您需要支持传统浏览器，那么您可以运行一个例程来调整图像的大小和偏移量

还有一些解决方案仅在某些浏览器中可用（如
对象匹配：cover
），但这些选项应适用于所有浏览器

.homepage-carousel-item > img, .homepage-carousel-info { position:absolute; }
.homepage-carousel-item > img {
    /*img size*/
    min-width:100%;
    min-height:100%;
    width:auto;
    height:auto;
    /*img pos*/
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);/*offset position based on img size*/
}