猫头鹰旋转木马和引导标签在页面上 [英] Owl carousel and bootstrap tab on a page

问题描述

我正在尝试使用引导程序和猫头鹰传送带构建页面，猫头鹰传送带适合网站的目的，而不是引导版本。所以我得到了一个标签结构，我想在每个页面上放置一个轮播，但是我所有的尝试都失败了。这是我的代码

 < div role =tabpanel> 
 
<！ - 导航标签 - > 
 
< li role =presentationclass =active>< a href =＃homearia-controls =homerole =tabdata-toggle =tab> Home< ; / A>< /锂> 
< li role =presentation>< a href =＃profilearia-controls =profilerole =tabdata-toggle =tab>个人资料< / a>< ; /立GT; 
< li role =presentation>< a href =＃messagesaria-controls =messagesrole =tabdata-toggle =tab> Messages< / a>< ; /立GT; 
< li role =presentation>< a href =＃settingsaria-controls =settingsrole =tabdata-toggle =tab>设置< / a>< ; /立GT; 
< / ul> 
 
 <！ -   - 标签窗格 - > 
< div class =tab-content> 
< div role =tabpanelclass =tab-pane activeid =home> 
< div class =owl-carouselid =owl1> 
< div>内容< / DIV> 
< div>内容< / DIV> 
< / div> 
< / div> 
< div role =tabpanelclass =tab-paneid =profile> 
< div class =owl-carouselid =owl2> 
< div>内容< / DIV> 
< div>内容< / DIV> 
< / div> 
< div role =tabpanelclass =tab-paneid =messages> 
< div class =owl-carouselid =owl3> 
< div>内容< / DIV> 
< div>内容< / DIV> 
< / div> 
< / div> 
< div role =tabpanelclass =tab-paneid =settings> 
< div class =owl-carouselid =owl4> 
< div>内容< / DIV> 
< div>内容< / DIV> 
< / div> 
< / div> 
< / div> 
< / div> 
  

这是我的javascript

  $（document）.ready（function（）{
 $（'＃owl1'）。owlCarousel（{
 loop：true，
 margin：10，
 responsiveClass：true，
响应：{
 0：{
物品：1，
导航：true 
}，
 600：{
物品：1，
 nav：false 
}，
 1000：{
物品：1，
 nav：true，
 loop：false 
} 
} 
}）; 
 $（'＃owl2'）。owlCarousel（{
 loop：true，
 margin：10，
 responsiveclass：true，
响应：{
 0：{
物品：1，
导航：true 
}，
 600：{
物品：1，
 nav：false 
 }，
 1000：{
 items：1，
 nav：true，
 loop：false 
} 
} 
}）; 
 $（'＃owl3'）。owlCarousel（{
循环：true，
保证金：10，
 responsiveclass：true，
响应：{
 0：{
 items：1，
 nav：true 
}，
 600：{
 items：1，
 nav：false 
 }，
 1000：{
 items：1，
 nav：true，
 loop：false 
} 
} 
}）; 
 $（'＃owl4'）。owlCarousel（{
 loop：true，
保证金：10，
响应类别：true，
响应：{
 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

解决方案

首先，我注意到你的html中有一个错误。您缺少第二个选项卡的关闭< / div> 标签。这是抛出一些你的标记结构。

经过研究和玩弄这个，看起来这是一个已知的问题。它起源于最初隐藏Bootstraps选项卡的事实。当你试图在一个隐藏的元素中初始化一个OwlCarousel时，事情变得很糟糕，因为隐藏的元素没有宽度，所以Owl不知道它需要多少空间。

我的解决方案是等到显示一个选项卡来初始化传送带，然后每次隐藏标签时销毁传送带。这对我来说有点不好，但确实有效。这是我的JavaScript：

  $（document）.ready（function（）{
 
 initialize_owl（$ （'＃owl1'））; 
 
'（'a [href =＃home]'）。（'shown.bs.tab'，function（）{
 initialize_owl （$（'＃owl1'））; 
}）。on（'hide.bs.tab'，function（）{
 destroy_owl（$（'＃owl1'））; 
 （）'）; 
 $ b $（'a [href =＃profile]'）。（'shown.bs.tab'，function（）{
 initialize_owl（$（'＃' （'hide.bs.tab'，function（）{
 destroy_owl（$（'＃owl2'））; 
}）; $ b $（$'$'$'$'''['href =＃messages]'）。（'shown.bs.tab'，function（）{
 initialize_owl（$（'＃owl3'））; $（$＃$ b}）。on（'hide.bs.tab'，function（）{
 destroy_owl（$（'＃owl3'））; 
}）; 
 $ b $ （'shown.bs.tab'，function（）{
 initialize_owl（$（'＃owl4'））; 
} ）.on（'hide.bs.tab'，function（）{
d estroy_owl（$（'＃owl4'））; 
}）; 
}）; 
 
函数initialize_owl（el）{
 el.owlCarousel（{
 loop：true，
 margin：10，
 responsiveClass：true，
响应：{
 0：{
物品：1，
导航：true 
}，
 600：{
物品：1，
 nav：false 
}，
 1000：{
 items：1，
 nav：true，
 loop：false 
} 
} 
}）; 
} 
 
函数destroy_owl（el）{
 el.data（'owlCarousel'）。destroy（）; 
} 
  

下面是一个可用的jsFiddle： http://jsfiddle.net/voveson/67zq4f4o/1/

希望它有帮助，如果是的话，我会很乐意接受你的赏金！干杯! ：）

I am trying to build a page using both bootstrap and a Owl carousel, Owl carousel fit the purpose of the site rather that bootstraps version. So I got a tab structure where I want to put a carousel on each page, however all my attempts have failed. Here is my 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>

Here is my 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

解决方案

First, I noticed an error in your html. You are missing a closing </div> tag for your second tab-pane. That's throwing off some of the structure of your markup.

After researching and playing around with this, it seems that this is a known issue. It stems from the fact that Bootstraps tabs are hidden initially. When you try to initialize an OwlCarousel within a hidden element, things go badly because hidden elements have no width, so Owl does not know how much space it has to work with.

My solution is to wait until a tab is shown to initialize the carousel, then destroy the carousel each time the tab is hidden. It feels kind of hackish to me, but it does work. Here's my 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();
}

And here's a working jsFiddle: http://jsfiddle.net/voveson/67zq4f4o/1/

Hope it helps, and if so I will gladly accept your bounty! Cheers! :)

这篇关于猫头鹰旋转木马和引导标签在页面上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！