前提・実現したいこと
最近JSを取り入れたプログラムを使用したサイトを作り始めました。
フリー配布のカードデザインを画像や色を少し変更しサイトへ張り付けたところ
うまく機能しませんでした。JSをきちんと読み込んでいないのかなあとおもいHTMLに直接記述したのですがだめでした。
「codepen」にのっているプログラムを、どこかにコピペするとかではなくそのまま触り自分のサイト用に改良し(この時点のcodepenプレビューではうまく動作していました)そのままサイトのhtml/css/jsの場所に入れ確認したら動作していませんでした。
わかりにくい文章かもしれませんが何か原因がわかる方、確認するべき場所など教えてください。
発生している問題・エラーメッセージ
エラーメッセージ
HTML
<div class="shop-card"> <div class="title"> Nike Metcon 2 </div> <div class="desc"> Men's training shoe </div> <div class="slider"> <figure data-color="#8db7ce, #8db7ce"> <img src="https://www.rakuten.ne.jp/gold/ryobu/fuzita/page/top/case/2.png" > </figure> <figure data-color="#deb9bc, #deb9bc"> <img src="https://www.rakuten.ne.jp/gold/ryobu/fuzita/page/top/case/3.png" /> </figure> <figure data-color="#8589a7, #8589a7"> <img src="https://www.rakuten.ne.jp/gold/ryobu/fuzita/page/top/case/4.png" /> </figure> <figure data-color="#2d798c, #2d798c"> <img src="https://www.rakuten.ne.jp/gold/ryobu/fuzita/page/top/case/9.png"> </figure> <figure data-color="#3f3f3f, #3f3f3f"> <img src="https://www.rakuten.ne.jp/gold/ryobu/fuzita/page/top/case/8.png" > </figure> </div> <div class="cta"> <div class="price">¥1,280-</div> <a href=""><button class="btn">商品ページへ<span class="bg"></span></button></a> </div> </div> <div class="bg"></div>
CSS
/*-------------------- Mixins ---------------------*/ @mixin center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /*-------------------- Body ---------------------*/ *, *::before, *::after { box-sizing: border-box; } body, html { height: 50%; font-family: 'Open Sans Condensed', sans-serif; } body { } /*-------------------- Shop Card ---------------------*/ .shop-card { @include center; width: 350px; background: #f5f5f5; box-shadow: 0 10px 20px rgba(0,0,0,.3); overflow: hidden; border-radius: 5px; padding: 25px; text-align: center; z-index: 2; figure { margin: 0; padding: 0; overflow: hidden; outline: none!important; & img { margin: 0px 0 0px; width: 100%; } } .title { font-weight: 900; text-transform: uppercase; font-size: 30px; color: #23211f; margin-bottom: 5px; } .desc { font-size: 17px; opacity: .8; margin-bottom: 3px; } .cta { padding: 20px 20px 5px; &::after { content: ''; display: table; clear: both; } } .price { float: left; color: #FF3100; font-size: 22px; font-weight: 900; padding-top: 2px; transition: color .3s ease-in-out; margin-top: 4px; } .btn { position: relative; z-index: 1; float: right; display: inline-block; font-size: 13px; font-weight: 900; text-transform: uppercase; color: #FF3100; padding: 12px 18px; cursor: pointer; transition: all .3s ease-in-out; line-height: .95; border: none; background: none; outline: none; border: 1px solid #FF3100; border-radius: 20px; overflow: hidden; & .bg { width: 101%; height: 101%; display: block!important; z-index: -1; opacity: 0; transition: all .3s ease-in-out; background: linear-gradient(135deg, #a61322, #d33f34); } &:hover { color: #fff!important; border: 1px solid transparent!important; & .bg { opacity: 1; } } } } /*-------------------- Slick Dots ---------------------*/ .slick-dots { bottom: -30px; a { position: relative; display: block; width: 16px; height: 16px; } span { @include center; width: 6px; height: 6px; border-radius: 50%; } circle { fill: none; stroke-width: 1; stroke-linecap: round; stroke-dasharray: 39 39; stroke-dashoffset: 39; transition: all .9s ease-in-out; transition: stroke-dashoffset 0.5s; } .slick-active circle { stroke-dashoffset: 0; } } /*-------------------- Background --------------------*/ .bg { @include center; width: 100%; height: 100%; background: linear-gradient(15deg, #d33f34 50%, #a61322 50.1%); z-index: 1; display: none; } .the-most { position: fixed; z-index: 1; bottom: 0; left: 0; width: 50vw; max-width: 200px; padding: 10px; img { max-width: 100%; } }
JS
function background(c1, c2) { return { } } function changeBg(c1, c2) { $('div.bg').css(background(c1, c2)).fadeIn(0, function() { $('.bg').hide(); }) $('span.bg').css({ }); } $slider = $('.slider'); $slider.slick({ arrows: false, dots: true, infinite: true, speed: 600, fade: true, focusOnSelect: true, customPaging: function(slider, i) { var color = $(slider.$slides[i]).data('color').split(',')[1]; 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>'; } }).on('beforeChange', function(event, slick, currentSlide, nextSlide) { colors = $('figure', $slider).eq(nextSlide).data('color').split(','); color1 = colors[0]; color2 = colors[1]; $('.price, .btn').css({ color: color1 }); changeBg(color1, color2); $('.btn').css({ borderColor: color2 }); });
試したこと
JSをHTML内に直接記述
補足情報(FW/ツールのバージョンなど)
回答2件
あなたの回答
tips
プレビュー