何度も質問してすみません。
先ほどの質問からかなり進展してはいるのですがどうしても.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度目の投稿の上長くなってしまい申し訳ございませんが、質問するに対し至らない点が多いかと思いますがわかる方がいらっしゃいましたらどうかよろしくお願い致します。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/04/25 00:35