スライダーができなくて困っています。

前提・実現したいこと

こちらのサイトに掲載されたスライダーを作成しようとしているのですが、画像が縦に並ぶだけでスライダーとしての見た目をしておらず困っています。

そのページではコピペでできるカスタム方法を載せていますが別記事にあるこちらから試しましたがうまくいきませんでした。

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

このように縦に並んでしまいます。

こんな感じにしたいです。

該当のソースコード

サイトのコピペになりますが打ち込んだコード

<head>
<!-- cssファイル -->
<link rel="stylesheet" href="https://www.(ファイル保管場所)/style.css" media="all"><!--slider以外の個所のcss-->
<link rel="stylesheet" type="text/css" href="https://www.(ファイル保管場所)/slick.css">
<link rel="stylesheet" type="text/css" href="https://www.(ファイル保管場所)/slick-theme.css">
<script type="text/javascript" src="https://www.(ファイル保管場所)/slick.min.js"></script>
<script src="https://www.(ファイル保管場所)/jquery-1.10.2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<!--  ここからスライダー
　　　　******************-->
<script>
$("document").ready(function(){
  $('.mypattern').slick({
    autoplay: true,
    autoplaySpeed: 2500,
    speed: 800,
    dots: true,
    arrows: false,
    centerMode: true,
    centerPadding: '10%'
  });
}); 
</script>
 
<style>
  * {
    margin: 0;
    padding: 0;
  }
  .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">
  <div class="slider mypattern">
    <div><a href="#"><img src="https://www.(ファイル保管場所)/test1.png"></a></div>
    <div><a href="#"><img src="https://www.(ファイル保管場所)/test2.png"></a></div>
    <div><a href="#"><img src="https://www.(ファイル保管場所)/test3.png"></a></div>
    <div><a href="#"><img src="https://www.(ファイル保管場所)/test4.png"></a></div>
  </div>
</div>

試したこと

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは。

以下のことを試してみてください

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>の削除
<script type="text/javascript" src="https://www.(ファイル保管場所)/slick.min.js"></script>を<script src="https://www.(ファイル保管場所)/jquery-1.10.2.min.js"></script>の後に置く

投稿2020/11/20 06:47