Question

我正在网站上工作，我需要将图片滑块作为标题。我希望幻灯片显示为页面的整个宽度，并使高度保持固定（可能使用视口单元）。理想情况下，当视口变窄时，它会裁剪图像宽度。我尝试使用几种不同的滑块插件（Owl Carousel，Slippry和Flexslider 2）多次实现，但没有任何效果。现在，通过创建3个不同的幻灯片（1个用于桌面，1个用于平板电脑，1个用于移动设备），然后使用媒体查询显示或隐藏每个幻灯片，我有一些工作，但这意味着浏览器必须加载幻灯片3不同的时间，导致我的页面加载时间非常长。

达到我想要的最佳方式是什么？

Answer 1

最简单的解决方案是使用background-size: cover的背景图片。这将使图像足够大，以便填充整个幻灯片，裁剪任何额外的宽度或高度。

如果你想使用img，另一个选择是绝对定位图像，然后用CSS居中。这有时会导致letterboxing，具体取决于图像的宽高比，但CSS看起来像这样：

.slide img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: 100%;
    transform: translate(-50%, -50%);
}

这将导致图像的高度填充幻灯片，并且在幻灯片中垂直和水平居中（您可能需要transform的供应商前缀，具体取决于您需要支持的浏览器）

这些解决方案中的任何一个都应该适应任何维度的响应幻灯片。

Answer 2

我认为你正在寻找这样的东西。这个也适用于小型设备和平板电脑。您也可以在同一页面上放置多个轮播。只需复制“DIV” - “SpecDataWrap”并更改ID。

<div class="ContainerWrap">
    <div class="Container">
        <div class="AllSpecsDataWrap">
            <div class="SpecDataWrap" id="SpecDataWrap1">
                <div class="SpecDataSlides activeNavSlide">
                    <img src="http://s19.postimg.org/lzem156s3/image1.jpg" />
                    <div class="SpecDesc SpecDescRight">
                        <h2>Choose to be unique.</h2>
                        <div class="SpecDescDetails">
                            Metal accents, colorful hues, real woods and leathers, and a customizable laser-etched signature offer thousands of ways to make your Moto X unique.
                        </div>
                    </div>
                </div>
                <div class="SpecDataSlides InActiveNavSlide">
                    <img src="http://s19.postimg.org/6cira13mb/image2.jpg" />
                    <div class="SpecDesc SpecDescLeft">
                        <h2>Choose to be unique.</h2>
                        <div class="SpecDescDetails">
                            Metal accents, colorful hues, real woods and leathers, and a customizable laser-etched signature offer thousands of ways to make your Moto X unique.
                        </div>
                    </div>
                </div>
                <div class="SpecDataSlides InActiveNavSlide">
                    <img src="http://s19.postimg.org/f4zpxpor7/image3.jpg" />
                    <div class="SpecDesc SpecDescRight">
                        <h2>Choose to be unique.</h2>
                        <div class="SpecDescDetails">
                            Metal accents, colorful hues, real woods and leathers, and a customizable laser-etched signature offer thousands of ways to make your Moto X unique.
                        </div>
                    </div>
                </div>
                <div class="SpecSlideNavigation">
                    <div class="leftNavSpec SpecSlideNav"></div>
                    <div class="bulletsNavSpec">
                        <ul>
                            <li class="activeImage"></li>
                            <li class="InActiveImage"></li>
                            <li class="InActiveImage"></li>
                        </ul>
                        <div class="clearFix"></div>
                    </div>
                    <div class="RightNavSpec SpecSlideNav"></div>
                </div>
                <div class="clearFix"></div>
            </div>
        </div>
    </div>
</div>

您可以在此处查看JS和CSS代码： https://jsfiddle.net/raju_sumit/Ld21vutz/

具有响应宽度和固定高度的滑块

2 个答案: