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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

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

CSS

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

Q&A

解決済

1回答

2243閲覧

.jsのslickを読み込んでくれず困っています。

ryobu

総合スコア15

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

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

CSS

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

0グッド

1クリップ

投稿2019/04/24 07:45

何度も質問してすみません。
先ほどの質問からかなり進展してはいるのですがどうしても.jsファイルを完全に読み込んでくれず困っています。
行おうとしているプログラムの元はここから内容を書き換えコピーしています。元プログラム
SCSSをCSSに変換済、jQueryを読み込み済ですがslickだけ読み込んでくれません。
WEBソースからURLでもダメ、ダウンロードして外部ファイルにしてもダメです。

.jsファイルで使用しているコードです。

js

1 2 3 4function background(c1, c2) { 5 return { 6 } 7} 8 9function changeBg(c1, c2) { 10 $('div.bg').css(background(c1, c2)).fadeIn(0, function() { 11 $('body').css(background(c1, c2)); 12 $('.bg').hide(); 13 }) 14 $('span.bg').css({ 15 background: '-moz-linear-gradient(135deg, ' + c1 + ', ' + c2 + ')', 16 background: '-o-linear-gradient(135deg, ' + c1 + ', ' + c2 + ')', 17 background: '-webkit-linear-gradient(135deg, ' + c1 + ', ' + c2 + ')', 18 background: '-ms-linear-gradient(135deg, ' + c1 + ', ' + c2 + ')', 19 background: 'linear-gradient(135deg, ' + c1 + ',' + c2 + ')' 20 }); 21} 22 23$slider = $('.slider'); 24 25$slider.slick({ 26 arrows: false, 27 dots: true, 28 infinite: true, 29 speed: 600, 30 fade: true, 31 focusOnSelect: true, 32 customPaging: function(slider, i) { 33 var color = $(slider.$slides[i]).data('color').split(',')[1]; 34 return '<a><svg width="100%" height="100%" viewBox="0 0 16 16"><circle cx="8" cy="8" r="6.215" stroke="' + color + '"></circle></svg><span style="background:' + color + '"></span></a>'; 35 } 36}).on('beforeChange', function(event, slick, currentSlide, nextSlide) { 37 colors = $('figure', $slider).eq(nextSlide).data('color').split(','); 38 color1 = colors[0]; 39 color2 = colors[1]; 40 $('.price, .btn').css({ 41 color: color1 42 }); 43 changeBg(color1, color2); 44 $('.btn').css({ 45 borderColor: color2 46 }); 47});

.jsファイルに alert('OK'); で確認したところ、$slider = $('.slider');以降に問題があるようでした。(それより上は読み込む)

<head></head>内には

html

1<head> 2<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.0.min.js"></script> 3<script src="slick.min.js(格納先URL)"></script> 4<script type="text/javascript" src="JS格納先URL"></script> 5<link rel="stylesheet" type="text/css" href="CSS格納先URL"/> 6</head>

をいれています。

使用しているHTML/CSSも添付致します。宜しくお願い致します。

html

1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="EUC-JP"> 5<meta name="viewport" content="width=device-width"> 6 7<title>テスト</title> 8<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" > 9 10<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.0.min.js"></script> 11<script src="slick.min.js(格納先URL)"></script> 12<script type="text/javascript" src="JS格納先URL"></script> 13<link rel="stylesheet" type="text/css" href="CSS格納先URL"/> 14 15</head> 16<body style="font-family: Yu Gothic;"> 17<CENTER> 18 19<!-- 20 21Follow me on 22Dribbble: https://dribbble.com/supahfunk 23Twitter: https://twitter.com/supahfunk 24Codepen: https://codepen.io/supah/ 25 26--> 27<div class="shop-card"> 28 <div class="title"> 29 Nike Metcon 2 30 </div> 31 <div class="desc"> 32 Men's training shoe 33 </div> 34 <div class="slider"> 35 <figure data-color="#8db7ce, #8db7ce"> 36 <img src="https://www.rakuten.ne.jp/gold/ryobu/fuzita/page/top/case/2.png" > 37 </figure> 38 <figure data-color="#deb9bc, #deb9bc"> 39 <img src="https://www.rakuten.ne.jp/gold/ryobu/fuzita/page/top/case/3.png" /> 40 </figure> 41 <figure data-color="#8589a7, #8589a7"> 42 <img src="https://www.rakuten.ne.jp/gold/ryobu/fuzita/page/top/case/4.png" /> 43 </figure> 44 <figure data-color="#2d798c, #2d798c"> 45 <img src="https://www.rakuten.ne.jp/gold/ryobu/fuzita/page/top/case/9.png"> 46 </figure> 47 <figure data-color="#3f3f3f, #3f3f3f"> 48 <img src="https://www.rakuten.ne.jp/gold/ryobu/fuzita/page/top/case/8.png" > 49 </figure> 50 51 </div> 52 53 <div class="cta"> 54 <div class="price">?1,280-</div> 55 <a href=""><button class="btn">商品ページへ<span class="bg"></span></button></a> 56 </div> 57</div> 58<div class="bg"></div> 59 60</CENTER> 61</body>

CSS

1@charset "EUC-JP"; 2 3/*-------------------- 4Mixins 5---------------------*/ 6/*-------------------- 7Body 8---------------------*/ 9*, 10*::before, 11*::after { 12 box-sizing: border-box; 13} 14 15body, 16html { 17 height: 100%; 18 font-family: "Open Sans Condensed", sans-serif; 19} 20 21/*-------------------- 22Shop Card 23---------------------*/ 24.shop-card { 25 position: absolute; 26 top: 50%; 27 left: 50%; 28 transform: translate(-50%, -50%); 29 width: 350px; 30 background: #f5f5f5; 31 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); 32 overflow: hidden; 33 border-radius: 5px; 34 padding: 25px; 35 text-align: center; 36 z-index: 2; 37} 38.shop-card figure { 39 margin: 0; 40 padding: 0; 41 overflow: hidden; 42 outline: none !important; 43} 44.shop-card figure img { 45 margin: -95px 0 -60px; 46 width: 100%; 47} 48.shop-card .title { 49 font-weight: 900; 50 text-transform: uppercase; 51 font-size: 30px; 52 color: #23211f; 53 margin-bottom: 5px; 54} 55.shop-card .desc { 56 font-size: 17px; 57 opacity: 0.8; 58 margin-bottom: 3px; 59} 60.shop-card .cta { 61 padding: 20px 20px 5px; 62} 63.shop-card .cta::after { 64 content: ""; 65 display: table; 66 clear: both; 67} 68.shop-card .price { 69 float: left; 70 color: #FF3100; 71 font-size: 22px; 72 font-weight: 900; 73 padding-top: 2px; 74 transition: color 0.3s ease-in-out; 75 margin-top: 4px; 76} 77.shop-card .btn { 78 position: relative; 79 z-index: 1; 80 float: right; 81 display: inline-block; 82 font-size: 13px; 83 font-weight: 900; 84 text-transform: uppercase; 85 color: #FF3100; 86 padding: 12px 18px; 87 cursor: pointer; 88 transition: all 0.3s ease-in-out; 89 line-height: 0.95; 90 border: none; 91 background: none; 92 outline: none; 93 border: 1px solid #FF3100; 94 border-radius: 20px; 95 overflow: hidden; 96} 97.shop-card .btn .bg { 98 width: 101%; 99 height: 101%; 100 display: block !important; 101 z-index: -1; 102 opacity: 0; 103 transition: all 0.3s ease-in-out; 104 background: linear-gradient(135deg, #a61322, #d33f34); 105} 106.shop-card .btn:hover { 107 color: #fff !important; 108 border: 1px solid transparent !important; 109} 110.shop-card .btn:hover .bg { 111 opacity: 1; 112} 113 114/*-------------------- 115Slick Dots 116---------------------*/ 117.slick-dots { 118 bottom: -30px; 119} 120.slick-dots a { 121 position: relative; 122 display: block; 123 width: 16px; 124 height: 16px; 125} 126.slick-dots span { 127 position: absolute; 128 top: 50%; 129 left: 50%; 130 transform: translate(-50%, -50%); 131 width: 6px; 132 height: 6px; 133 border-radius: 50%; 134} 135.slick-dots circle { 136 fill: none; 137 stroke-width: 1; 138 stroke-linecap: round; 139 stroke-dasharray: 39 39; 140 stroke-dashoffset: 39; 141 transition: all 0.9s ease-in-out; 142 transition: stroke-dashoffset 0.5s; 143} 144.slick-dots .slick-active circle { 145 stroke-dashoffset: 0; 146} 147 148/*-------------------- 149Background 150--------------------*/ 151.bg { 152 position: absolute; 153 top: 50%; 154 left: 50%; 155 transform: translate(-50%, -50%); 156 width: 100%; 157 height: 100%; 158 background: linear-gradient(15deg, #d33f34 50%, #a61322 50.1%); 159 z-index: 1; 160 display: none; 161} 162 163.the-most { 164 position: fixed; 165 z-index: 1; 166 bottom: 0; 167 left: 0; 168 width: 50vw; 169 max-width: 200px; 170 padding: 10px; 171} 172.the-most img { 173 max-width: 100%; 174}

どうしたら$slider = $('.slider');以降を読み込んでくれますでしょうか。
テスト先のページURLも添付致します。test

前回に回答してくださった皆様ありがとうございます。2度目の投稿の上長くなってしまい申し訳ございませんが、質問するに対し至らない点が多いかと思いますがわかる方がいらっしゃいましたらどうかよろしくお願い致します。

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

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

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

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

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

guest

回答1

0

ベストアンサー

公開されているテストファイルを見てみましたが、
エラーは出ていませんでした。なんでかなーと思ってよく見たら、
test.jsの中身がjQeuryの実行コードとして認識されていないため、無視されている状態でした。

test.jsの中身全てを、以下のjQuery実行用のコードの中に入れてください。(※スペルミス注意)
それでとりあえずslick自体は適用されるようになります。

JS

1$(function(){ 2 3//ここに今のJSコードを入れる 4 5});

ただし、スライダーのレイアウトとしては多分崩れているので、
ここからCSSを調整したりとかいろいろ先は長そうです。

jQueryの使い方の基礎が分かっていないようなので、
とりあえず小一時間グーグル先生に「jQueryとは」と尋ねてサラッと勉強してみてください。

投稿2019/04/24 08:06

aKusano

総合スコア3763

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

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

ryobu

2019/04/25 00:35

無事読み込んでくれました!記述のルールがよくわからないまま進めていたので丁寧に教えて頂けて助かりました。今から調べた後CSSで調整を行っていきます。もう一件の質問でもエラーの調べ方を教えて頂きありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問