JS Slides…HELP

I am trying to add JS Slides to my Sidebar post as it would reduce the need for a large sidebar and would create and very effective News slider.

I have added the basic

<script type='text/javascript' src='http://www.cals.wisc.edu/wp-content/themes/cals/library/scripts</script>/js/slides.min.jquery.js?ver=3.2.1'>

<div id="slides">
  <div class="slides_container">
    <div>
      <h1>Slide 1</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div>
      <h1>Slide 2</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div>
      <h1>Slide 3</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div>
      <h1>Slide 4</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>
</div>

to the sidebar and then I added

<script src="<?php bloginfo('template_url'); ?>/tools/js/dropdown.js" type="text/javascript"></script>

<style type="text/css" media="screen">
  .slides_container {
    width:470px;
    height:170px;
  }
  .slides_container div {
    width:470px;
    height:170px;
    display:block;
  }
</style>	

<script>
  $(function(){
    $("#slides").slides();
  });
</script>

to the foot.php

I am wondering where am I going wrong in this and what do I need to fix?