jQueryを使って画像のスライダーを実装する方法をまとめておきます.
シュッとスライドするのではなく, ジワーっと消えていくスライダーを作っていきます.(こういうやつ→http://pas-pol.jp/)

①『FlexSlider』の導入

基本的にはこちらのサイトに従って行います.→ https://on-ze.com/archives/409
htmlの記述に関しては, 次に紹介するように変更します.

② htmlの記述 

冒頭で紹介したサイトのようなスライダーを実装するためには, htmlを次のように記述します.

     <div class="metaslider metaslider-flex metaslider ml-slider nav-hidden">
          <div id="metaslider_container">
              <div id="metaslider">
                  <ul class="slides">
                      <li><img src="image.jpg" class="slider" /></li>
                      <li><img src="image.jpg" class="slider" /></li>
                      <li><img src="image.jpg" class="slider" /></li>
                      <li><img src="image.jpg" class="slider" /></li>
                      <li><img src="image.jpg" class="slider" /></li>
                  </ul>
              </div>
            <div>
     </div>

③ jQueryへの記述

最後にjQueryを記述したらおしまいです.

var metaslider = function($) {
        $('#metaslider').addClass('flexslider'); // theme/plugin conflict avoidance
        $('#metaslider').flexslider({ 
            slideshowSpeed:5000,
            animation:"fade",
            controlNav:false,
            directionNav:false,
            pauseOnHover:false,
            direction:"horizontal",
            reverse:false,
            animationSpeed:1500,
            prevText:"<",
            nextText:">",
            slideshow:true
        });
    };
    var timer_metaslider = function() {
        var slider = !window.jQuery ? window.setTimeout(timer_metaslider, 100) : !jQuery.isReady ? window.setTimeout(timer_metaslider, 1) : metaslider(window.jQuery);
    };
    timer_metaslider();