时间戳

首页 > 解决方案 > 在主js文件中调用owl carousel时出错

javascript - 在主js文件中调用owl carousel时出错

问题描述

我对编码尤其是 JavaScript 真的很陌生。我似乎无法让 Owl Carousel 工作:(

当我将 main.js 文件保存在括号中时，出现一些错误：

$(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();

我快要发疯了，因为我已经正确地包含了所有内容，并且我不知道错误的含义是什么...

这是我的 index.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>

请帮忙，谢谢:)

标签： javascriptjquerycarouselowl-carousel

解决方案

首先请删除 2.2.4 和 1.12.4 的 jquery 库。其次是 main.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 "

在 JSFiddle 上使用响应式猫头鹰轮播的演示链接

您可以添加自定义 CSS 并相应地添加更改。请在此处参考 Owl Carousel 文档

推荐阅读