带有 Bootstrap 4 Beta 的 Owl Carousel 2.2.1 出现问题答案

【问题标题】：Trouble with Owl Carousel 2.2.1 with Bootstrap 4 Beta带有 Bootstrap 4 Beta 的 Owl Carousel 2.2.1 出现问题
【发布时间】：2017-09-08 01:25:08
【问题描述】：

我正在尝试使用 owl carousel 和 Bootstrap 4 设计一个简单的轮播。我在我的 HTML 上链接了所有正确的 CSS 和 JS，并按照他们网站上的 HTML 和 JS 说明进行操作，但轮播不起作用。我的项目只是堆叠在一起，没有样式也没有 Javascript。请看代码：

<!-- BOOTSTRAP 4 STYLESHEETS & CUSTOM - before all other stylesheets -->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<!-- FontAwesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous" />
<!-- Owl carousel -->
<link rel="stylesheet" href="../node_modules/owl.carousel/dist/assets/owl.carousel.min.css" />
<link rel="stylesheet" href="../node_modules/owl.carousel/dist/assets/owl.theme.default.min.css" />

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

<div class="owl-carousel owl-theme">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
    <div class="item"><h4>5</h4></div>
    <div class="item"><h4>6</h4></div>
    <div class="item"><h4>7</h4></div>
    <div class="item"><h4>8</h4></div>
    <div class="item"><h4>9</h4></div>
    <div class="item"><h4>10</h4></div>
    <div class="item"><h4>11</h4></div>
    <div class="item"><h4>12</h4></div>
</div>

<script>
    $('.owl-carousel').owlCarousel({
        rtl:true,
        loop:true,
        margin:10,
        nav:true,
        responsive:{
            0:{
                items:1
            },
            600:{
                items:3
            },
            1000:{
                items:5
            }
        }
    });
</script>

【问题讨论】：

标签： twitter-bootstrap carousel owl-carousel

【解决方案1】：

试试这个堆栈溢出的答案：

Owl Carousel 2 items stack on top of each other.

在滑块上使用overflow-x: hidden，以便隐藏不在滑块中的文本。

在 .owl-stage 上使用 display: flex 以显示彼此相邻的项目。

【讨论】：

【解决方案2】：

在您的示例代码中，不要将 javascripts 用于 wol 完整的示例代码是：

<html>
<head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.2/assets/owl.carousel.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.2/assets/owl.theme.default.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.2/assets/owl.theme.green.min.css" />

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.2/owl.carousel.min.js"></script>


<style>
    .owl-carousel .item {
        text-align: center;
        /*background-color: #F44336;*/
        height: 300px;
        vertical-align: middle;
    }

        .owl-carousel .item h4 {
            background-color: #808080;
            padding: 5px;
        }
</style>

如您所见，使用了 bootstrap 和 OWL。身体是：

<body>
<div class="container-fluid">
    <section id="demos">
        <div class="row">
            <div class="col-lg-12">
                <div class="owl-carousel owl-theme" style="display:block !important;overflow-x: hidden">
                    <div class="item">
                        <h4>
                            <img    src="https://www.w3schools.com/bootstrap/ny.jpg" alt="New york">
                        </h4>
                    </div>
                    <div class="item">
                        <h4>
                            <img    src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Chicago">
                        </h4>
                    </div>
                    <div class="item">
                        <h4>
                            <img    src="https://www.w3schools.com/bootstrap/la.jpg" alt="Los Angeles">
                        </h4>
                    </div>

                </div>
                <script type="text/javascript">
                    $('.owl-carousel').owlCarousel({
                        loop: true,
                        margin: 0,
                        nav: true,
                        center: true,
                        autoplay: true,
                        autoplayTimeout: 3000,
                        autoplayHoverPause: true,
                        responsive: {
                            0: {
                                items: 1
                            },
                            600: {
                                items: 1
                            },
                            1000: {
                                items: 1
                            }
                        }
                    })         </script>
            </div>
        </div>
    </section>
</div>

通过使用此示例可以解决您的问题。通过更改项目的值是响应可以修改页面中幻灯片放映的数量。去owl-carousel更多波斯语的详细信息

【讨论】：

【解决方案3】：

//css file
<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">

//js file
<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>

    <div class="owl-carousel">
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
</div>

玩得开心:)

download file

【讨论】：

也许尝试添加一些解释，说明这是一个答案以及 OP 做错了什么。您也可以将该代码移至 JS Snippet，这样我们就不必单击显示“下载文件”的链接 :)
您的示例未使用 bootstrap 。同时询问带有 bootstrap-4-beta 的 owl carousel2-2-1 的问题。