Question

我正在尝试使用overflow：hidden和floating div构建简单的水平图像滑块。 Hovewer，我无法将它们水平漂浮 - 它们总是以垂直顺序出现。我在网上尝试了很多例子，但我还是不知道自己哪里错了。

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/

Answer 1

那是因为你需要将另一个div中的单个滑块包裹在一个宽度=幻灯片数*宽度的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");

Answer 2

如果你的支持是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>

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

2 个答案: