カルーセル表示？スライドショー

前提・実現したいこと

ホームページを作成中の初心者です。
まだ初めて１か月ほど

現在ホームページのメイン画像をスライドショーにするため奮闘しているのですが・・・

※直接style書いていますが本当は外部にファイルを作り読み込む形にしたいのですが動作がしなかかった為、まずは動作するかを確認出来る様にするために直接書き込んでいます。

説明不足で読みにくいま又は分かりにくくすみません。

イメージは
１番目の画像（配置：左端にて画像の右端２０％程度を表示/半透明）
２番目の画像（配置：中央に全体表示）
３番目の画像（配置：右端にて画像の左端２０％程度を表示/半透明）

数秒後

２番目の画像（配置：左端にて画像の右端２０％程度を表示/半透明）
３番目の画像（配置：中央に全体表示）
４番目の画像（配置：右端にて画像の左端２０％程度を表示/半透明）

発生している問題・エラーメッセージ

エラーというよりも
どこのサイトを調べても画像＋リンクに飛ぶような仕様になっていて、
画像のみを掲載するような形になっておらず・・・
リンク形式のコード？を自分の知識なりにフォルダー内の画像を読みに行くように
書き換えたのですが当然スライドショーは実行されず
ただ画像が上から順番に並んでいる形になっています

該当のソースコード

<!doctype html>
<html lang="ja">
 <head>
  <meta charest="utf-8">
  <meta name="author" content="サイト運営者">
  <mata name="ページ説明">
  <mata name="keywords"content="キーワード1,キーワード2,キーワード3,キーワード4">
  <link rel="stylesheet" href="style-nav.css">
  <link rel="stylesheet" href="style-froat.css">
  <link rel="stylesheet" type="text/css" href="slick.css">
  <link rel="stylesheet" type="text/css" href="slick-theme.css">
  <script type="text/javascript" src="jquery.min.js"  ></script>
  <script type="text/javascript" src="slick.min.js"></script>
　・
　・(省略)
　・
<div class="slider" id="slider">
        <script>
         $("document").ready(function(){
         $('.mypattern').slick({
         autoplay: true,
         autoplaySpeed: 2500,
         speed: 800,
         dots: true,
         arrows: false,
         centerMode: true,
         centerPadding: '20%'
         });
         }); 
         </script>
         <style>
         * {
         margin: 0;
         padding: 20%;
         }
         .slider {
         width: 90%;
         margin: 0 auto 80px;
         }
         .slick-slide img {
         width: 100%;
         height: auto;
         }
         .mypattern{
         width: 100%;
         }
         .mypattern .slick-slide{
         margin: 5px;
         }
         </style>
        <div class="content">
         <ul class="slider mypattern">
          <li><img src="images/demo1.jpg"></li>
          <li><img src="images/demo2.jpg"></li>
          <li><img src="images/demo3.jpg"></li>
          <li><img src="images/demo4.jpg"></li>
          <li><img src="images/demo5.jpg"></li>
          <li><img src="images/demo6.jpg"></li>
          <li><img src="images/demo7.jpg"></li>
         </ul>
        </div>
       </div>
・
・
・(省略)

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

m.ts10806

2018/05/14 08:17

質問編集画面タイトル横にある「初心者アイコン」をご活用ください。「初心者」と質問で書くよりも伝わりますし、質問一覧に表示されるのでわかりやすくなります。プログラムコード(およびエラーメッセージ)は```で囲ってください。（わからなければ質問編集画面でコード部分を選択し<code>ボタンを押してください）正しく反映されているかどうかは質問編集画面のプレビューを見ながら編集していってください。