2

早上好！

我正在开发一个原型，我想知道改变 Foundation 轨道滑块宽度但仍保持其响应能力的“正确”方法。

目前 - 我已将滑块容器的宽度更改为较小的百分比 (73%) - 但是当以移动设备大小查看时，它似乎不太正确。更不用说箭头已经向上浮动了，我宁愿不破解一些 css 来让它们正确定位。

Orbit CSS： http: //naivestudio.net/win-prototype/prototype/orbit.php（仅针对这个问题放在单独的页面上 - 将在 app.css 文件中进行更改）

索引页面中的 HTML - 请注意视频位于滑块之外，但我会将其浮动在标题容器中的旁边。

<div id="headcontain" class="row">
    <div id="featured">
    <img src="http://placehold.it/700x300&text=Slide1">
    <img src="http://placehold.it/700x300&text=Slide2">
    <img src="http://placehold.it/700x300&text=Slide3">
    <img src="http://placehold.it/700x300&text=Slide4">
    <img src="http://placehold.it/700x300&text=Slide5">
    </div>
<img src="http://placehold.it/235x300&text=Video">
</div>

Javascript

<!-- Include Orbit -->
<script src="foundation/javascripts/jquery.foundation.orbit.js"></script>
<script type="text/javascript">
   window).load(function() {
   $("#featured").orbit( { 
   timer: false
   });
});
</script>
4

2 回答 2

2

调整轨道滑块大小的正确方法是将其包装在一个带有类的 div 中，该类指定您希望它跨越多少列。通过更改容器延伸的列数，框架将自动调整滑块的大小。如果您使用foundation 4 或更高版本，则在指定列数时需要使用它们的新语法“large-(#)”或“small-(#)”。

你说过在小分辨率下它看起来不正确，如果你使用的是 Foundation 4+，你可以使用大尺寸和小尺寸调用的组合来影响它在大分辨率和小分辨率上的显示方式；以下示例将在较大分辨率下跨越 12 列，而在达到较小分辨率时仅跨越 3 列。

Foundation 4+ 的情境分辨率大小示例：

<div class="large-12 small-3 columns">


Foundation 4+ 的完整示例：

<div id="headcontain" class="row">
    <div class="large-12 small-3 columns">
        <div id="featured">
          <img src="http://placehold.it/700x300&text=Slide1">
          <img src="http://placehold.it/700x300&text=Slide2">
          <img src="http://placehold.it/700x300&text=Slide3">
          <img src="http://placehold.it/700x300&text=Slide4">
          <img src="http://placehold.it/700x300&text=Slide5">
        </div><!--/featured-->
        <img src="http://placehold.it/235x300&text=Video">
    </div><!--/large12-->
</div><!--/headcontain-->


基础 3- 的完整示例：

<div id="headcontain" class="row">
    <div class="twelve columns">
        <div id="featured">
          <img src="http://placehold.it/700x300&text=Slide1">
          <img src="http://placehold.it/700x300&text=Slide2">
          <img src="http://placehold.it/700x300&text=Slide3">
          <img src="http://placehold.it/700x300&text=Slide4">
          <img src="http://placehold.it/700x300&text=Slide5">
        </div><!--/featured-->
        <img src="http://placehold.it/235x300&text=Video">
    </div><!--/twelveColumns-->
</div><!--/headcontain-->


希望这可以帮助！

于 2013-04-10T13:44:52.393 回答
0

从 v6.5.3 开始，这似乎还没有解决，但看起来在 v7 中会有修复。Github上的更多信息英雄。

于 2019-03-05T16:44:20.047 回答