質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.47%

  • jQuery

    6920questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

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

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 510

natipiii

score 2

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>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

+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 23:47

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

    キャンセル

  • 2018/06/23 00:17 編集

    早速の回答ありがとうございます!
    目印…というのは例えば何をあげればわかるのでしょうか?すみません。
    フォントファイルのパスなのですが、ファイルはDドライブの【更新用データ】の中の【slick】フォルダの中の【fonts】の中にあります。
    ↑上記の場合、パスは'../slick/fonts/各名前'ではないのでしょうか?

    また、chromeで見て右クリック【検証】というところを押せばよいですか?

    たくさん質問して申し訳ないです。

    キャンセル

関連した質問

同じタグがついた質問を見る

  • jQuery

    6920questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。