javascript - OwlCarousel 和 bootstrap 幻灯片在网站中的使用

标签 javascript html css twitter-bootstrap

我是新手。当我使用 bootstrap 幻灯片放映和 owl-carousel 时,bootstrap 幻灯片放映采用 owl-carousel CSS 如何使用它。

轮播元素。

<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>

最佳答案

好吧,也许这取决于您称呼钢板的顺序。没有任何代码,将很难为您提供帮助。 在我的元素中,我以这种方式进行

<!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>

关于javascript - OwlCarousel 和 bootstrap 幻灯片在网站中的使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37540989/

相关文章:

html - 为什么 li 比 a 子标签高

css - 使元素除边框外透明?

javascript - 将变量从php传递到js?或者更好的方法?

javascript - 如何操作生成的 CSS

javascript - AngularJS 中同一页面上具有不同 Controller 的同一模板

javascript - 我无法用全名填充 &lt;input&gt; 值,只显示名字

html - 当我将鼠标悬停在这些图像上时,如何让单词出现?

javascript - 页面不会通过邮寄提交。使用JS通过<a href>提交

python - 如何在plone的模板页面(html页面)中渲染matplotlib窗口

css - 没有 HTML5 的范围样式表