Question

我在this page上有一个jQuery Cycle滑块，当滑块完美无效时，寻呼机不会显示为should

以下是滑块的代码：

<div id="slider" class="cycle-slideshow 
data-cycle-fx="fade" 
data-cycle-timeout="4000"
data-cycle-slides="> div">

<div class="slide">
<img src="http://192.254.149.221/~mmceda/images/plane_slider.jpg" alt="map" width="926" height="219" >
<div class="slide-info">
<h5>Our Assets...</h5>
<div class="short-black-line"></div>
<h6>Your Industries</h6>
<p>Monroeville’s pro-business environment continues to attract industry sectors for which it has special assets.</p>
<p><a class="read-more" href="./finance-incentives/">Read More &raquo;</a></p>
</div><!-- end .slide-info -->
</div><!-- end .slide -->


<div class="slide">
<img src="http://192.254.149.221/~mmceda/images/train_tracks.jpg" alt="map" width="926" height="219" >
<div class="slide-info">
<h5>Our Assets...</h5>
<div class="short-black-line"></div>
<h6>Your Industries</h6>
<p>Monroeville’s pro-business environment continues to attract industry sectors for which it has special assets.</p>
<p><a class="read-more" href="./finance-incentives/">Read More &raquo;</a></p>
</div><!-- end .slide-info -->
</div><!-- end .slide -->


<div class="slide">
<img src="http://192.254.149.221/~mmceda/images/welding.jpg" alt="map" width="926" height="219" >
<div class="slide-info">
<h5>Discover</h5>
<div class="short-black-line"></div>
<h6>Our Targets</h6>
<p>Monroeville’s pro-business environment continues to attract industry sectors for which it has special assets.</p>
<p><a class="read-more" href="./discover-monroeville/discover-our-industry-targets-working-title/">Read More &raquo;</a></p>
</div><!-- end .slide-info -->
</div><!-- end .slide --> 
</div>

以下是寻呼机生成的代码：

<div style="position: absolute; top: 0px; left: 0px; z-index: 92; visibility: hidden;" class="cycle-pager cycle-slide"><span class="cycle-pager-active">•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span></div>

我还为css中的元素设置了样式，但它们似乎并不坚持。

/* pager */
.cycle-pager { 
    text-align: center; 
    width: 100%; 
    z-index: 10000; 
    position: absolute; 
    bottom: 10px; 
    overflow: hidden;
}
.cycle-pager span { 
    font-family: arial; 
    font-size: 50px; 
    width: 20px; 
    height: 20px; 
    display: inline-block; 
    color: #797979; 
    cursor: pointer; 
}
.cycle-pager span.cycle-pager-active { color: #82151a;}
.cycle-pager > * { cursor: pointer;}

我很感激一些指导知道如何让寻呼机出现。

Answer 1

是的伙计，事情看起来只是格式错误的HTML。

您的开场标记：

<div id="slider" class="cycle-slideshow 
data-cycle-fx="fade" 
data-cycle-timeout="4000"
data-cycle-slides="> div">

应该是：

<div id="slider" class="cycle-slideshow 
data-cycle-fx="fade" 
data-cycle-timeout="4000"
data-cycle-slides=".slide">

演示：http://jsfiddle.net/robschmuecker/9nY3L/

jQuery Cycle 2寻呼机没有显示

1 个答案: