构建水平滑块 - 垂直浮动的 div

Posted 2023-03-04

【中文标题】构建水平滑块 - 垂直浮动的 div

【英文标题】：Building horizontal slider - divs floating vertically

【发布时间】：2015-01-06 02:48:49

【问题描述】：

我正在尝试使用溢出构建简单的水平图像滑块：隐藏和浮动 div。然而，我无法将它们水平浮动 - 它们总是以垂直顺序出现。我从网上尝试了很多例子，但是我仍然不知道我错在哪里。

HTML：

<div id="slidingWindow">
    <div class="slidingSection clearfix">Something something</div>
    <div class="slidingSection clearfix">Again something</div>
</div>

CSS：

#slidingWindow 
overflow:hidden;
width: 470px;
height: 500px;
background-color: red;


.slidingSection 
margin: 5px;
background-color: green;
width: 470px;
height: 400px;
float: left;


.clearfix:after  
content: "."; 
visibility: hidden; 
display: block; 
height: 0; 
clear: both;

这个 JSFiddle 包含我的问题的最简单示例： http://jsfiddle.net/v4udd47t/

【参考方案1】：

如果您支持 IE10+ 并且不关心 Opera Mini，那么您可以使用display: flex。这样您就不需要任何额外的标记，甚至不需要浮动和 clearfix。

除了使用flex，您还必须在幻灯片上设置一个min-width，它等于容器减去任何边距和填充。关于边距和填充，容器还必须容纳应用于幻灯片的任何内容（我注意到它们上有 5px 的边距）。

HTML：

<div id="slidingWindow">
    <div class="slidingSection clearfix">Something something</div>
    <div class="slidingSection clearfix">Again something</div>
</div>

CSS：

#slidingWindow 
    overflow:hidden;
    width: 480px; /* width of slide + left and right margins */
    height: 500px;
    background-color: red;
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;


.slidingSection 
    margin: 5px;
    background-color: green;
    width: 470px;
    min-width: 470px; /* required */
    height: 400px;

下面是你的小提琴的一个叉子，它的尺寸减小了，并且在悬停时有一个动画来表明它工作正常：

#slidingWindow 
	overflow:hidden;
    width: 260px;
    height: 300px;
    background-color: red;
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;


.slidingSection 
    margin: 5px;
    background-color: green;
	width: 250px;
    min-width: 250px;
	height: 200px;
    -webkit-transition: -webkit-transform 750ms;
	transition: transform 750ms;


#slidingWindow:hover > .slidingSection 
    -webkit-transform: -webkit-translate3d(-260px, 0, 0);
    transform: translate3d(-260px, 0, 0);
    -webkit-transition: -webkit-transform 750ms;
    transition: transform 750ms;

<div id="slidingWindow">
    <div class="slidingSection">Something something</div>
    <div class="slidingSection">Again something</div>
</div>

【参考方案2】：

那是因为您需要将各个滑块包装在另一个宽度 = 幻灯片数 * 宽度的 div 中。我在这里更新了您的示例，并进行了溢出：滚动，以便您可以看到差异http://jsfiddle.net/v4udd47t/1/

<div id="slidingWindow">
    <div class="slider-container">
        <div class="slidingSection clearfix">Something something</div>
        <div class="slidingSection clearfix">Again something</div>
    </div>
</div>


.slider-container 
    width: 1000px;    

要动态设置宽度，您可以这样做

var number_of_slides = $(".slidingSection").length;

$(".slider-container").css('width', number_of_slides * 470 + "px");

【讨论】：

是否可以在 css 中创建没有贴花宽度的包装 div？例如。当图像数量是动态的并且我只想依赖包装器 div 中的 div 数量时？

你可以像这样使用 Jquery var number_of_slides = $(".slidingSection").length + 1; $(".slider-container").css('width', number_of_slides * 470 + "px"); jsfiddle.net/v4udd47t/2我也通过调整更新了答案