Горизонтальный скроллинг для табов Bootstrap 4 / Информация / Сниппеты Bootstrap

Версия: v1.0.0

Каталог: Сниппеты Bootstrap

Категория: Информация

Для Bootstrap: 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Английский

Вес файла: 1.7 Kb

Уникальный ID: 3140

Количество символов:

Посмотрели: 3667 раз

Помощь: установка & настройка

Прикреплён файл №2: /stuff/0-0-0-3140-20

Скачали бесплатно: 68 раз

Прокомментировали: 0 раз

Рейтинг: 5.0 / 5 - 3 голосов

Тип лицензии: CC BY 4.0

Авторство: //goo.gl/PVzFbR

Информация: Пользователям

Информация: Правообладателям

Теги: таб, скроллинг таба, scroll tabs, bootstrap 4, Tab, скроллинг для табов, tab scroll

Поделился: BootstrapТема

Добавлено: 2018-11-28 в 15:42

Метка: 1543408920

⇄ ⇅

<h1 class="text-center mt-3">Bootstrap 4 Scrolling Tabs</h1><hr />

<div role="tabpanel" class="tab-pane fade active show mt-2" id="tab1" aria-labelledby="public-tab" aria-expanded="true">
 <p class="h1 text-center">Tab 1</p>
 </div>
 <div class="tab-pane fade mt-2" id="tab2" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
 <p class="h1 text-center">Tab 2</p>
 </div>
 <div class="tab-pane fade mt-2" id="tab3" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
 <p class="h1 text-center">Tab 3</p>
 </div>
 <div class="tab-pane fade mt-2" id="tab4" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
 <p class="h1 text-center">Tab 4</p>
 </div>
 <div class="tab-pane fade mt-2" id="tab5" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
 <p class="h1 text-center">Tab 5</p>
 </div>
 <div class="tab-pane fade mt-2" id="tab6" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
 <p class="h1 text-center">Tab 6</p>
 </div>
 <div class="tab-pane fade mt-2" id="tab7" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
 <p class="h1 text-center">Tab 7</p>
 </div>
 <div class="tab-pane fade mt-2" id="tab8" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
 <p class="h1 text-center">Tab 8</p>
 </div>
 <div class="tab-pane fade mt-2" id="tab9" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
 <p class="h1 text-center">Tab 9</p>
 </div>
 <div class="tab-pane fade mt-2" id="tab10" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
 <p class="h1 text-center">Tab 10</p>
<p class="h2 text-center">Горизонтальный скроллинг для TAB Bootstrap 4</p>
 </div>
 <div class="tab-pane fade mt-2" id="tab11" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
 <p class="h1 text-center">Tab 11</p>
 </div>
 <div class="tab-pane fade mt-2" id="tab12" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
 <p class="h1 text-center">Tab 12</p>
 </div>
 <div class="tab-pane fade mt-2" id="tab13" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
 <p class="h1 text-center">Tab 13</p>
 </div>
 <div class="tab-pane fade mt-2" id="tab14" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
 <p class="h1 text-center">Tab 14</p>
 </div>
 <div class="tab-pane fade mt-2" id="tab15" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
 <p class="h1 text-center">Tab 15</p>
 </div>
 <div class="tab-pane fade mt-2" id="tab16" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
 <p class="h1 text-center">Tab 16</p>
 </div>

</div>
</div>

</div>

var widthOfList = function(){
 var itemsWidth = 0;
 $('.list a').each(function(){
 var itemWidth = $(this).outerWidth();
 itemsWidth+=itemWidth;
 });
 return itemsWidth;
};

var getLeftPosi = function(){
 
 var ww = 0 - $('.wrapper').outerWidth();
 var lp = $('.list').position().left;
 
 if (ww>lp) {
 return ww;
 }
 else {
 return lp;
 }
};

reAdjust();

$(window).on('resize',function(e){ 
 reAdjust();
});

$('.scroller-right').click(function() {
 
 $('.scroller-left').fadeIn('slow');
 $('.scroller-right').fadeOut('slow');
 
 $('.list').animate({left:"+="+widthOfHidden()+"px"},'slow',function(){
 reAdjust();
 });
});

$('.scroller-left').click(function() {
 
 $('.scroller-right').fadeIn('slow');
 $('.scroller-left').fadeOut('slow');
 
 $('.list').animate({left:"-="+getLeftPosi()+"px"},'slow',function(){
 reAdjust();
 });
});
</script>

BootstrapTema

Горизонтальный скроллинг для табов Bootstrap 4

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0