具有响应式设计的Foundation Orbit滑块

我已经开始使用zurb的Foundation 3，但是我的滑块在左侧具有文本并且在右侧具有幻灯片（而不仅仅是图像和顶部的标签）。具有响应式设计的Foundation Orbit滑块

当我减小浏览器窗口的大小时，除了滑块的高度之外，它都适合。

我们需要的是在小浏览器上使滑块更高（它需要是相同的滑块 - 而不是替代品）。

我知道有流体滑块中的流体选项，我怀疑如果我改变它，它将足以解决这个问题。

我该如何做到这一点？

下面是我的滑块的HTML代码：

<div class="row"> 
    <div class="twelve columns"> 
    <div id="slider"> 
     <!-- *** This is the slider that needs to fit smaller browsers ***--> 
     <div class="row" style="background-color:White;"> 
      <div class="six columns"> 
       <h2>Title</h2> 
       <div class="summary"> 
        This is the summary is the summary is the summary is the summary is the summary is the summary is the summary. 
        <a href="javascript:void(0);">Learn more</a> 
       </div> 
       <div class="some-thumbnails"> 
        <img src="http://placehold.it/100x100&text=[thumbnail]" /> 
        <img src="http://placehold.it/100x100&text=[thumbnail]" /> 
        <img src="http://placehold.it/100x100&text=[thumbnail]" /> 
       </div> 
      </div> 
      <div class="six columns"> 
       <img src="http://placehold.it/550x250&text=[img 1]" /> 
      </div> 
     </div> 
     <img src="http://placehold.it/1000x400&text=[img 1]" /> 
    </div> 
</div> 

<hr />

来源

2012-09-23 Fabio Milheiro

你能设置一个jsfiddle或codepen来展示这个例子吗？ – justinavery

我有一个截止日期，对不起贾斯汀，但我找到了一个解决方案。轨道由轨道插件使用的某个插件生成的图像控制。我所做的是更改插件以获取最高幻灯片左侧和右侧部分的高度（当更改为手机视图时），然后将data-src设置为“holder.js/[width] x [height]”并调用Holder.run（）方法。感谢回复。 –

你说你找到了解决方案，所以请把它作为答案。 –

轨道是通过由轨道插件中使用的一些插件生成的图像进行控制。我所做的是更改插件以获取最高幻灯片左侧和右侧部分的高度（当更改为手机视图时），然后将data-src设置为“holder.js/[width] x [height]”并调用Holder.run（）方法。

来源

2012-10-04 08:52:03

具有响应式设计的Foundation Orbit滑块

回答

相关问题