【问题标题】:Owl carousel - theme css doesn't apply猫头鹰轮播 - 主题 CSS 不适用
【发布时间】:2016-04-18 06:46:55
【问题描述】:

我需要将猫头鹰轮播添加到我的网站。
我按照说明使用了 css 作为默认主题。
它工作得很好。然后突然(没有更改代码)默认主题停止工作(导航上没有主题)...
我一直在尝试修复它,但我正在失去理智......我什至将更改恢复到我确定它有效的地方!
这与浏览器无关,因为我什至将它上传到我的服务器上......

我的代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Light Coorporation - Photo</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />

    <!-- Bootstrap Core CSS -->
    <link href="../css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="../css/style.css" rel="stylesheet">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

    <script src="../js/jquery.js" language="javascript"></script>
    <script src="../js/jquery-ui.js" language="javascript"></script>
    <script src="../js/jquery.stellar.js" language="javascript">    </script>
    <script src="../js/global.min.js" language="javascript"></script>
    <script src="../js/bootstrap.min.js" language="javascript"></script>
    <script src="../js/owl.carousel.min.js"></script>
    <script src="../js/owl.custom.min.js"></script>
    <link href="../css/owl.carousel.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/owl.theme.default.min.css">
</head>
<body>
    <?php include '../include/fixed_menu.php' ?> 
    <br><br><br><br><br><br>
    <div class="container ">
        <div class="owl-carousel owl-slider-custom">
            <div class="item"><img src="../images/murmur.jpg"></div>
            <div class="item"><img src="../images/murmur.jpg"></div>
            <div class="item"><img src="../images/murmur.jpg"></div>
            <div class="item"><img src="../images/murmur.jpg"></div>
            <div class="item"><img src="../images/murmur.jpg"></div>
            <div class="item"><img src="../images/murmur.jpg"></div>
            <div class="item"><img src="../images/murmur.jpg"></div>
            <div class="item"><img src="../images/murmur.jpg"></div>
            <div class="item"><img src="../images/murmur.jpg"></div>
            <div class="item"><img src="../images/murmur.jpg"></div>
            <div class="item"><img src="../images/murmur.jpg"></div>
            <div class="item"><img src="../images/murmur.jpg"></div>
        </div>
    </div>
    <br><br>
</body>
</html>

和js:

$(document).ready(function () {
    $('.owl-carousel').owlCarousel({
        loop:true,
        margin:15,
        center: true,
        merge: true,
        responsiveClass:true,
        autoWidth: true,
        responsive:{
            0:{
                items:1,
                mergeFit: true,
                nav:true
            },
            600:{
                items:1,
                mergeFit: true,
                nav:true
            },
            1000:{
                items:1,
                mergeFit: true,
                nav:true
            }
        }
    });
});

它曾经工作了一段时间然后停止了,这似乎很奇怪......
任何帮助将不胜感激。
祝福!

演示: "http://bez-granic.eu/lc/photo/"

【问题讨论】:

  • 如果没有看到该网站,我们将很难提供帮助。控制台中是否出现 404 错误?
  • 这很奇怪。可能相关:当我在 Chrome 中刷新页面时,轮播没有正确初始化——所有图像都堆叠在一列中。未报告任何错误。
  • 我也注意到了。我的代码做错了吗?

标签: jquery html css slider owl-carousel


【解决方案1】:

如果这对某人有帮助: 来自:http://www.owlcarousel.owlgraphic.com/docs/api-classes.html

注意类 owl-theme 在:&lt;div class="owl-carousel owl-theme owl-loaded"&gt;

【讨论】:

    【解决方案2】:

    显然我的 css 版本有误...很难找到合适的,但我在这里找到了它https://github.com/OwlFonk/OwlCarousel2/archive/master.zip

    【讨论】:

      猜你喜欢
      • 2020-02-14
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-03-04
      • 2014-10-09
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多