Question

我正在尝试创建一个类似于http://designmodo.com/startup/

的滑块

我们的网站目前使用bootstrap 2，所以我使用默认轮播作为模板。我希望图像滑块自动调整大小以适应屏幕高度，因此滑块始终是显示屏高度的100％。

我希望有人可以帮我解决这个问题，当前的滑块可以在http://temp.tefl.org.uk/找到，目前的代码可以在下面看到：

    <div id="myCarousel" class="carousel slide">
 <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
 </ol>

<!-- Carousel items -->
<div class="carousel-inner">
  <div class="active item"><img src="/media/377330/c79211ae4c84c8a692f278f1d2aeeda0.png" style="width:100%"/></div>
  <div class="item"><img src="/media/377337/b91313eb7c28be9bfea650edef5ac425.png" style="width:100%"/></div>
  <div class="item"><img src="/media/377344/34aa259a765d17cc20af80a7a14038ba.png" style="width:100%"/></div>
</div>

<!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

Answer 1

在window.load函数中使用以下代码并将其用作全局变量。您可以通过在全局变量中存储图像的初始尺寸来比较窗口尺寸和图像。

var imgH = $('#top-slider .carousel-inner').height();
var imgW = $('#top-slider .carousel-inner').width();

自动调整图像滑块

1 个答案: