Ошибка вызова совой карусели в основном файле js

Question

Я действительно новичок в кодировании, особенно JavaScript .. Кажется, я не могу заставить Owl Carousel работать: (

, когда я сохраняю свой основной файл. js в скобках I получить несколько ошибок:

$(document).ready(function(){
  $(".owl-carousel").owlCarousel();
});

Ошибки:

 $' was used before it was defined. $(document).ready(function(){
1   
Expected exactly one space between 'function' and '('.  $(document).ready(function(){
1   
Expected exactly one space between ')' and '{'. $(document).ready(function(){
1   
Missing space between ')' and '{'.  $(document).ready(function(){
2   
Missing 'use strict' statement. $(".owl-carousel").owlCarousel();

Я собираюсь go сумасшедший, потому что я все включил правильно, и у меня нет финг понять, что означают ошибки ...

вот мой индекс. html

    <div class="owl-carousel">
      <div> Your Content </div>
      <div> Your Content </div>
      <div> Your Content </div>
      <div> Your Content </div>
      <div> Your Content </div>
      <div> Your Content </div>
      <div> Your Content </div>
    </div>



    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="js/owl.carousel.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/main.js"></script>

Пожалуйста, помогите, спасибо:)

Answer 1

Прежде всего удалите библиотеки 2.2.4 и 1.12.4 jquery. Во вторых для основного. js. Следуйте этому коду.

  $(".owl-carousel").owlCarousel({
    responsiveClass: true,
    dots: true,
    dotsContainer: false,
       loop: true,
       autoWidth: true,
      autoplay:true,
      nav:true,
      smartSpeed:1000,
      items:4,
      responsive: {
    0: {
      items:1,
      margin: 250,
      center: true

    },

    768: {
        items:3,
              margin:200,
         center: false
            },   

    992: {
        items:3,
    margin: 350,
        center: true
    },

    1200: {
          items:3,
        margin:350,
         center: true
    },

  },
  });

Добавьте следующее CSS

.owl-nav {
    text-align: center;
        }

Затем добавьте owl.carousel.min. css в таблицу стилей

https://cdn.boomcdn.com/libs/owl-carousel/2.3.4/assets/owl.carousel.min.css "

Демонстрационная ссылка для работы Responsive Owl Carousel на JSFiddle

Вы можете добавить настройку CSS и внести соответствующие изменения. Пожалуйста, обратитесь Сова Карусель Документация здесь