Question

有人能指出水平和垂直响应画廊滑块插件或Jscript的方向吗？

我已经尝试过Flexslider1 / 2，Galleria，各种其他插件，但它们都是设定的宽度，似乎没有响应垂直调整浏览器的大小？我试过改变所有CSS但没有运气。

非常感谢任何帮助。

示例（使用Flexslider）：如果您水平调整浏览器的大小，图像将自动调整大小以适应浏览器窗口。如果垂直调整大小，则会垂直切割图像。

目标：当您垂直调整浏览器窗口大小时，图像将更改宽度和高度，以保持定量并适合浏览器窗口。与水平相同。

希望我已经清楚地解释了这一点。如果您需要澄清，请询问而不是投票。

Answer 1

围绕Flexslider中的代码，我找不到任何具体排除在垂直窗口更改时图像大小调整的可能性。图像大小调整似乎纯粹基于CSS，然后将宽度/高度信息输入到javascript中。您似乎陷入了浏览器的DOM / CSS问题，没有在垂直窗口更改时调整图像大小，然后一点点不是经过测试的FlexSlider设置。

让所有浏览器理解100％垂直布局而没有垂直滚动总是有点挑剔，因为它不是正常的布局范例。后续的CSS版本有所帮助，但浏览器的反应和解释你的意思仍然存在很大差异。

我使用slider demo并借用大部分stack answer来管理100％垂直布局和ended up with this以及下面的详细信息。

首先，更改图像CSS属性以缩放布局的高度，并将宽度设置为自动以保持正确的方面：

 width: auto;
 height: 90%;

这适用于图像本身，但FlexSlider javascript在页面中添加了一些额外的元素，并在演示中默认了一些CSS宽度值，用于水平布局。

.flexslider .slides img {width: 100%; display: block;}

成为

.flexslider .slides { width: 100%; display: block;}
.img {display: block; }

现在，您可以在Chrome中使用幻灯片。

Firefox不会将图像100％高度应用于包含类似Chrome的元素，因此我必须退回所有元素并在CSS中应用100％高度规则

.flexslider .slides {height: 100%; width: 100%; display: block;}
.img {display: block; }

.flex-viewport img{ height: 100%;}
.flex-viewport li { height: 100%;}
.flex-viewport ul { height: 100%;}
.flex-viewport { height: 100%;}

你会看到我也在那里做了img。你最终得到了the page。

回到此解决方案的一个方法是，您现在有一个图像将调整大小超过屏幕的水平尺寸。您可能需要构建一些内容以满足此需求，因为如果您使用宽度依赖的基本轮播工作，您将遇到问题。当你在屏幕上添加一个水平滚动条的鼠标时，也会发生一些时髦的事情，但我会留给你一个。另外尝试IE需要您自担风险。

......这就是我回避前端发展的原因=）

很抱歉，这篇文章结束了对我的一些评论。

Answer 2

我还想要一个垂直响应（和水平）的图像滑块。在没有找到任何开箱即用的方式之后，我想要开始fiddlin'。

这是the result。

这是关键元素（转到完整演示的jsFiddle）。它不是很完美，但应该足以让你开始。

<强> HTML

<div id="fader">
    <a href="http://url1.com"><img src="http://placehold.it/600x600&text=Slide1" ></a>
    <a href="http://url2.com"><img src="http://placehold.it/600x600&text=Slide2" ></a>
    <a href="http://url3.com"><img src="http://placehold.it/600x600&text=Slide3" ></a>
    <a href="http://url4.com"><img src="http://placehold.it/600x600&text=Slide4" ></a>
</div>

<强> CSS

#fader {
    position: relative; 
    width: auto;
    height: 100%;
}

#fader a {
    display:block;
    width:auto;
    height:100%;    
}

@media screen and (orientation: portrait) {
  img { 
      width: 100%; 
      height:auto !important;
  }
}
@media screen and (orientation: landscape) {
  img { 
      height: 100%;
      min-width:10%;
      max-width:100%;
  }
}

特别感谢这个jsFiddle用于轻量级jQuery旋转器。

有垂直响应的图库插件吗？ Jquery还是Javascript？

2 个答案: