调整基金会的轨道滑块大小

Question

早上好！

我正在制作一个原型，我想知道改变Foundation的Orbit Slider宽度的“正确”方法，但仍保持其响应性。

目前 - 我已经将滑块容器的宽度更改为较小的百分比（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> 

Answer 1

调整轨道滑块大小的正确方法是将其包装在div中，并使用一个类来指定您希望它伸展的列数。通过更改容器伸展的列数，框架将自动调整滑块的大小。如果您使用的是4或更高版本，则在指定列数时，您需要使用“large - （＃）”或“small - （＃）”的新语法。

你曾经说过，在小分辨率上它看起来不正确，如果你使用的是Foundation 4+，你可以使用大小调用的组合来影响它在大小分辨率上的显示方式;以下示例将跨越大分辨率的十二列，当您达到较小的分辨率时，仅跨越3列。

基础4 +的情境分辨率大小调整示例：

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

基础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-->

希望这有帮助！

Answer 2

从v6.5.3开始，似乎仍未解决，但似乎v7中已修复。 Github上的更多信息英雄。