Изображения накладываются сверху, а не скользят с помощью Owl Carousel

Мой сайт http://mytempsite. Contemporary-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. Есть идеи, что здесь не так?

после первого «слайда» все пропало. потому что .owl-stage получает transform: translate3d(-1920px, 0px, 0px); , но все равно. исправление будет display:flex вместо display:block на <div class = "owl-stage">

Ramon de Vries 02.01.2019 16:17
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
1
55
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я не вижу в вашем исходном коде двух файлов CSS, которые, как указано в документации Owl Carousel, необходимы для успешной установки (источник). Вам нужно будет включить в ваш <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">

Другие вопросы по теме