2014-02-19 4 views
0

Ищете помощь здесь. Я получаю действительно странное поведение с моей карусели Bootstrap 3 и wordpress (на моем местном). У меня есть четыре слайда изображений, и все четыре отображаются правильно и правильно отображаются. Однако, когда я добираюсь до последнего слайда и заранее, вместо того, чтобы вернуться на первый слайд, карусель добавляет еще один слайд, у которого нет контента, только стрелки «Пред» и «Следующий». Если я продвигаюсь вперед в этот момент, следующий слайд представляет собой единый тонкий блок цвета. На этом этапе я не могу вернуться к фактическим слайдам, независимо от перемещения вперед или назад. Я в растерянности, и я готов расколоть свой компьютер. Вот мой код:Bootstrap carousel не едет на велосипеде назад к первому слайду

<div class="col-md-8"> 
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
<!-- Indicators --> 
<ol class="carousel-indicators"> 
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
<li data-target="#carousel-example-generic" data-slide-to="1"></li> 
<li data-target="#carousel-example-generic" data-slide-to="2"></li> 
<li data-target="#carousel-example-generic" data-slide-to="3"></li> 
</ol> 

<!-- Wrapper for slides --> 
<div class="carousel-inner"> 
<div class="item active"> 
<img src="http://localhost:8888/wordpress/wp-content/themes/RMTide/images/image1.jpg" alt=""> 
<div class="carousel-caption"> 
<h2>Boys swimming win division championship</h2> 
<p>By the time the Division I championships started on the morning of February 1, the RM boys swim team...<a href="#">Read More...</a></p> 
</div> 
</div> 
<div class="item"> 
<img src="http://localhost:8888/wordpress/wp-content/themes/RMTide/images/image2.jpg" alt=""> 
<div class="carousel-caption"> 
<h2>RM poms places on top</h2> 
<p>One hour later in Rockville, the Rockets' poms team sat hand in hand and took a deep breath...<a href="#">Read More...</a></p> 
</div> 
</div> 
<div class="item"> 
<img src="http://localhost:8888/wordpress/wp-content/themes/RMTide/images/image3.jpg" alt=""> 
<div class="carousel-caption"> 
<h2>O'Malley voices opposition to weed legalization</h2> 
<p>The legalization of marijuana has become a point of interest...<a href="#">Read More...  </a></p> 
</div> 
</div> 
<div class="item"> 
<img src="http://localhost:8888/wordpress/wp-content/themes/RMTide/images/image4.jpg" alt=""> 
<div class="carousel-caption"> 
<h2>Down to the Wire:</h2> 
<p>Seven days until the state championship...<a href="#">Read More...</a></p> 
</div> 
</div> 
</div> 

<!-- Controls --> 
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> 
<span class="glyphicon glyphicon-chevron-left"></span> 
</a> 
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> 
<span class="glyphicon glyphicon-chevron-right"></span> 
</a> 
</div> 
</div> 

И это мой сценарий $ ('карусель.) Карусельного ({ интервал: ложные });. Любая помощь очень много ценится.

ответ

1

У меня была такая же проблема (локально и удаленно). Я использую Roots Theme и в основном скопировал код Carousel источник от Загрузочный пример. Я обнаружил, что WordPress вставлял с открытым концом P теги в источнике, так что я побежал Carousel HTML код через веб-основе HTML компрессора (Minifier). Снова вставлен в WP, и он был исправлен.

Смежные вопросы