Can't get JQuery plugin Slick (carousel) to work

Question

Here is my HTML header:

<!-- Bootstrap css -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- Jquery slick plugin -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
<link rel="stylesheet" type="text/css" href="cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css"/>

<!-- My CSS -->
<link href="css/styles.css" rel="stylesheet">

Here is part of my body where I'm trying to display the carousel also where my javascript stuff is loaded:

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div class="carousel">
                <div><img src="img/slide-1.jpg"></div>
                <div><img src="img/slide-2.jpg"></div>
            </div>
        </div>
    </div>
</div>

<!-- Bootstrap JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<!-- Bootstrap JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<!--Jquery Slick plugin -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"</script>

<!-- My JavaScript -->
<script src="js/scripts.js"></script>

<!-- My JQuery -->
<script src="js/jquery.js"></script>

And finally my jquery file:

$(document).ready(function(){
$('.carousel').slick({
    dots: true,
    infinite: true,
    speed: 300,
    slidesToShow: 2,
    slidesToScroll: 1
});
});

Been trying to figure this out for a while now so any help is much appreciated.

Answer 1

one small miss is there in the code, the bootstarp.min.js will require jquery.

You need to include jquery before boot strap.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Here is the plunker based on you

https://plnkr.co/edit/3NXz9Q69M3IxbTONg6n2?p=preview

Answer 2

Here is a fiddle that seems be working

https://jsfiddle.net/0p4fjskc/

You should include jquery fist !

<!-- Bootstrap JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<!-- Bootstrap JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>