Question

我正在开发Rails 3.2中的应用程序并尝试在首页添加Nivo Slider。加载后，转换看起来像this。其他过渡也有类似的扭曲。

当第一次转换发生时，页面的长度增加了几千个像素。我已经确定#slider div的大小正在增加。这偶尔会重置，但后来我又看到它再次重绘了数千个像素。

包含Nivo滑块的div：

<div id="content">
<link href="/assets/nivo-slider-themes/default/default.css?body=1" media="screen" rel="stylesheet" type="text/css" />
  <div class="slider-wrapper theme-default">
  <div class="ribbon"></div>
  <div id="slider" class="nivoSlider">
    <img src="assets/index_slider_1.jpg">
    <img src="assets/index_slider_2.jpg">
    <img src="assets/index_slider_3.jpg">
  </div>
  <div id="htmlcaption" class="nivo-html-caption">
  </div>
</div>

我正在使用Nivo Slider 3.1附带的默认打包CSS文件。

JSFiddle containing the problem

由于滑块div的长度增加导致转换损坏的原因和页面长度的增加是什么？

Answer 1

您在Nivo中使用的CSS文件导致了该错误。我从一个Nivo示例中抓取了一个样式表，并将jsfiddle更新为：http://jsfiddle.net/ppDhT/

<link rel='stylesheet' id='nivoslider-css'  href='http://nivo.dev7studios.com/wp-content/plugins/nivo-slider/scripts/nivo-slider/nivo-slider.css?ver=3.4.2' type='text/css' media='all' />

Nivo Slider转换无法正确呈现并增加网页长度

1 个答案: