Bootstrap - установить разные интервалы для каждого элемента карусели [дубликата]

На этот вопрос уже есть ответ:

Различная длительность слайдов для каждого предмета на карусели начальной загрузки 3. 4 ответа

Hi У меня есть карусель на Bootstrap, и я хотел бы установить для каждого элемента свой интервал, поэтому в основном первый элемент может иметь продолжительность 10 секунд, вторые 5 секунд, третьи 3 секунды и т. Д. И т. Д. ..

Поэтому я решил использовать такой атрибут данных

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

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

            <!-- Wrapper for slides -->
            <div class="carousel-inner">
                <div class="item active" data-interval="8000">
                    <img src="carousel/icon_1.jpg" />
                    <div class="carousel-caption">
                         <h2 class="carousel-title">Welcome to My Site</h2>
                         <p class="carousel-text">Lorem ipsum dolor sit amet</p>
                        <p class="carousel-text">Lorem ipsum dolor sit amet</p>
                   </div>
            </div><!-- /.item -->


            <div class="item" data-interval="4000">
                <img src="carousel/icon_2.jpg" />
                <div class="carousel-caption">Lorem ipsum dolor sit amet</div>
            </div><!-- /.item -->


            <div class="item" data-interval="4000">
                <img src="carousel/icon_3.jpg" />
                <div class="carousel-caption">Lorem ipsum dolor sit amet</div>
            </div><!-- /.item -->


        </div><!-- /.carousel-inner -->

</div> <!-- Carousel -->

<script type="text/javascript">
$(document).ready(function () {
            // more scripts here ...

// the main part
            var t;
            var start = $('#myCarousel').find('.active').attr('data-interval');
            t = setTimeout("$('#myCarousel').carousel({interval: 1000});", start-1000);

            $('#myCarousel').on('slid.bs.carousel', function () {   
                 clearTimeout(t);  
                 var duration = $(this).find('.active').attr('data-interval');

                 $('#myCarousel').carousel('pause');
                 t = setTimeout("$('#myCarousel').carousel();", duration-1000);
            });
        });
</script>

В случае, если мне понадобится изменить временной интервал в будущем. Проблема в том, что все слайды применяют одинаковый интервал (около 2 или 1 сек). Как я могу это исправить

Ответы на вопрос(1)

Ваш ответ на вопрос