Чтобы автоматизировать выбор панели, например, автоматического слайдера / галереи изображений, вам нужно будет подделать щелчок по каждой вкладке (таблетке).
Основы:
- Добавьте в разметку что-либо, означающее, что это "бегунок вкладки". В этом случае атрибут
data-. - Зацикливание коллекции и создание каждого слайдера вкладок. Для каждого ползунка вкладок:
- Получение ссылки на каждую вкладку.
- Подсчет вкладок - для использования с оператором по модулю (
%1) и переменной инкремента для определения, какую панель отображать. - Создайте функцию, которую можно вызывать повторно,
setTimeout, которая будет переходить на следующую панель, вызывая событие щелчка на вкладке.
$( '[data-widget="tab-slider"]' ).each( function ( i, el ) {
const $container = $( this );
const $sliderLinks = $container.find( '.nav-link' );
const panelCount = $sliderLinks.length;
const delay = 3000; // milleseconds
let index = 0;
function nextTabSliderPanel() {
$sliderLinks.eq( index++ % panelCount ).trigger( 'click' );
setTimeout( nextTabSliderPanel, delay );
}
nextTabSliderPanel(); // Start the slider.
} );
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="row" data-widget="tab-slider">
<div class="col-3">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
<a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
</div>
</div>
<div class="col-9">
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">Home Panel</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">Profile Panel</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">Messages Panel</div>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">Settings Panel</div>
</div>
</div>
</div>