web-dev-qa-db-fra.com

Carrousel de hibou et onglet bootstrap sur une page

J'essaie de construire une page en utilisant à la fois bootstrap et un carrousel de hiboux, le carrousel de hiboux correspond à l'objectif du site plutôt que la version bootstraps. J'ai donc une structure d'onglets dans laquelle je veux mettre un carrousel sur chaque page, mais toutes mes tentatives ont échoué. Voici mon code

<div role="tabpanel">

<!-- 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>
 <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
 <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
 <div role="tabpanel" class="tab-pane active" id="home">
  <div class="owl-carousel" id="owl1">
   <div> content</div>
   <div> content</div>
  </div>
 </div>
 <div role="tabpanel" class="tab-pane" id="profile">
  <div class="owl-carousel" id="owl2">
   <div> content</div>
   <div> content</div>
  </div>
 <div role="tabpanel" class="tab-pane" id="messages">
  <div class="owl-carousel" id="owl3">
   <div> content</div>
   <div> content</div>
  </div>
 </div>
<div role="tabpanel" class="tab-pane" id="settings">
  <div class="owl-carousel" id="owl4">
   <div> content</div>
   <div> content</div>
  </div>
 </div>
</div>
</div>

Voici mon javascript

$(document).ready(function () {
    $('#owl1').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
            }
        }
    });
    $('#owl2').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
            }
        }
    });
    $('#owl3').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
            }
        }
    });
    $('#owl4').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
            }
        }
    });

//});

http://www.owlcarousel.owlgraphic.com/docs/api-events.html

javascriptjqueryhtmltwitter-bootstrapowl-carousel
15
jsg

Tout d'abord, j'ai remarqué une erreur dans votre code HTML. Il vous manque une balise </div> de clôture pour votre deuxième volet. Cela jette une partie de la structure de votre balisage.

Après avoir fait des recherches et joué avec cela, il semble que ce soit un problème connu. Cela provient du fait que les onglets Bootstraps sont initialement cachés. Lorsque vous essayez d'initialiser un OwlCarousel dans un élément caché, les choses vont mal parce que les éléments cachés n'ont pas de largeur, donc Owl ne sait pas combien d'espace il doit utiliser.

Ma solution consiste à attendre qu'un onglet apparaisse pour initialiser le carrousel, puis le détruise chaque fois que cet onglet est masqué. Cela me semble un peu ridicule, mais ça marche. Voici mon 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();
}

Et voici un jsFiddle qui marche: http://jsfiddle.net/voveson/67zq4f4o/1/

J'espère que cela aidera, et si c'est le cas, j'accepterai volontiers votre prime! À votre santé! :)

17
Vince

Pas plus de javascript nécessaire que l'option hibou carrousel.

Il suffit de remplacer les lignes suivantes dans le fichier bootstrap.css et tout devrait bien fonctionner.

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

C'est la meilleure solution:

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

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

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

Cher ami, vous pouvez mettre le code suivant à la place de "owl.carousel.css" jusqu'à ce que le problème soit résolu.

/* 
 * 	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);
}

1
Mahdi Bashirpour