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

Question

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

实现我想要的最好方法是什么？

Answer 1

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

如果您想使用 img，另一种选择是绝对定位图像，然后用 CSS 将其居中。这有时会导致信箱，具体取决于图像的宽高比，但 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/

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

Slider with responsive width and fixed height

html

css

jquery

slider

responsive-design