CODEWITHSUNDEEP
javascriptjquerycarousel
samantha
samantha

Reputation: 45

how to solve Slick carousel jquery conflict issue?

I tried the Slick carousel only with foundation and it works. But when I integrate with my MVC framework, just doesn't work. Basically there are more than one javascript plugin I'm using on the front end. SO I believe it's due to jquery conflict.

My script which I placed before </body> tag

</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 placed in the header but it doesn't seem to give any effect bbut thats not a problem now.

<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

I refered to Slick Carousel Not Working.. But I dont get it.

Help is badly needed.Thanks all.

EDITED I added 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>

Now the Slick works but banner plugin doesnt. It's because I uncomented 

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

Can anyone tell me how do I solve this conflict?

Upvotes: 1

Views: 5961

Answers (1)

Jamie337nichols
Jamie337nichols

Reputation: 157

var jq = jQuery.noConflict(); is what you need. You'll need to replace either $ or jQuery in the Afflicted plugins. Make sure not to use the same variable name in either.

Upvotes: 2

Related Questions