Сова карусели и вкладка бутстрапа на странице

Ответ 1

Во-первых, я заметил ошибку в вашем html. Вам не хватает закрывающего тега </div> для вашей второй панели вкладок. Это отбрасывает часть структуры вашей разметки.

После исследования и игры с этим, похоже, это известная проблема. Это связано с тем, что вкладки Bootstraps скрыты изначально. Когда вы пытаетесь инициализировать OwlCarousel внутри скрытого элемента, все идет плохо, потому что скрытые элементы не имеют ширины, поэтому Сова не знает, сколько места ему нужно для работы.

Мое решение состоит в том, чтобы подождать, пока появится вкладка, чтобы инициализировать карусель, а затем уничтожить карусель каждый раз, когда вкладка скрыта. Для меня это кажется хакером, но он работает. Здесь мой JavaScript:

$(document).ready(function () {

    initialize_owl($('#owl1'));

    $('a[href="#home"]').on('shown.bs.tab', function () {
        initialize_owl($('#owl1'));
    }).on('hide.bs.tab', function () {
        destroy_owl($('#owl1'));
    });

    $('a[href="#profile"]').on('shown.bs.tab', function () {
        initialize_owl($('#owl2'));
    }).on('hide.bs.tab', function () {
        destroy_owl($('#owl2'));
    });

    $('a[href="#messages"]').on('shown.bs.tab', function () {
        initialize_owl($('#owl3'));
    }).on('hide.bs.tab', function () {
        destroy_owl($('#owl3'));
    });

    $('a[href="#settings"]').on('shown.bs.tab', function () {
        initialize_owl($('#owl4'));
    }).on('hide.bs.tab', function () {
        destroy_owl($('#owl4'));
    });
});

function initialize_owl(el) {
    el.owlCarousel({
        loop: true,
        margin: 10,
        responsiveClass: true,
        responsive: {
            0: {
                items: 1,
                nav: true
            },
            600: {
                items: 1,
                nav: false
            },
            1000: {
                items: 1,
                nav: true,
                loop: false
            }
        }
    });
}

function destroy_owl(el) {
    el.data('owlCarousel').destroy();
}

И здесь работает jsFiddle: http://jsfiddle.net/voveson/67zq4f4o/1/

Надеюсь, что это поможет, и если так, я с радостью приму твою щедрость! Ура!:)

Ответ 2

Больше не нужно javascript, чем опция совой карусели.

Просто замените следующие строки в bootstrap.css, и все должно хорошо работать.

    .tab-content > .tab-pane {
    visibility: hidden;
    height: 0px;
    overflow:hidden;
}
.tab-content > .active {
    visibility: visible;
    height: auto;
    overflow: visible;
}

Ответ 3

Это лучшее решение:

https://www.youtube.com/watch?v=tKrt9ev4S24

.tab-content > .tab-pane{
    display: block;
    height: 0;
}

.tab-content > .active{
    height: auto;
}

Ответ 4

Дорогой друг, вы можете поместить следующий фрагмент кода вместо "owl.carousel.css", пока проблема не будет решена.

/* 
 * 	Core Owl Carousel CSS File
 *	v1.3.3
 */

/* clearfix */
.owl-carousel .owl-wrapper:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
/* display none until init */
.owl-carousel{
	display: none;
	position: relative;
	width: 100%;
	-ms-touch-action: pan-y;
}
.owl-carousel .owl-wrapper{
	display: none;
	position: relative;
	-webkit-transform: translate3d(0px, 0px, 0px);
	float: left;
}
.owl-carousel .owl-wrapper-outer{
	float: left;
	overflow: hidden;
	position: relative;
	width: 200%;
}
.owl-carousel .owl-wrapper-outer.autoHeight{
	-webkit-transition: height 500ms ease-in-out;
	-moz-transition: height 500ms ease-in-out;
	-ms-transition: height 500ms ease-in-out;
	-o-transition: height 500ms ease-in-out;
	transition: height 500ms ease-in-out;
}
	
.owl-carousel .owl-item{
	float: left;
}
.owl-controls .owl-page,
.owl-controls .owl-buttons div{
	cursor: pointer;
}
.owl-controls {
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* mouse grab icon */
.grabbing { 
    cursor:url(grabbing.png) 8 8, move;
}

/* fix */
.owl-carousel  .owl-wrapper,
.owl-carousel  .owl-item{
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility:    hidden;
	-ms-backface-visibility:     hidden;
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
}

Ответ 5

Для меня это сработало инициализация/уничтожить ползунок сова. Я использую bootstrap-4.0.0-beta и Owl Carousel v2.3.4. OBS: метод его уничтожения для этого vs $ ('. Owl-carousel'). OwlCarousel ('destroy');

Ответ 6

Вам больше не нужно ничего делать с jQuery, чтобы отобразить owl-carousel во вкладке начальной загрузки.

Если вы хотите поместить сову-карусель во вкладку, то вы должны присвоить одинаковые идентификаторы каждой сове-карусели с одинаковым class="owl-carousel".

Codepen

jQuery(document).ready(function() {
  jQuery(".owl-carousel").owlCarousel();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-xs-12">

      <div>

        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
          <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
          <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content">
          <div role="tabpanel" class="tab-pane active" id="home">
            <div id="owl-example" class="owl-carousel">
              <div> <img src="https://www.fillmurray.com/640/360"> </div>
              <div> <img src="https://www.fillmurray.com/640/360"> </div>
              <div> <img src="https://www.fillmurray.com/640/360"> </div>
              <div> <img src="https://www.fillmurray.com/640/360"> </div>
              <div> <img src="https://www.fillmurray.com/640/360"> </div>
              <div><img src="https://www.fillmurray.com/640/360"> </div>
              <div> <img src="https://www.fillmurray.com/640/360"> </div>
            </div>
          </div>
          <div role="tabpanel" class="tab-pane" id="profile">
            <div id="owl-example" class="owl-carousel">
              <div> <img src="https://loremflickr.com/640/360"> </div>
              <div> <img src="https://loremflickr.com/640/360"> </div>
              <div> <img src="https://loremflickr.com/640/360"> </div>
              <div> <img src="https://loremflickr.com/640/360"> </div>
              <div> <img src="https://loremflickr.com/640/360"> </div>
              <div> <img src="https://loremflickr.com/640/360"> </div>
              <div> <img src="https://loremflickr.com/640/360"> </div>
            </div>
          </div>
        </div>

      </div>

    </div>
  </div>
</div>