Question

我正在尝试使用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>

Answer 1

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

Owl Carousel 2 items stack on top of each other

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

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

Answer 2

在您的示例代码中，请勿对wol使用JavaScript 完整的示例代码是：

<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波斯语的详细信息

Answer 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

Owl Carousel 2.2.1与Bootstrap 4 Beta的问题

3 个答案: