Слайдер Javascript пропускает первый кадр - Прототип - PullRequest
Новая
       21

Слайдер Javascript пропускает первый кадр - Прототип

0 голосов
/ 10 октября 2011

Я использую 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.

URL-адрес: wwwdotlylifdotcom / home

1 Ответ

1 голос
/ 11 октября 2011

Из виджета Карусель , который вы добавили, есть эта инструкция:

По умолчанию, когда достигается первый / последний слайд, вызов prev / next ничего не делает. Если вы хотите, чтобы эффект продолжался, вы должны сделать две вещи: установить круговой параметр true и продублировать первый слайд в HTML. Это единственный способ создать впечатление непрерывного движения.

Так что вам нужно добавить дополнительную копию «Слайд 1» после «Слайд 4».

...