图片堆叠在顶部而不是使用 Owl 旋转木马滑动

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，它看起来很好，控制台中没有错误 window（使用 Chrome）

我已经剥离了几乎所有内容，从站点到它的基本骨架，以及当前的 Javascript、JQuery、CSS 完好无损。有什么想法哪里出了问题吗？

Answer 1

我没有在源代码中看到 Owl Carousel 文档所说的成功安装所需的两个 CSS 文件 (source)。您需要在 <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 旋转木马滑动

Images stacking on top instead of sliding using Owl Carousel

javascript

css

jquery

owl-carousel