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

Question

早上好！

我正在研究一个原型，我想知道改变Foundation的Orbit Slider宽度的“正确”方法，但仍保持它的响应能力。

目前 - 我已经将滑块容器的宽度更改为较小的百分比（73％） - 但是当以移动尺寸查看时，它似乎不太正确。更不用说箭头已向上浮动，我宁愿不破解某些CSS以使它们正确定位。

轨道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的信息英雄。