jQuery slider is not moving divs

console.log("slider code loaded")
 jQuery('.slider').bxSlider({
  autoControls: true,
  auto: true,
  pager: true,
  slideWidth: 600,
  mode: 'fade',
  captions: true,
  speed: 1000
});

(function($) {
  $.fn.slider = function(options) {
    // default settings
    var settings = $.extend({
      speed: 1000,
      pause: 3000
    }, options);
    var slider = this;
    var slides = slider.find('.slide');
    var currentSlide = 0;
    // show first slide
    jQuery(slides[currentSlide]).fadeIn(settings.speed);
    // loop through slides
    setInterval(function() {
      // hide current slide
      jQuery(slides[currentSlide]).fadeOut(settings.speed);
      // move to next slide
      currentSlide++;
      if (currentSlide >= slides.length) {
        currentSlide = 0;
      }
      // show next slide
      jQuery(slides[currentSlide]).fadeIn(settings.speed);
    }, settings.pause);
    return this;
  };
}(jQuery));

<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script "text/javascript" src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<!-- Load jQuery -->
<script src="js/jquery.min.js"></script>

<!-- Load slider script with jQuery as dependency -->
<script src="js/jquery-slider.js"></script>
<!-- Load CSS file -->
<link rel="stylesheet" href="css/jquery-slider.css">

<div class="slider">
    <h2>Slide One</h2>
    <h2>Slide Two</h2>
    <h2>Slide Three</h2>
</div>