Question

我是新手。当我使用bootstrap幻灯片放映和owl-carousel然后bootstrap幻灯片放映时，请使用owl-carousel CSS 如何使用它。

carousel item。

<div class="carousel">
    <div class="item1">
        <img src="images/item.png" >
    </div>
    <div class="item1">
        <img src="images/item.png" >
    </div>
    <div class="item1">
        <img src="images/item.png" >
    </div>
    <div class="item1">
        <img src="images/item.png" >
    </div>
    <div class="item1">
        <img src="images/item.png" >
    </div>
    <div class="item1">
        <img src="images/item.png" >
    </div>
</div>

bootstrap幻灯片放映

<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="images/baner.png" alt="Chania">
        </div>
        <div class="item">
            <img src="images/baner.png" alt="Chania" >
        </div>      
        <div class="item">
            <img src="images/baner.png" alt="Flower" >
        </div>
        <div class="item">
            <img src="images/baner.png" alt="Flower" >
        </div>
    </div>
</div>

Answer 1

好吧，也许这取决于你打电话给你的钢板的顺序。没有任何代码，它将很难帮助你。在我的项目中，我这样做

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="web/lib/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="web/lib/owlcarousel/css/owl.carousel.css">
    <link rel="stylesheet" type="text/css" href="web/lib/owlcarousel/css/owl.theme.css">
</head>
<body>

    <div>
        <!-- your bootstrap slider -->
    </div>

    <div>
        <!-- your owl slider -->
    </div>

    <script type="text/javascript" src="web/lib/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="web/lib/owlcarousel/js/owl.carousel.js"></script>

    <!-- init owl -->
    <script type="text/javascript">
        $('.myOwlCarousel').owlCarousel({
            // some configs
        });
    </script>
</body>
</html>

OwlCarousel和bootstrap幻灯片在网站上使用

1 个答案: