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

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

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

4633閲覧

slickがカルーセルになってくれない

ebifurai55

総合スコア35

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2018/05/10 21:45

編集2018/05/17 11:26

slickのスライダーの話しです。ホームページを見て色々と設置してるのですが、最終的に矢印が表示されないとなっています。

以下に上げるコードは間違ってますでしょうか?Slickを実際に設置されてる方、教えて頂けないでしょうか?よろしくおねがいします

あと、矢印をFontawesomeで変えるのにはどうしたらいいでしょうか?

Javscript

1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 3<html> 4<head> 5 <title>Untitled</title> 6 <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" /> 7 <link rel="stylesheet" type="text/css" href="slick/slick.css" media="screen" /> 8 <link rel="stylesheet" type="text/css" href="slick/slick-theme.css" media="screen" /> 9 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 10 <script src="slick/slick.min.js"></script> 11 <script> 12 $(document).ready(function(){ 13 $('.your-class').slick({ 14 arrows: true 15 }); 16 }); 17 </script> 18</head> 19 20<body> 21 <div class="your-class"> 22 <div>コンテンツ1</div> 23 <div>コンテンツ2</div> 24 <div>コンテンツ3</div> 25 </div> 26 27</body> 28</html>

イメージ説明

こんな風に文字化けします。何故でしょう?

イメージ説明

もう一つ追加します。開発コンソールを見るとContentが文字化けしています。
ここを直せば直るのですが、本体のCSSでいくら"●”を追加しても結局文字化け
してしまいます。

EmEditorでの文字コードの保存を添付します。

イメージ説明
イメージ説明

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

ブラウザ開発ツールのコンソールにエラー出てませんか?

例えば下記のような

GET ~~~~/slick/fonts/slick.woff 0 () GET ~~~~/slick/fonts/slick.ttf 0 ()

同コードでカルーセルにはなっていますが、「矢印が表示されない」のは
このfontsフォルダが適切に設置されていないからではないでしょうか?

Font Awesomeの導入方法自体は調べてもらうとして、
矢印部分をカスタマイズするオプションがあるので、そちらを修正すれば良いです。

prevArrow,nextArrow

投稿2018/05/11 00:27

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ebifurai55

2018/05/11 00:40

Chromeのコンソールに以下のように書いてました slick.min.js:7 Uncaught SyntaxError: Unexpected token < index.html:13 Uncaught TypeError: $(...).slick is not a function at HTMLDocument.<anonymous> (index.html:13) at i (jquery.min.js:2) at Object.fireWith [as resolveWith] (jquery.min.js:2) at Function.ready (jquery.min.js:2) at HTMLDocument.J (jquery.min.js:2) デバックツールを入れてないのはあれですが、今度から デバッグツールを入れようと思います。 今日は昼休みまで暇がないので後で検証します。
m.ts10806

2018/05/11 00:49 編集

ん。 slick()という関数が見つからないってことは、 slick/slick.min.js のパスが間違ってるんじゃないですかね。それかファイルがそこに存在しないか。 「ソースを表示」からリンク辿れます?URLに直打ちでも良いですが。 cssの方も確認しておいてください。
m.ts10806

2018/05/11 00:50 編集

javascriptは別にデバッグツールを入れる必要はないです。 開発ツールのコンソールに出力されますし、変数確認などであればconsole.log()で充分です。 いずれにしてもパスが間違っているのは拾えないですね。画像であればエラーが出ますが。
ebifurai55

2018/05/11 02:57

slick/slick.min.jsはあります。リンクからたどれます。 あとどういった可能性があります?
m.ts10806

2018/05/11 03:24

プラグイン導入で~~ is not a functionのようなエラーが出る際はプラグインが正しく読み込めていない以外の原因はありません。 エラー1行目が原因としてはありそうですね。 > slick.min.js:7 Uncaught SyntaxError: Unexpected token < ファイル内でJavaScriptの文法エラーが出ています。何か手を加えたりしましたでしょうか? ひとまずプラグインのファイル本体を公式からダウンロードしなおして再設置されては?まずはminではない方を試してみてください。
ebifurai55

2018/05/15 12:44

なんかSlick自体、ファイルが404Not foundだし、カルーセルにもならないし、これを続けて行くのはちょっと考えた方が良いような気がしました。BxSliderの方は動いたのでこっちをメインに使います。
Bonito_Bonito

2018/05/15 17:30 編集

mts10806 さんの >プラグイン導入で~~ is not a functionのようなエラーが出る際はプラグインが正しく読み込めていない... の指摘のとおり、slick.min.jsに原因がありそうですね。 <script src="slick/slick.min.js"></script> を <script type="text/javascript" src="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> に変えてみて下さい。 それで動く様であればファイルの読み込みに失敗していますね。 ※一応、上記を試す際に、CSSの方もjsDelivrのCDNに置き換えた方が良いかもです。 ディレクトリ絡みでパスが繋がっていないかもなので。 <link rel="stylesheet" type="text/css" href="slick/slick.css" media="screen" /> <link rel="stylesheet" type="text/css" href="slick/slick-theme.css" media="screen" /> についても、 <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/> にして検証してみると良いです。
Bonito_Bonito

2018/05/15 17:25

あと、本件とは全く関係はありませんが、ドキュメントタイプの宣言( <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> )がありますが、HTML 4はもう推奨されていないのでHTML5で制作されることをおすすめしますよ。 ( GoogleもHTML5を使用するように言ってます。-> https://google.github.io/styleguide/htmlcssguide.html#Document_Type
m.ts10806

2018/05/15 21:14

補足ありがとうございます。
ebifurai55

2018/05/17 10:36

導入はできたのですが、今度は●のドットが文字化けしています。 Slickのドットはどこで指定していますかね?
m.ts10806

2018/05/17 11:05

文字化けとはどういう風になっているのでしょうか。画像添付できますか? ものによっては文字化けではないかもしれません。
m.ts10806

2018/05/17 11:08

ブラウザ開発ツールで確認してみると分かりますが、cssのafter疑似要素で指定されています。 単なる記号の●なので化けようがない気もします。 全角なので文字コードの可能性がないわけではないですが、slick自体はUTF8なので、文字化けしているとしたら原因html側ですね。
ebifurai55

2018/05/17 11:16

本文に画像を投稿しました
m.ts10806

2018/05/17 11:20

htmlのファイルがutf8になっているか確認し、なっていない場合は変更してheadに下記を入れてください。 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
ebifurai55

2018/05/17 11:28

治りました。ありがとうございます。
m.ts10806

2018/05/17 11:42

解決できたようで何よりです。 html5記述はご検討ください。 またChromeの場合はhttpsでないと警告がでるようになったので その辺は確かにあるかもしれませんね。 (CDNでなく自サーバーに置いた方が軽量にはなります)
ebifurai55

2018/05/17 11:49

別案件で質問するかもしれないのでよろしくお願いします。 将来はWebディレクターになりたいので
m.ts10806

2018/05/17 11:52

私はプログラミングメインなのでお力になれるかどうか分かりませんが、 分かる範囲であれば回答させていただきます。
guest

0

JQUERYスクリプトを使うときのCDNのURL指定は”https://”を入れたほうが良い。

文字化けする時はHTMLの文字コードを<meta>で指定する

投稿2018/05/17 11:39

ebifurai55

総合スコア35

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問