当前位置: 首页 > 知识库问答 >
问题:

Owl旋转木马-主题css不适用

陶烨赫
2023-03-14

我需要添加猫头鹰轮播到我的网站。
我遵循了说明,并使用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/”

共有1个答案

呼延鹏云
2023-03-14

如果这对某人有帮助,请访问:http://www.owlcarousel.owlgraphic.com/docs/api-classes.html

注意: 中的类owl-theme

 类似资料:
  • 我有麻烦让猫头鹰旋转木马主题样式表对我的滑块有任何影响? 我使用的是最新版本的owl.carousel.2.0.0-beta.3 这里是我的测试地点:示例网站 下面是与owl旋转木马相关的HTML代码: 名为“owl.theme.default.min.css”的样式表看起来包含了所有的导航样式表,但由于某种原因,它没有对PREV和NEXT按钮进行样式化? 如有任何帮助,我们将不胜感激。

  • 所以我有一个猫头鹰旋转木马滑块,由我使用的主题提供,但它不会停止自动播放悬停。 我尝试将添加到相应元素的中,但没有成功。我不太懂Javascript,所以我真的不知道如何继续。 这是轮播HTML: 滑块工作正常。

  • 我穿着magento 2.2.2和使用Unero主题,我正在开发magento前端。当我在内容部分添加OWL旋转木马滑块时,它是不可见的?

  • 我正在尝试使用一个猫头鹰旋转木马在我的项目,但不知何故没有显示,我不知道是什么问题与它。谁能帮助我理解我做错了什么?我已经按照本教程https://github.com/owlcarousel2/owlcarousel2中的步骤进行了操作,并且我还尝试检查该元素,但没有出现错误,也没有carousel可见。下面是我的html代码: null null 这里是js代码: null null

  • 我想要一个包含三个项目的旋转木马,中间的项目以一种背景颜色居中(稍后是一个彩色的背景图像),左+右的项目以不同的颜色(稍后是带有灰度级滤镜的imagebackgrounds)。就像这个OWL1在http://codepen.io/owlfonk/pen/dpjhb上的旋转木马,但我想使用OWL2。 我好像不能挑出当前的项目?!我的旋转木马一直‘画’在中间和右边...我做错什么了?!越来越令人沮丧!

  • 我正在玩一个boostrap主题是使用猫头鹰旋转木马。 这是我使用的主题 https://demo.themewagon.com/preview/free-html5-bootstrap-4-travel-agency-website-template-ecoland 正如您在链接中所看到的,猫头鹰旋转木马用于两个地方 用于页面顶部的英雄幻灯片 用于证明。 我想减慢滑梯的速度,让它们在悬停状态下停