javascript - 如何解决 Slick carousel jquery 冲突问题？

Question

我尝试了 Slick carousel只有基础和它的工作原理。但是当我与我的 MVC 框架集成时，它就不起作用了。基本上，我在前端使用的 javascript 插件不止一个。所以我认为这是由于 jquery 冲突。

我放在</body>之前的脚本标签

</script>
    <!--<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>-->(I have to comment this otherwise the another banner plugin doesnt work)
        <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.0/highlight.min.js"></script>
        <script type="text/javascript" src="<?php echo $data['config']['THEME_DIR']; ?>/js/slick.js"></script>
        <script type="text/javascript" src="<?php echo $data['config']['THEME_DIR']; ?>/js/script.js"></script>

CSS 放在标题中，但它似乎没有任何效果，但现在这不是问题。

<link href="<?php echo $data['config']['THEME_DIR']; ?>/css/foundation/slick.css" rel="stylesheet" type="text/css" />

HTML

<section id="features" class="blue">
            <div class="content">


                <h2>Autoplay</h2>
                <div class="slider autoplay">
                    <div><h3>1</h3></div>
                    <div><h3>2</h3></div>
                    <div><h3>3</h3></div>
                    <div><h3>4</h3></div>
                    <div><h3>5</h3></div>
                    <div><h3>6</h3></div>
                </div>

            </div>
        </section

我引用了 Slick Carousel Not Working .. 但我不明白。

急需帮助。谢谢大家。

已编辑 我添加了 http:

<script src="**http:**//code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="**http:**//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
        <script src="**http:**//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.0/highlight.min.js"></script>
        <script type="text/javascript" src="<?php echo $data['config']['THEME_DIR']; ?>/js/slick.js"></script>
        <script type="text/javascript" src="<?php echo $data['config']['THEME_DIR']; ?>/js/script.js"></script>

现在 Slick 可以工作，但横幅插件不能。这是因为我没有评论

<script src="**http:**//code.jquery.com/jquery-1.11.0.min.js"></script>

谁能告诉我如何解决这个冲突？

Answer 1

var jq = jQuery.noConflict(); 是您所需要的。 您需要替换 Afflicted 插件中的 $ 或 jQuery。确保不要在两者中使用相同的变量名。