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

在主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=".4.1/jquery.min.js"></script>
    <script src=".2.4/jquery.min.js"></script>
    <script src=".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>

请帮助，谢谢：）

回答如下：

首先请删除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/libs/owl-carousel/2.3.4/assets/owl.carousel.min.css“

Demo link for working Responsive Owl Carousel at JSFiddle

您可以添加自定义CSS并相应地添加更改。请参考Owl Carousel Documentation here

在主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=".4.1/jquery.min.js"></script>
    <script src=".2.4/jquery.min.js"></script>
    <script src=".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>

请帮助，谢谢：）

回答如下：

首先请删除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/libs/owl-carousel/2.3.4/assets/owl.carousel.min.css“

Demo link for working Responsive Owl Carousel at JSFiddle

您可以添加自定义CSS并相应地添加更改。请参考Owl Carousel Documentation here