【问题标题】:Slick.js is not working due some conflict with the other scripts used on the page由于与页面上使用的其他脚本存在冲突,Slick.js 无法正常工作
【发布时间】:2019-01-13 14:13:05
【问题描述】:

我在我的页面上使用了许多脚本,但由于某些原因 slick.js 脚本无法与这些脚本一起使用。

当我删除所有其他字符串时,slick 工作正常。

下面是正文部分

    `

<body>
  <section class="customer-logos slider">
   <?php for ($i=0; $i<count($response['urlToImage']) ; $i++) 
      { 
      ?>
      <div class="slide">

        <img src="<?php echo $response['urlToImage'][$i]; ?>" 
        height=200px 
       width=200px>
      </div>
      <?php }?>

   </section>
  </body> 

以下所有脚本请检查哪个脚本造成问题

    <script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"> 
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick- 
    carousel/1.6.0/slick.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/slick- 
    carousel/1.6.0/slick.min.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/slick- 
    carousel/1.6.0/slick-theme.min.css" rel="stylesheet" />

     <script type="text/javascript">
    $(document).ready(function(){
        $('.customer-logos').slick({
        slidesToShow: 6,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 1500,
        arrows: false,
        dots: false,
        pauseOnHover: false,
        responsive: [{
            breakpoint: 768,
            settings: {
                slidesToShow: 4
            }
        }, {
            breakpoint: 520,
            settings: {
                slidesToShow: 3
            }
          }]
         });
       });
     </script>

    <script src="js/jquery.min.js"></script>
    <script src="libs/bootstrap/js/bootstrap.min.js"></script>
    <script src="js/wow.min.js"></script>
    <script src="js/owl.carousel.js"></script>
    <script src="js/smoothscroll.js"></script>
    <script src="js/script.js"></script>
    <script src="vendor/jquery.2.2.3.min.js"></script>
    <script src="vendor/owl-carousel/owl.carousel.min.js"></script>
    <script type="text/javascript" src="vendor/fancybox/dist/jquery.fancybox.min.js"></script>
    <script src="js/1/theme.js"></script>

<script src="js/particles.min.js"></script>
<script src="js/particles.js"></script>`

【问题讨论】:

    标签: php jquery slider slick.js


    【解决方案1】:

    页面加载三个 jquery 脚本和两个 owl carousel 脚本。这不好。 只留下一个 jquery 和一个 owl。 P.s slick 必须在 jquery 之后加载

    【讨论】:

      猜你喜欢
      • 2013-08-26
      • 2021-02-27
      • 2021-05-24
      • 1970-01-01
      • 1970-01-01
      • 2011-11-05
      • 1970-01-01
      • 2017-07-17
      • 1970-01-01
      相关资源
      最近更新 更多