Реализация твиттер загрузочной карусели v2.3.2 - PullRequest
Новая
       27

Реализация твиттер загрузочной карусели v2.3.2

6 голосов
/ 09 февраля 2012

У меня проблемы с реализацией загрузочной карусели. Может кто-нибудь взглянуть на следующие HTML и JS и дать мне инструкции о том, как реализовать слайд. .Js не был отредактирован и карусель установлена ​​на блоке body hero. Я реализую 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>

Ответы [ 5 ]

8 голосов
/ 24 февраля 2012

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

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

<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>
6 голосов
/ 14 февраля 2012

Насколько я понимаю, 

<div class="carousel">

должно быть 

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

где id - это то, что есть в «Стрелках».

3 голосов
/ 09 февраля 2012

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

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

<script type="text/javascript">
$(function(){
   $('.carousel').carousel();
});
</script>
1 голос
/ 20 июня 2012

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

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

. 

<div class="carousel-inner">
   <div class="active item">…</div>
   <div class="item">…</div>
   <div class="item">…</div>
</div>
0 голосов
/ 10 июля 2013

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

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

<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>

Эта настройка в 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']);
...