Question

我正在使用Prototype Slider，当它到达最终幻灯片时，滑块再次启动但跳过开始图像。

有人可以查看我的代码吗？

我的HTML：

<div id="carousel-wrapper">
<div id="carousel-content">
<div id="slide1" class="slide" > 
<div >Slide 1</span></div>
<div id="slide2" class="slide" > 
<div >slide 2</span></div>
<div id="slide3" class="slide" > 
<div >Slide 3</span></div>
<div id="slide4" class="slide" > 
<div >Slide 4</span></div>
</div>
</div>
</div>
<script type="text/javascript">// <![CDATA[
            Slider = new Carousel($('carousel-wrapper'), $$('#carousel-wrapper .slide'), $$(' a.carousel-jumper', 'a.carousel-control'), { duration: 0.5, auto: true, frequency: 5, circular: 'false', effect: 'slide', wheel: 'false',   selectedClassName: 'selected'});
// ]]></script>

我的CSS：

#carousel-wrapper {
width: 785px;
height: 540px;
overflow: hidden;
}
#carousel-content {
width: 3640px;
}
.cms-page-view .breadcrumbs {display:none;}
#carousel-content .slide {
float: left;
width: 785px;
height: 540px;
}
div#slide1{background-image:url("slide-1.jpg");}
div#slide2{background-image:url("slide-2.jpg");}
div#slide3{background-image:url("slide-3.jpg");}
div#slide4{background-image:url("slide-4.jpg");}

同样，这是在基于Magento的网站中使用原型库。

网址为wwwdotlylifdotcom / home

Answer 1

从您添加的Carousel widget开始，有以下指示：

默认情况下，当达到第一张/最后一张幻灯片时，调用prev / next不会执行任何操作。如果希望效果继续，则必须执行以下两项操作：将循环参数设置为true并复制HTML中的第一张幻灯片。这是给人一种持续运动印象的唯一方式。

因此，您需要在“幻灯片4”之后添加额外的“幻灯片1”副本。

Javascript滑块跳过第一帧 - 原型

1 个答案: