Обновлено: 27 марта 2017, 15:28
 Marabar

Индикаторы по количеству баннеров в карусели

При динамической загрузки в карусель баннеров, как правило, индикаторы отображения текущего баннера остаются не у дел. Небольшой скрипт jQuery поможет решить эту проблему. Скрипт писался для Bootstrap3.

HTML-код карусели

Примерно стандартный код карусели Bootstrap3:

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

    	<ol class="carousel-indicators" style="display:none;"></ol>

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

        	<div class="item">
    
       			<a href="#">
        			<img src="" alt="" />
        			<div class="carousel-caption">
            				<h3>Заголовок</h3>
					<p>Текст баннера</p>
        			</div>
    			</a>
    
		</div>

    	</div>

    	<a class="left carousel-control" href="#my-carousel" role="button" data-slide="prev" style="display:none;">
        	<span class="fa fa-chevron-left fa-2x" aria-hidden="true"></span>
        	<span class="sr-only">Previous</span>
    	</a>

    	<a class="right carousel-control" href="#my-carousel" role="button" data-slide="next" style="display:none;">
        	<span class="fa fa-chevron-right fa-2x" aria-hidden="true"></span>
        	<span class="sr-only">Next</span>
    	</a>
</div>


Скрипт jQuery


function addIndicator( container_carousel ) {
    
        var divs = $( container_carousel ).find( '.carousel-inner .item' );
        var visibleLength = $( divs ).length;
        
        if( visibleLength > 1 ) {
            
                for( i = 1; i <= visibleLength; i++ ) {

                        $( '.carousel-indicators' ).append( '<li data-target="#' + $( container_carousel ).attr( 'id' ) + '"' + ' data-slide-to="' + ( i-1 ) + '"></li> ' );
                        $( '.carousel-indicators, .carousel-control' ).css( 'display', 'block' );
                }

                $( '.carousel-indicators' ).find( 'li' ).first().addClass( 'active' );
        }
        
        $( container_carousel ).find( '.item' ).first().addClass( 'active' );
}

$( document ).ready( function(){
	addIndicator( $( '#my-carousel' ) );
});
   Marabar Шпаргалка 0    1 0

Комментарии ()




    Вы должны авторизоваться , чтобы оставлять комментарии.

    Marabar 21 сентября 2018, 00:32
    Login в MODX revolution 25
    Marabar 17 мая 2018, 12:22
    Выводим облако тегов в MODX revo 17
    medortex 14 июля 2017, 16:26
    Меню Аккордеон в MODX revo 54
    Madao 16 мая 2017, 18:28
    msMiniCartDynamic 3
    Семён 05 мая 2017, 23:30
    Создание ресурсов из фронтенда 41
    Филитович Владимир 26 февраля 2017, 22:25
    Apache 2.2.22, установка и настройка 41
    valery 30 ноября 2016, 15:51
    phpMyAdmin 3.5.1, установка и настройка 3