如何解决Slick carousel jquery冲突问题?

时间:2014-12-26 06:48:31

标签: javascript jquery carousel

我只用基础尝试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放在标题中,但它似乎没有任何效果bbut现在不是问题。

<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 .. 但我不明白。

迫切需要帮助。谢谢。

EDITED 我添加了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>

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

1 个答案:

答案 0 :(得分:2)

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