Карусель сов не работает на вкладках начальной загрузки - PullRequest
Новая
       11

Карусель сов не работает на вкладках начальной загрузки

0 голосов
/ 24 мая 2018

Я новичок в jquery.Я хотел сдвинуть мой элемент навигации, используя owl carousel.Но это не работает.

Вот мой код:

HTML 

<div class="container">
  <div class="nav nav nav-pills bottom owl-carousel"  id="owler"  role="tablist">
    <div role="tab" class="tab-red   active  item expert-item">
       <a href="#red-tab" aria-controls="home" role="tab" data-toggle="tab">
    red
       </a>
    </div>
    <div role="tab" class="tab-orange   item expert-item">
       <a href="#orange-tab" aria-controls="home" role="tab" data-toggle="tab">
          orange
       </a>
    </div>
  </div>
</div>

JS 

 $("#owler").owlCarousel({
   responsiveClass:true,
   center: true,
   loop:true,
   autoplay:false,
   nav: false,
   navText: [
    '<i class="fa fa-chevron-circle-left" aria-hidden="true"></i>',
    '<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>'
   ]
});

Прямые ссылки

Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 24 мая 2018

Добавьте еще элемент навигации, он будет работать.

0 голосов
/ 24 мая 2018

На самом деле это работает, но вам просто нужно добавить еще несколько вкладок к ссылкам навигации.Взгляните на этот пример для справки.

HTML: 

<div class="nav nav-tabs user-tabs bottom owl-carousel"  id="owler"  role="tablist">
    <div role="presentation" class="tab-red   active  item expert-item">
        <a href="#red-tab" aria-controls="home" role="tab" data-toggle="tab">
        name
    </a>
    </div>
  <div role="presentation" class="tab-red   active  item expert-item">
        <a href="#red-tab" aria-controls="home" role="tab" data-toggle="tab">
        name
    </a>
    </div>
  <div role="presentation" class="tab-red   active  item expert-item">
        <a href="#red-tab" aria-controls="home" role="tab" data-toggle="tab">
        name
    </a>
    </div>
  <div role="presentation" class="tab-red   active  item expert-item">
        <a href="#red-tab" aria-controls="home" role="tab" data-toggle="tab">
        name
    </a>
    </div>
  <div role="presentation" class="tab-red   active  item expert-item">
        <a href="#red-tab" aria-controls="home" role="tab" data-toggle="tab">
        name
    </a>
    </div>
  <div role="presentation" class="tab-orange   item expert-item">
        <a href="#orange-tab" aria-controls="home" role="tab" data-toggle="tab">
              roll
        </a>
    </div>
   <div role="presentation" class="tab-green    item expert-item">
        <a href="#green-tab" aria-controls="home" role="tab" data-toggle="tab">
             subject
        </a>
    </div>
    <div role="presentation" class="tab-yellow    item expert-item">
        <a href="#yellow-tab" aria-controls="home" role="tab" data-toggle="tab">
            and what
        </a>
    </div>
</div>

Если у вас нет дополнительных элементов навигации, выВозможно, вы захотите уменьшить вкладки, чтобы заполнить оставшееся пространство (например, используя свойство flex для элемента внутри контейнера flexbox).

...