締切済み

jQueryのSlickで矢印アイコンが出ない

2014/07/28 12:12

http://kenwheeler.github.io/slick/ 上記サイトのCenterModeを設置しました。デフォルトでは矢印マークはONになっているのにサイトには反映されません。しかし、画像のところをドラッグしてスライドはできますし、CenterMode特有の中央にきた画像が大きくなるというのもばっちりです。単純に矢印マークを出力する部分だけのことだと思うのですが、原因が分かりません。 slick.cssに以下の記述があるので、矢印は画像ではなくフォントで指定しているのかなと思うのですが、違うのでしょうか？fontsフォルダは入れてあります。【slick.css】 /* Arrows */ .slick-prev, .slick-next { position: absolute; display: block; height: 20px; width: 20px; line-height: 0; font-size: 0; cursor: pointer; background: transparent; color: transparent; top: 50%; margin-top: -10px; padding: 0; border: none; outline: none; } .slick-prev:focus, .slick-next:focus { outline: none; } .slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: 0.25; } .slick-prev:before, .slick-next:before { font-family: "slick"; font-size: 20px; line-height: 1; color: white; opacity: 0.85; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-prev { left: -25px; } .slick-prev:before { content: "\2190"; } .slick-next { right: -25px; } .slick-next:before { content: "\2192"; }

massiveak
お礼率61% (19/31)

JavaScript
回答数2
ありがとう数0

回答全件

slick.js(slick.min.js)、slick.cssと同じ…

- warpspace
2014/07/30 17:59

slick.jsを読み込んでいないからでは？

- kosukejlampnet
2014/07/28 13:36

みんなの回答 （2）
専門家の回答

みんなの回答

warpspace
ベストアンサー率56% (83/147)

2014/07/30 17:59 回答No.2

slick.js(slick.min.js)、slick.cssと同じディレクトリに、fonntsフォルダーおよびその中身（slick.ttfなど）が正しくアップロードされていますか？これが正しく（正しい位置で）ないと、→マークが表示されません。

全文を見る

ログインすると、全ての回答が全文表示されます。

kosukejlampnet
ベストアンサー率44% (126/282)

2014/07/28 13:36 回答No.1

slick.jsを読み込んでいないからでは？

全文を見る

ログインすると、全ての回答が全文表示されます。

関連するQ&A

monacaで使うcssの釦の色を変えたい
現在monacaのiOSのアプリ作成の練習しています。掲載したようなボタンのCSSを並べてみました。 <a class="button--large" href="mentenance_index.html">テスト1</a> <a class="button--large" href="mentenance_index.html">テスト2</a> <a class="button--large" href="mentenance_index.html">テスト3</a> このときにこのボタンの色を変えたいと思うのですが、 "css/style.css" このファイルのbutton--largeクラスのどの部分を修正すれば色は変わりますでしょうか？ちなみに、 .button--large { .....（中略）...... background-color: #1284ff; .....（中略）...... } この部分だと自分は思い、 background-color: #00008b;　　というダークブルーのような設定に変更してiphoneでデバッグしてみたのですが、色が変わってくれませんでした。この button02--large クラスの内容も掲載させて頂きます。どうぞ、ご教示の程よろしくお願い致します。 .button--large { text-align: center; position: relative; display: inline-block; vertical-align: top; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-background-clip: padding-box; background-clip: padding-box; padding: 0; margin: 0; font: inherit; color: inherit; background: transparent; border: none; font-family: 'Helvetica Neue', Helvetica, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 400; cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; height: auto; text-decoration: none; padding: 4px 20px; font-size: 16px; line-height: 36px; letter-spacing: 0; color: #fff; text-shadow: 0 1px none; vertical-align: middle; background-color: #1284ff; -webkit-box-shadow: none; box-shadow: none; border: none; -webkit-border-radius: 4px; border-radius: 4px; -webkit-transition: background-color 0.2s linear, color 0.2s linear, opacity 0.2s linear; -moz-transition: background-color 0.2s linear, color 0.2s linear, opacity 0.2s linear; -o-transition: background-color 0.2s linear, color 0.2s linear, opacity 0.2s linear; transition: background-color 0.2s linear, color 0.2s linear, opacity 0.2s linear; font-weight: 400; font-size: 16px; font-weight: 500; line-height: 36px; padding: 4px 20px; display: block; width: 100%; } .button--large:active { background-color: #1284ff; -webkit-box-shadow: none; box-shadow: none; color: #fff; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; opacity: 0.6; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; } .button--large:disabled { opacity: 0.3; cursor: default; pointer-events: none; } .button--large:hover { -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; } .button--large:focus { -webkit-box-shadow: none; box-shadow: none; outline: 0; }
- ベストアンサー
- CSS
クリックした際にCSSが変更できない jQuery
jQueryについて詳しい方教えていただけませんでしょうか？クリックをした際、スライドさせるように作っているのですが、同時にspanのCSS変更（arrowFD→arrowFR）もやりたいのですがなぜかうごきません・・・＜jQuery＞ $(window).load(function(){ $('#faq .answer').not(':first').hide(); $('#faq .question').click(function() { if($(this).next('.answer').is(':visible')) { $(this).next('.answer').slideUp(300); $("span.arrowFD").html('<span class="arrowFR"></span>'); //★ホントは、CSSだけ変更したい } else { $(this).next('.answer').slideDown(300).siblings('.answer').slideUp(300); } }); });//]]> ＜CSS＞ .question { padding:5px; font-weight:500; font-family: メイリオ; font-size:14px; border:1px solid #ddd; background:#eee; cursor: pointer; } .answer { padding:25px; font-family:MS UI Gothic; font-weight:500; font-size:13px; border:1px solid #ddd; } /* 三角矢印を前（Front）に（右向き：Right）でつける */ .arrowFR { position:relative; top:0; left:0; padding-left:18px; } .arrowFR:before { content: ""; position: absolute; top: 3px; left: 2px; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 12px solid #000000; } /* 三角矢印を前（Front）に（下向き：Down）でつける */ .arrowFD { position:relative; top:0; left:0; padding-left:18px; } .arrowFD:before { content: ""; position: absolute; top: 3px; left: 2px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 12px solid #000000; } ＜HTML＞ <div id="faq"> <div class="question" id="tenmetsu"> <span class="arrowFD"></span> <span style="font-weight:bold">｜</span> 香川真司 </div> <div class="answer">Answer 01<br />Answer 01<br />Answer 01<br />Answer 01<br /></div> <div class="question"> <span class="arrowFR"></span> <span style="font-weight:bold">｜</span> 　長友佑都 </div> <div class="answer">Answer 02<br />Answer 02<br />Answer 02<br />Answer 02<br /></div> <div class="question"> <span class="arrowFR"></span> <span style="font-weight:bold">｜</span>　本田圭佑 </div> <div class="answer">Answer 03<br />Answer 03<br />Answer 03<br />Answer 03<br /></div> </div>
- ベストアンサー
- JavaScript
【jQuery】サムネイル
3つのサムネイル画像(.thumb)があります。クリックした.thumbはopacityを1に、その他は0.5に切り替わるする方法を教えてください。始めは1番目.thumbのopacityは1でお願いします。 ■html <div id="ph-wrap"> <div id="photo"> <p><img src="./img/photo1.png" width="480" height="320" alt="" /></p> <p><img src="./img/photo2.png" width="480" height="320" alt="" /></p> <p><img src="./img/photo3.png" width="480" height="320" alt="" /></p> </div> <div id="thumb-wrap"> <p class="thumb"><img src="./img/photo1.png" width="120" height="80" alt="" /></p> <p class="thumb"><img src="./img/photo2.png" width="120" height="80" alt="" /></p> <p class="thumb"><img src="./img/photo3.png" width="120" height="80" alt="" /></p> </div> </div> ■CSS(一部抜粋) #thumb-wrap{ float:left; margin:0 0 0 10px; padding:0; width:120px; } #thumb-wrap img{ width:120px; height:80px; cursor:pointer; opacity:0.5; -moz-opacity:0.5; /* Firefox */ filter: alpha(opacity=50); /* IE */ } .opc{ opacity:1.0; -moz-opacity:1; /* Firefox */ filter: alpha(opacity=100); /* IE */ } ■jQuery $(function () { var photoImg = "#photo img" var thumbWrapImg = "#thumb-wrap img" $("#photo p:gt(0)").hide(); $(thumbWrapImg).eq(0).css({"opacity":1}); $(thumbWrapImg).click(function () { $(this).animate({"opacity":1},100); $(photoImg).attr("src",$(this).attr("src")); }); });
- ベストアンサー
- JavaScript
jQuery bxSlider 画像に変更
jQueryのスライダー「bxSlider」矢印画像を追加してテキストを画像に変更したい＝＝＝＝＝＝＝＝＝＝＝コード＝＝＝＝＝＝＝＝＝＝＝ <script> $(document).ready(function(){ $('.bxslider').bxSlider({ auto: true, pagerCustom: '#bx-pager' }); }); </script> ＝＝＝＝＝＝＝＝＝＝＝ html ＝＝＝＝＝＝＝＝＝＝＝ <ul class="bxslider"> <li><a href=""><img src="http://xxx.com/image/01.png" /></a></li> <li><a href=""><img src="http://xxx.com/image/02.png /></a></li> </ul> ＝＝＝＝＝＝＝＝＝＝＝表示画面＝＝＝＝＝＝＝＝＝＝＝スライド画像の下に、 PrevNextのテキストリンクがでてきます。＝＝＝＝＝＝＝＝＝＝＝実装したい事＝＝＝＝＝＝＝＝＝＝＝本体サイトの用にスライド画像の左右に矢印画像を入れたい PrevNextのテキスト文字を消して●●●の画像に変更したいです。本体サイト http://bxslider.com/ jquery.bxslider.cssの97行目辺りを変更してみましたが、変わりません。カスタマイズをご存知の方がおられましたらご教授ください。 /* DIRECTION CONTROLS (NEXT / PREV) */ .bx-wrapper .bx-prev { left: 10px; background: url(http://xxx.com/images/pre.png) no-repeat 0 -32px; } .bx-wrapper .bx-next { right: 10px; background: url(http://xxx.com/images/next.png) no-repeat -43px -32px; }
- 締切済み
- JavaScript
webフォントの表示ができず困っております。
お力添えお願いします... webフォントを使用したく思い /* webフォント */ @font-face { font-family: 'typicons'; src: url("typicons.eot"); src: url("typicons.eot?#iefix") format('embedded-opentype'), url("typicons.woff") format('woff'), url("typicons.ttf") format('truetype'), url("typicons.svg#typicons") format('svg'); font-weight: normal; font-style: normal; } .typcn { line-height: 1; width: 1em; height: 1em; } .typcn:before { font-family: 'typicons'; font-style: normal; font-weight: normal; speak: none; display: inline-block; width: 1em; height: 1em; font-size: 1em; text-align: center; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; text-rendering: optimizeLegibility; } .typcn-adjust-brightness::before { content: '\e000'; } /* '' */ .typcn-adjust-contrast::before { content: '\e001'; } /* '' */ .typcn-anchor-outline::before { content: '\e002'; } /* '' */ 上記CSSを読み込ませ、 <p class="typcn-adjust-brightness">説明</p> と書いても、 webフォントが表示されません。 cssにもっと、いろいろ記述する必要があるのでしょうか?? フォントのパスについては、間違いありません。大変恐縮ですが、よろしくお願いします。
- 締切済み
- CSS
ギザギザボーダーの向きを下向きにしたいのですが
CSS3初心者です。宜しくお願いします。 Jagged Border http://codepen.io/SomeStuffer/details/uwstc ヘッダーとフッターに配置したいのですが、ヘッダーでギザギザが逆にならなくて困ってます。画像のようにしたいのですが、CSSのどの部分を変更したらよいでしょうか。宜しくお願いします。 .jagged-border { position: relative; width: 100%; height: 50px; -webkit-filter: drop-shadow(rgba(0, 0, 0, 0.3) 0px 1px 2px); filter: drop-shadow(rgba(0, 0, 0, 0.3) 0px 1px 2px); } .jagged-border:before { content: ""; display: block; position: absolute; top: -10px; width: 100%; height: 10px; } .lightgray-bg { background: #ECF0F1; } .lightgray-bg:before { background: -webkit-linear-gradient(45deg, transparent 33.333%, #ecf0f1 33.333%, #ecf0f1 66.667%, transparent 66.667%), -webkit-linear-gradient(135deg, transparent 33.333%, #ecf0f1 33.333%, #ecf0f1 66.667%, transparent 66.667%); background: linear-gradient(45deg, transparent 33.333%, #ecf0f1 33.333%, #ecf0f1 66.667%, transparent 66.667%), linear-gradient(-45deg, transparent 33.333%, #ecf0f1 33.333%, #ecf0f1 66.667%, transparent 66.667%); -webkit-background-size: 20px 40px; background-size: 20px 40px; } .white-bg { background: #FFF; } .white-bg:before { background: -webkit-linear-gradient(45deg, transparent 33.333%, #ffffff 33.333%, #ffffff 66.667%, transparent 66.667%), -webkit-linear-gradient(135deg, transparent 33.333%, #ffffff 33.333%, #ffffff 66.667%, transparent 66.667%); background: linear-gradient(45deg, transparent 33.333%, #ffffff 33.333%, #ffffff 66.667%, transparent 66.667%), linear-gradient(-45deg, transparent 33.333%, #ffffff 33.333%, #ffffff 66.667%, transparent 66.667%); -webkit-background-size: 20px 40px; background-size: 20px 40px; } .darkgray-bg { background: #C3C9CC; } .darkgray-bg:before { background: -webkit-linear-gradient(45deg, transparent 33.333%, #c3c9cc 33.333%, #c3c9cc 66.667%, transparent 66.667%), -webkit-linear-gradient(135deg, transparent 33.333%, #c3c9cc 33.333%, #c3c9cc 66.667%, transparent 66.667%); background: linear-gradient(45deg, transparent 33.333%, #c3c9cc 33.333%, #c3c9cc 66.667%, transparent 66.667%), linear-gradient(-45deg, transparent 33.333%, #c3c9cc 33.333%, #c3c9cc 66.667%, transparent 66.667%); -webkit-background-size: 20px 40px; background-size: 20px 40px; }
- 締切済み
- CSS
ブログのメニューバーをヘッダー画像の下に
seesaaブログでメニューバーをTOP画像の下に表示したいのですがわけがわからないんです。どなたか教えて下さらないでしょうか？ちなみに設置はなんとかできました。 http://error911.seesaa.net/ CSSは ul#menu { margin:0; padding:0; list-style-type:none; width:auto; position:relative; display:block; height:36px; font-size:12px; font-weight:bold; text-transform:lowercase; background:transparent url("http://error911.up.seesaa.net/image/bg.jpg?20090326204938") repeat-x top left; font-family:"Trebuchet MS",Helvetica,Arial,Verdana,sans-serif; border-bottom:1px solid #000000; border-top:1px solid #000000; } ul#menu li { display:block; float:left; margin:0; pading:0; } ul#menu li a { display:block; float:left; color:#999999; text-decoration:none; font-weight:bold; padding:12px 20px 0 20px; height:24px; } ul#menu li a:hover { color:#FFFFFF; background:transparent url("images/over.jpg") no-repeat top right; }　　です。お願いします。
- 締切済み
- ブログ
テーブルの中にiframe
テーブルの中にiframeをしているのですがどうしてもボタンが右側に少しはみ出ますし iframeは縦400pxを超えるページを表示すると縦スクロールバーが表示されますがそれも右側にはみ出ます。どうにか800pxの中に収まらないものでしょうか？また、ボタンのボーダを下記ソースでは消していますがデフォルトで表示される立体感のあるボタンのまま 800pxの中に収めたいです。 HTML5、CSS2.1です。ご相談お願いします。 <table> <tr style="width: 800px; height: 50px"> <td><input type="button" value="1"/></td> <td><input type="button" value="2"/></td> <td><input type="button" value="3"/></td> <td><input type="button" value="4"/></td> <td><input type="button" value="5"/></td> </tr> <tr style="width: 800px; height: 400px"> <td colspan="5" style="width: 800px; height: 400px"> <iframe src="hoge.htm"></iframe> </td> </tr> <tr style="width: 800px; height: 50px"> <td colspan="5" style="width: 800px; height: 50px"> <p>hoge</p> </td> </tr> </table> ------------------------------------------------------------ table { padding: 0px; margin: 0px; border-style: none; border-width: 0px; } tr td { padding: 0px; margin: 0px; border-style: none; border-width: 0px; } input { border-style: none; border-width: 0px; padding: 0px; margin: 0px; color: Red; width: 160px; height: 50px; font-size: 20px; font-family: HGS明朝B; background-color: transparent; } iframe { padding: 0px; margin: 0px; border-style: none; border-width: 0px; background-color: transparent; width: 800px; height: 400px; }
- ベストアンサー
- HTML
IEでPNG画像が黒く縁取りされてしまいます。
私のサイトにスムーズスクロールで矢印画像をを設置しております。背景は透明のpng画像（矢印）です。添付の画像を参照していただきたいのですが、 chromeやFirefox、IE９では、矢印画像はそのまま正常に表示されます。しかし、IE８（多分IE７でも）で確認すると、矢印が黒く縁どられて表示されてしまっております。 CSSに下記の記述をしましたが、解決いたしませんでした。 border: 0px; border-style:none; background-color:transparent; 画像自体が四角くふちどられるわけではなく、なぜ矢印が縁どられるのか原因がわかりません。 IEで縁どられず、そのまま表示させる方法を教えて頂けませんでしょうか。どうぞ、よろしくお願いします。
- ベストアンサー
- HTML
IE6バグ　css　hover
いつもお世話になってます。宜しくお願い致します。クロム、firefox、オペラ、サファリ、IE7、IE8ですと、正常に動作するのですが、IE6だけ動作しません。 (IEでaタグ以外にhoverを効かせる方法で、サイトからcsshover.htcファイルをインストールし適用させています) 動作内容：画像にマウスがのったら、その画像が別画像に切り替われば正常動作です。切り替わる画像は元画像と同じサイズです。何卒、お願いします。 htmlソース <dl id="dl1"> <dt id="dt1"><a href="#"><img src="img/main-content-image1.jpg" alt="メインコンテンツ画像1" width="170" height="170" /></a></dt> <dd class="dd"><a href="#">あああああああ</a></dd> </dl> cssソース #dl1 { border-style: none; width: 170px; height: 170px; padding: 10px 10px 0px 35px; margin: 0; float: left; line-height: 0px; font-size: 0px; } #dt1 a { display: block; with: 170px; height: 170px; background-position:left top; background-repeat:no-repeat; text-decoration: none; } #dt1 a img { text-decoration: none; border-style: none; } #dt1 a:hover { background-image: url(img/main-content-image1-2.jpg); text-decoration: none; } #dt1 a:hover img { visibility: hidden; text-decoration: none; border-style: none; } .dd { width: 170px; height: 40px; margin: 0px; color: #ffffff; font-size: 12px; line-height: 16px; padding: 0; } .dd a { padding: 0; margin: 0; text-decoration: none; color: #ffffff; } .dd a:hover { text-decoration: underline; color: #ffffff; }
- 締切済み
- HTML