猫头鹰Carousel2 autoWidth不在twitter Bootstrap 3 Modal中工作

时间：2014-11-12 16:26:53

标签： jquery html twitter-bootstrap-3 owl-carousel 

$('.owl-carousel').owlCarousel({
    margin: 10,
    loop: true,
    autoWidth: true,
    items: 4
});

$('.owl-carousel2').owlCarousel({
    margin: 10,
    loop: true,
    autoWidth: true,
    items: 4
});
.owl-carousel .item {
    background: none repeat scroll 0 0 #4dc7a0;
    height: 10rem;
    padding: 1rem;
}
<div style="margin:0 auto;width:950px;">
<div class="owl-carousel2">
                    <div class="item" style="width:250px">
                        <h4>1</h4>
                    </div>
                    <div class="item" style="width:100px">
                        <h4>2</h4>
                    </div>
                    <div class="item" style="width:500px">
                        <h4>3</h4>
                    </div>
                    <div class="item" style="width:100px">
                        <h4>4</h4>
                    </div>
                    <div class="item" style="width:50px">
                        <h4>6</h4>
                    </div>
                    <div class="item" style="width:250px">
                        <h4>7</h4>
                    </div>
                    <div class="item" style="width:120px">
                        <h4>8</h4>
                    </div>
                    <div class="item" style="width:420px">
                        <h4>9</h4>
                    </div>
                    <div class="item" style="width:120px">
                        <h4>10</h4>
                    </div>
                    <div class="item" style="width:300px">
                        <h4>11</h4>
                    </div>
                    <div class="item" style="width:450px">
                        <h4>12</h4>
                    </div>
                    <div class="item" style="width:220px">
                        <h4>13</h4>
                    </div>
                    <div class="item" style="width:150px">
                        <h4>14</h4>
                    </div>
                    <div class="item" style="width:600px">
                        <h4>15</h4>
                    </div>
                </div>
</div>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                </button>
                 <h4 class="modal-title" id="myModalLabel">Modal title</h4>

            </div>
            <div class="modal-body" style="widows:300px;">
                <div class="owl-carousel">
                    <div class="item" style="width:250px">
                        <h4>1</h4>
                    </div>
                    <div class="item" style="width:100px">
                        <h4>2</h4>
                    </div>
                    <div class="item" style="width:500px">
                        <h4>3</h4>
                    </div>
                    <div class="item" style="width:100px">
                        <h4>4</h4>
                    </div>
                    <div class="item" style="width:50px">
                        <h4>6</h4>
                    </div>
                    <div class="item" style="width:250px">
                        <h4>7</h4>
                    </div>
                    <div class="item" style="width:120px">
                        <h4>8</h4>
                    </div>
                    <div class="item" style="width:420px">
                        <h4>9</h4>
                    </div>
                    <div class="item" style="width:120px">
                        <h4>10</h4>
                    </div>
                    <div class="item" style="width:300px">
                        <h4>11</h4>
                    </div>
                    <div class="item" style="width:450px">
                        <h4>12</h4>
                    </div>
                    <div class="item" style="width:220px">
                        <h4>13</h4>
                    </div>
                    <div class="item" style="width:150px">
                        <h4>14</h4>
                    </div>
                    <div class="item" style="width:600px">
                        <h4>15</h4>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

	<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.carousel.min.css">
    <link rel="stylesheet" href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.theme.default.min.css">

<script src="http://www.owlcarousel.owlgraphic.com/assets/vendors/jquery.min.js"></script>
    <script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
    <script src="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/owl.carousel.js"></script>

我有代码片段。 因为autowidth owl项目我使用owlCarousel2.js。 我的第一个猫头鹰旋转木马工作非常好，但我把这个代码放在Bootstrap模式，这是不正常的。 请提前帮忙。

1 个答案:

答案 0 :(得分：2)

我认为owl casrousel2在display none条件下无法正常工作。 这就是为什么我尝试在模态打开事件上制作旋转木马。并且在模态关闭事件上摧毁。

var owlCarousel = $('.owl-carousel');
$('#myModal').on('shown.bs.modal', function (event) {
  owlCarousel.owlCarousel({
    margin: 10,
    loop: true,
    autoWidth: true,
    items: 4
  });
});
$('#myModal').on('hidden.bs.modal', function (event) {
  owlCarousel.data('owlCarousel').destroy();
  owlCarousel.find('.owl-stage-outer').children().unwrap();
});
$('.owl-carousel2').owlCarousel({
    margin: 10,
    loop: true,
    autoWidth: true,
    items: 4
});
.owl-carousel .item {
    background: none repeat scroll 0 0 #4dc7a0;
    height: 10rem;
    padding: 1rem;
}
<div style="margin:0 auto;width:950px;">
<div class="owl-carousel2">
                    <div class="item" style="width:250px">
                        <h4>1</h4>
                    </div>
                    <div class="item" style="width:100px">
                        <h4>2</h4>
                    </div>
                    <div class="item" style="width:500px">
                        <h4>3</h4>
                    </div>
                    <div class="item" style="width:100px">
                        <h4>4</h4>
                    </div>
                    <div class="item" style="width:50px">
                        <h4>6</h4>
                    </div>
                    <div class="item" style="width:250px">
                        <h4>7</h4>
                    </div>
                    <div class="item" style="width:120px">
                        <h4>8</h4>
                    </div>
                    <div class="item" style="width:420px">
                        <h4>9</h4>
                    </div>
                    <div class="item" style="width:120px">
                        <h4>10</h4>
                    </div>
                    <div class="item" style="width:300px">
                        <h4>11</h4>
                    </div>
                    <div class="item" style="width:450px">
                        <h4>12</h4>
                    </div>
                    <div class="item" style="width:220px">
                        <h4>13</h4>
                    </div>
                    <div class="item" style="width:150px">
                        <h4>14</h4>
                    </div>
                    <div class="item" style="width:600px">
                        <h4>15</h4>
                    </div>
                </div>
</div>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                </button>
                 <h4 class="modal-title" id="myModalLabel">Modal title</h4>

            </div>
            <div class="modal-body" style="widows:300px;">
                <div class="owl-carousel">
                    <div class="item" style="width:250px">
                        <h4>1</h4>
                    </div>
                    <div class="item" style="width:100px">
                        <h4>2</h4>
                    </div>
                    <div class="item" style="width:500px">
                        <h4>3</h4>
                    </div>
                    <div class="item" style="width:100px">
                        <h4>4</h4>
                    </div>
                    <div class="item" style="width:50px">
                        <h4>6</h4>
                    </div>
                    <div class="item" style="width:250px">
                        <h4>7</h4>
                    </div>
                    <div class="item" style="width:120px">
                        <h4>8</h4>
                    </div>
                    <div class="item" style="width:420px">
                        <h4>9</h4>
                    </div>
                    <div class="item" style="width:120px">
                        <h4>10</h4>
                    </div>
                    <div class="item" style="width:300px">
                        <h4>11</h4>
                    </div>
                    <div class="item" style="width:450px">
                        <h4>12</h4>
                    </div>
                    <div class="item" style="width:220px">
                        <h4>13</h4>
                    </div>
                    <div class="item" style="width:150px">
                        <h4>14</h4>
                    </div>
                    <div class="item" style="width:600px">
                        <h4>15</h4>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

	<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.carousel.min.css">
    <link rel="stylesheet" href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.theme.default.min.css">

<script src="http://www.owlcarousel.owlgraphic.com/assets/vendors/jquery.min.js"></script>
    <script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
    <script src="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/owl.carousel.js"></script>

相关问题
最新问题