图像滑块的响应包装div [英] Responsive wrapper div for image slider

问题描述

因此，我尝试使用HTML5，CSS3和jQuery构建一个响应式图像滑块。我创建了滑块，但它没有响应。可能是因为滑块的父包装没有响应。当我试图让父包装div作为响应时，滑块内的所有图像都会显示出来，或者图像变形（当高度被分配给父包装div时）。我们无法删除 overflow：hidden 表单父div，因为它是唯一一个可以阻止所有图像一次显示的属性。这里是我的小提琴：小提琴
这是我的HTML

 < div id =slider-wrapper> 
< div class =images> 
< img src =image1.jpg> 
< img src =image2.jpg> 
< img src =image3.jpg> 
< img src =image4.jpg> 
< / div> 
< / div> 
  

和CSS相同

 ＃slider-wrapper {
 width：80％; 
 height：auto; 
 overflow：hidden; 
 border：1px纯黑色; 
} 
 
＃slider-wrapper .images {
 width：100％; 
 height：auto; 
} 
 
＃slider-wrapper .images img {
 width：100％; 
 height：auto; 
 overflow：hidden; 
} 
  

我试着减少我的代码到基本级别，需要响应的父级div与其中的图像div一起提及。我想要实现的仅仅是将当前宽度和高度可见的第一个图像视为自动（以确保图像响应）并将所有图像隐藏起来。我做了jQuery来浏览图片。谢谢:) :)干杯!!

解决方案

我修改了你的代码，以便用 display：inline-block ，并在容器上显示 white-space：nowrap 。

请参阅此更新示例。

 ＃slider-wrapper {
 .... 
 white-space：nowrap; 
} 
 
＃slider-wrapper .images img {
 .... 
 display：inline-block; 
 
  

规则 display：inline-block 用于告诉浏览器：

这些项目将作为块元素处理（例如，它们可以具有高度和宽度）但在此期间也必须被视为内嵌的（因此它们不是堆叠在其他人之下，而是与其他人堆叠在一起，因为它们将是文字）。

为了与其他人放在一起，是必要的，因为容器足够宽以容纳这个长内容（否则元素会在下一行像长文本中的单词一样）。你有一个固定宽度的容器，所以你必须告诉浏览器：

不要在白色空格上换行，忽略它们并将所有元素放在同一行

So, I tried to a a responsive image slider using HTML5, CSS3 and jQuery. I have created the slider but it is not responsive. May be because the parent wrapper of the slider is not responsive. When I tried to make the parent wrapper div as responsive, either all the images inside the slider gets displayed or images are distorted(when height is assigned to parent wrapper div). We cannot remove overflow:hidden form parent div as it is the only property using which all images are prevented from displaying at once. Here is my fiddle: Fiddle Here is my HTML for it

<div id="slider-wrapper">
    <div class="images">
        <img src="image1.jpg">
        <img src="image2.jpg">
        <img src="image3.jpg">
        <img src="image4.jpg">
    </div>
</div>

and CSS for the same

#slider-wrapper {
  width: 80%;
  height: auto;
  overflow: hidden;
  border: 1px solid black;
}

#slider-wrapper .images {
  width: 100%;
  height: auto;
}

#slider-wrapper .images img {
  width: 100%;
  height: auto;
  overflow: hidden;
}

I've tried to cut down my code to basic level so that only the parent div that needs to be responsive is mentioned along with images div inside it. What I want to achieve is make only the first image visible to it's current width and height as auto(to make sure the image is responsive) and rest all images to be hidden. I did jQuery to slide through images. Thank you :) cheers!!

解决方案

I modified you code in order to display images one beside anothers using display:inline-block on them and white-space:nowrap on the container.

Please look at this updated example.

#slider-wrapper{
    ....
    white-space:nowrap;
}

#slider-wrapper .images img{
    ....
    display:inline-block;
}

The rule display:inline-block is used to tell browser:

"These items are to be treaten as block elements (so they can have height and width, for example) but in the meantime must be considered also as inline ones (so they are not stacked one below others but one beside others, as they would be "words")".

In order to be placed one beside others, is necessary that container would be enough wide to accomodate this long content (otherwise elements would go on next rows like words in a long text). You have a fixed width container, and so you must tell browser:

"don't wrap lines on white spaces, ignore them and place all elements on the same line"

这篇关于图像滑块的响应包装div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！