Реализация twitter bootstrap carousel v2.3.2

Question

У меня возникли проблемы с реализацией карусели бутстрапа. Может ли кто-нибудь взглянуть на следующие html и js и дать мне инструкции о том, как реализовать слайд. .js не был отредактирован, и карусель установлен на корпусе героя. Я реализую карусель api? Как определить карусель, который я использую в файле .js? Благодарю.

<div class="carousel"> 

    <!-- Carousel items --> 
    <div class="carousel-inner"> 

     <!-- Main hero unit for a primary marketing message or call to action --> 
     <div class="hero-unit"> 
     <h1>Hello, world!</h1> 
     <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p> 
     <p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p> 
     </div> 

    </div>  

<!-- Carousel nav --> 

    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 

    </div> 

Answer 1

Документация Bootstrap Carousel доступна здесь: http://twitter.github.com/bootstrap/javascript.html#carousel

Я думаю, вам нужно будет добавить что-то вроде этого, чтобы получить это работает:

<script type="text/javascript"> 
$(function(){ 
    $('.carousel').carousel(); 
}); 
</script> 

Answer 2

Я понимаю, что

<div class="carousel"> 

Нужно быть

<div id="myCarousel" class="carousel"> 

где id - это что-то вроде стрелок «стрелки».

Answer 3

Примечание: этот ответ был первоначально для Bootstrap 2.3.2 (может не работать с 3-й версии)

Вы должны поставить класс «элемент» на всех ваших слайдов и класс «активный» на первый слайд. Это сработало для меня.

<div class="carousel"> 
    <div class="carousel-inner"> 


<!-- your slide --> 

    <div class="hero-unit item active"> 
       <h1>Hello, world!</h1> 
       <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p> 
       <p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p> 
    </div> 

    </div> 
</div> 

И как Кристофер сказал, что вам нужно использовать эту функцию, чтобы инициировать ее.

<script type="text/javascript"> 
$(function(){ 
    $('.carousel').carousel(); 
}); 
</script> 

Answer 4

У вас нет товаров в вашем примере кода. , чтобы заставить его работать, вам нужно иметь как минимум два предмета, в вашем карусели-внутреннем div.

1. создать второй элемент
2. убедитесь, что первый элемент имеет активный класс; это начинается с мёртвой
3. голый код должен выглядеть следующим образом

.

<div class="carousel-inner"> 
    <div class="active item">…</div> 
    <div class="item">…</div> 
    <div class="item">…</div> 
</div> 

Answer 5

Это в Joomla 3.1.1 с шаблоном Protostar, который основан на Bootstrap. Я не получал карусель для автоматического цикла. Это работает для меня:

Использование пользовательского HTML-модуля, добавьте этот код: (изменить imgscr, альт текст и текст заголовка, чтобы настроить)

<div id="myCarousel" class="carousel slide"> 
    <ol class="carousel-indicators" style="list-style: none;"> 
     <li class="active" data-target="#myCarousel" data-slide-to="0"></li> 
     <li data-target="#myCarousel" data-slide-to="1"></li> 
     <li data-target="#myCarousel" data-slide-to="2"></li> 
    </ol> 

    <!-- Carousel items --> 
    <div class="carousel-inner"> 
     <div class="active item"> 
      <img src="images/headers/maple.jpg" alt="imagetext 1" /> 
      <div class="carousel-caption"> 
       <h4>Exampletext 1</h4> 
      </div> 
     </div> 
     <div class="item"> 
      <img src="images/headers/raindrops.jpg" alt="imagetext 2" /> 
      <div class="carousel-caption"> 
       <h4>Exampletext</h4> 
      </div> 
     </div> 
     <div class="item"> 
      <img src="images/headers/windows.jpg" alt="imagetext 3" /> 
      <div class="carousel-caption"> 
       <h4>Exampletext</h4> 
      </div> 
     </div> 
    </div> 

    <!-- Carousel nav --> 
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a> 
</div> 

<!-- Call Carousel --> 
<script type="text/javascript"> 
(function($){$('.carousel').carousel({ interval: 5000, pause:'hover'}); 
})(jQuery); 
</script> 

This корректировки в index.php из ваших шаблон предназначен для предотвращения конфликтов между скриптами, он отключает mootools, который заставляет карусель открываться и закрываться перед слайдами:

// CSUTOM disable mootools-more.js 
unset (JFactory::getDocument()->_scripts['/jomaatcms/media/system/js/mootools-core.js']); 
unset (JFactory::getDocument()->_scripts['/jomaatcms/media/system/js/mootools-more.js']);