0

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

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

任何帮助将不胜感激。

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

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

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

4

2 回答 2

1

浏览一下 Flexslider中的代码后，我找不到任何特别排除在垂直窗口更改时调整图像大小的可能性的东西。图像调整大小似乎完全基于 CSS，然后将宽度/高度信息输入 javascript。看来您遇到了浏览器的 DOM/CSS 问题，没有在垂直窗口更改时调整图像大小，然后有点这不是经过测试的 FlexSlider 设置。

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

我拿了滑块演示并借用了大部分堆栈答案来管理 100% 垂直布局，并最终得到了下面的详细信息。

首先，更改您的图像 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。你最终得到了页面。

该解决方案的一个缺点是您现在拥有的图像将调整大小超过屏幕的水平尺寸。您可能需要构建一些东西来满足这一点，因为如果您使用依赖于工作宽度的基本轮播，您会遇到问题。当您将鼠标移出屏幕添加水平滚动条时，也会发生一些有趣的事情，但我会为您留下那个。也请自担风险尝试 IE。

...这就是我回避前端开发的原因 =)

很抱歉，那篇文章最终成为了我在谈论的一个运行评论。

于 2012-10-07T14:50:16.467 回答
0

我还想要一个垂直响应（和水平）的图像滑块。在没有找到任何可以按照我想要的方式工作的开箱即用的东西之后，我开始摆弄。

这是结果。

这是关键元素（请访问 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 旋转器。

于 2013-08-09T21:19:08.610 回答