2

Есть слайдер на Bootstrap.
Как добавить ему автоматическое вращение желательно без jQuery?

<div class="carousel slide" id="myCarousel" data-ride="carousel">

  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li class="active" data-slide-to="0" data-target="#myCarousel"></li>
    <li data-slide-to="1" data-target="#myCarousel"></li>
    <li data-slide-to="2" data-target="#myCarousel"></li>
    <li data-slide-to="3" data-target="#myCarousel"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active" id="slide1">

    </div>
    <!-- end item -->

    <div class="item" id="slide2">

    </div>
    <!-- end item -->

    <div class="item" id="slide3">

    </div>
    <!-- end item -->

    <div class="item" id="slide4">

    </div>
    <!-- end item -->
  </div>
  <!-- carousel-inner -->

</div>
<!-- end myCarousel -->

2
  • Вообще у бутсртаповской карусели [пример есть][1], но без jQuery оно работать не будет. VМожет вам подумать о другой реализации? [1]: getbootstrap.com/javascript/#carousel 4 июн 2015 в 11:49
  • да нет, все очень просто) достаточно добавить атрибут data-ride="carousel"
    – Вася
    4 июн 2015 в 11:51

1 ответ 1

2

Простой скрипт Вам в помощь:

<script type="text/javascript">
  $(document).ready(function() {
    $('#myCarousel').carousel({
      interval: 1200
    })
  });
</script>

Либо в Вашем HTML немного подправьте первую строку, добавив атрибут 'data-interval', получим нижеследующее:

<div class="carousel slide" id="myCarousel" data-ride="carousel" data-interval="1200">
2
  • спасибо за ответ, но я уже давно ответил на свой вопрос строчкой выше)
    – Вася
    22 июн 2015 в 19:20
  • Не заметил комментария, возможно кто-то воспользуется и этим...
    – k1r8r0wn
    24 июн 2015 в 4:33

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.