Question

我的网站http://mytempsite.temporary-domain.com

上面的页面上有两幅使用Owl Carousel显示的图像，但是我无法确定这里出了什么问题，因为我正在使用网络上的示例，因此我可能在这里介绍了一些错误。

我的轮播设置为

<script>

            $(document).ready(function() {
                $('#banner').owlCarousel({
                    animateOut: 'fadeOut',
                    animateIn: 'fadeIn',
                    items: 1,
                    smartSpeed: 1000,
                    autoplay: true,
                    autoplayTimeout: 6000,
                    dots: true,
                    nav: false,
                    //loop: true,
                    mouseDrag: false,
                    touchDrag: false
                });

            });
        </script>

两个图像应在它们之间滑动时显示。我使用的是Owl Carousel的最新版本，所以不确定Owl Carousel是问题还是其他原因？我检查了HTML看起来不错，并且在控制台窗口中没有错误（使用Chrome）

我已经删除了从网站到其基本裸露的几乎所有内容，以及当前保留的Javascript，JQuery和CSS。有什么想法怎么了吗？

Answer 1

我在您的源代码中没有看到Owl Carousel文档说的成功安装（source所需的两个CSS文件。您需要在<head>中添加以下内容。

<!-- change paths to reflect your setup -->
<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">

图像堆叠在顶部，而不是使用Owl Carousel滑动

1 个答案: