I've recently tried to set up a idangero.us Swiper feature on my site. Unfortunately, it doesn't seem to be working. My experience with JS is very limited so I'm at a complete loss on how to fix this.

The error I receive is Uncaught ReferenceError: Swiper is not defined

Thank you for any help you can give.
http://www.hollywoodfeed.com/pages/catalog-page-1

My HTML is

<!-- Swiper -->

<style>

.swiper-container{

width:100%;

height:auto;

margin:20px auto;

}

.swiper-slide{     

text-align:center;

font-size:18px;

background:#fff;

line-height:300px;

}

</style>



<div class=swiper-container>

<div class=swiper-wrapper>

<div class=swiper-slide>Slide 1</div>

<div class=swiper-slide>Slide 2</div>

<div class=swiper-slide>Slide 3</div>

<div class=swiper-slide>Slide 4</div>

<div class=swiper-slide>Slide 5</div>

<div class=swiper-slide>Slide 6</div>

<div class=swiper-slide>Slide 7</div>

<div class=swiper-slide>Slide 8</div>

<div class=swiper-slide>Slide 9</div>

<div class=swiper-slide>Slide 10</div>

</div>



<div class=swiper-pagination></div>



<div class=swiper-button-next></div>

<div class=swiper-button-prev></div>

</div>

JS

<!-- Swiper Include Files -->

<script>  {{ 'swiper.min.js' | asset_url }}</script>



<script>

  var swiper;

  $(document).ready(function () {

var swiper = new Swiper('.swiper-container', {

    nextButton: '.swiper-button-next',

    prevButton: '.swiper-button-prev',

    pagination: '.swiper-pagination',

    paginationType: 'fraction'

})

});

</script>