slickのサムネイル付スライダーの文字化け

lQuery初心者のものです。

サムネイル付きスライダーをホームページへ入れたくて
新規の秀丸エディタで一番下のコードをいれると
画像のようにサムネイル部分の幅が合いませんでした。

そこでホームページ上のあらかじめ業者さんが作ってくれているページの中に
コードを入れると今度は幅は合いましたがサムネイル部分の矢印が文字化けのようになりました。

悪戦苦闘しています。。
お力を貸してください

html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<title>sample2</title>
<link rel="stylesheet" href="../slick/slick-theme.css">
<link rel="stylesheet" href="../slick/slick.css">

<style type="text/css">
h2 {
	margin: 20px 0;
	padding:20px 10px 10px;
	font-size: 18px;
	font-weight: bold;
	border-top:1px #ccc solid;
}
.slider {
	margin: 0 0 50px;
}
.slider img {
	width: 100%;
	height: auto;
}
.single-item {
	max-width: 600px;
	margin: 0 auto 50px;
}
.slick-prev::before, .slick-next::before {
	font-size: 24px;
}
.lazy-item .slick-next,
.thumb-item-nav .slick-next,
.multiple-item .slick-next,
.center-item .slick-next {
	right: 20px;
	z-index: 99;
}
.lazy-item .slick-prev,
.thumb-item-nav .slick-prev,
.multiple-item .slick-prev,
.center-item .slick-prev {
	left: 15px;
	z-index: 100;
}
.single-item .slick-prev::before,
.single-item .slick-next::before {
	color: #666;
}
.slick-dots {
	bottom:-25px;
}
.multiple-item li {
	margin: 0 5px;
}
.thumb-item {
	max-width: 700px;
	margin: 0 auto 5px;
	padding: 0 5px;
}
.thumb-item-nav {
	max-width: 700px;
	margin: 0 auto;
}
.thumb-item-nav li{
	margin: 5px;
}
.lazy-item {
	width: 400px;
	margin: 0 auto 50px;
}
.lazy-item li {
	margin: 0 5px;
}
</style>
</head>
<body>
<article>
<section>
<ul class="slider thumb-item">
		<li><img src="../cp/images/01.jpg" alt=""></li>
		<li><img src="../cp/images/02.jpg" alt=""></li>
		<li><img src="../cp/images/01.jpg" alt=""></li>
		<li><img src="../cp/images/02.jpg" alt=""></li>
	        <li><img src="../cp/images/01.jpg" alt=""></li>
	</ul>
	<ul class="slider thumb-item-nav">
		<li><img src="../cp/images/01.jpg" alt=""></li>
		<li><img src="../cp/images/02.jpg" alt=""></li>
		<li><img src="../cp/images/01.jpg" alt=""></li>
		<li><img src="../cp/images/02.jpg" alt=""></li>
		<li><img src="../cp/images/01.jpg" alt=""></li>
	</ul>

	</section>
</article>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="../slick/slick.min.js"></script>
<script>
$(function() {
     $('.thumb-item').slick({
          infinite: true,
          slidesToShow: 1,
          slidesToScroll: 1,
          arrows: false,
          fade: true,
          asNavFor: '.thumb-item-nav' //サムネイルのクラス名
     });
     $('.thumb-item-nav').slick({
          infinite: true,
          slidesToShow: 4,
          slidesToScroll: 1,
          asNavFor: '.thumb-item', //スライダー本体のクラス名
          focusOnSelect: true,
     });
});

</script>
</body>
</html>

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

回答1件

画像じゃ全然わかんなかったんで、目印かなんかほしいですね・・・
そして説明には何も書いてありませんがなんとなく察して
スライダーライブラリ「slick」のcssのコードを見ましたが左右マークはフォントファイルやsvgファイルを参照してますね。これが未配置なのでは・・・？
該当フォントファイル参照部分
https://github.com/kenwheeler/slick/blob/master/slick/slick-theme.css#L16

多分これらのフォントファイルを配置していないから未配置orパスがおかしくて参照できていないのかと
https://github.com/kenwheeler/slick/tree/master/slick/fonts

投稿2018/06/22 14:33

sagami1991

総合スコア216

sagami1991

2018/06/22 14:47

ちなみに参照先が存在しない場合、例えばchromeなら開発者ツールのコンソールにエラーでるのですぐ気づけます。

natipiii

2018/06/22 15:18 編集

早速の回答ありがとうございます！目印…というのは例えば何をあげればわかるのでしょうか？すみません。フォントファイルのパスなのですが、ファイルはDドライブの【更新用データ】の中の【slick】フォルダの中の【fonts】の中にあります。 ↑上記の場合、パスは'../slick/fonts/各名前'ではないのでしょうか？また、chromeで見て右クリック【検証】というところを押せばよいですか？たくさん質問して申し訳ないです。

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