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

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

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

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

HTML

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

Q&A

解決済

1回答

2008閲覧

slickスライダーの矢印が途中で切れて表示されてしまいます。

manmaru

総合スコア31

jQuery

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

HTML

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

0グッド

0クリップ

投稿2019/07/20 17:58

編集2019/07/20 18:05

イメージ説明
slickにてスライダーを実装させたのですが、添付写真のように矢印(赤色)が途中で切れて
表示されてしまいます。
スライダーを囲っているdiv要素の横幅を広げても、写真の隙間が空くだけで
矢印は途中で途切れたままです。

私の方で試してみた策はこちらです。
ほかに解決策があれば、ご教示いただきたく宜しくお願いいたします。

【試したこと】

css

1.slick-prev, 2.slick-next 3{ 4 z-index: 100; 5} 6.slick-prev 7{ 8 left: -20px; 9} 10.slick-next 11{ 12 right: -20px; 13}

【slickの記述内容】

html

1<div class="your-class"> 2画像 3画像 4</div>

Jquery

1$(function(){ 2$('.your-class').slick({ 3 accessibility: true, 4 autoplay: true, 5 pauseOnDotsHover: false, 6 arrows: false, 7 infinite: true, 8 slidesToShow: 3, 9 centerMode: true, 10 dots: false, 11 centerPadding: '5%', 12 autoplaySpeed: 0, 13 cssEase: 'linear', 14 speed: 5000, 15 arrows: true, 16 swipe: true 17}); 18});

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

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

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

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

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

yasutomi

2019/07/21 11:38

コードブロックにJqueryはないのでjsに修正をお願いします。
manmaru

2019/07/21 13:17

ご回答いただきありがとうございます。 こちらは私の記載の誤りで、Jqueryの内容はhtml内に<script>で囲って記述しています。 原因としては、親要素にoverflow:hiddenが指定されているという点でした。 初歩的で申し訳なかったです。
guest

回答1

0

ベストアンサー

.your-classの親にoverflow: hidden;が指定されているものがあるのではないでしょうか?

投稿2019/07/21 04:12

mksk

総合スコア247

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

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

manmaru

2019/07/21 13:15

ご返信が遅くなり申し訳ありません。 ご指摘いただいた点、まさにその通りでした。 すべて解決させてからご返信差し上げようと思ったのですが、 overflow:hiddenの代わりにclear:bothとclearfixを試したのですが、指定方法がおかしいのか問題点でお送りした写真の下部内容の配置がおかしくなってしまい、、 sliderを左側に75%、twitterのフィードを右に20%と二面配置しているのですが、 slider以下の内容の上部にとんでもない空白があき(clear:both)、横幅100%で表示され(clearfix)る状態です。 不躾ではございますが、もしも何か思う点があればご返信ください。 追伸:追ってベストアンサーに選ばせていただきます。
mksk

2019/07/21 14:08

うーん、ソースを見てないので、思いつきでの返答になってしまいますが、floatでカラム分けをしてるんだとお見受けします。 floatの解除にはfloatをかけている要素の次の要素に`clear: both;`を指定したら解除できますが、マージンがうまく取れないことがあるので、私はあまり使いません。 `clear: both;` を使う例 ``` HTML <div class="slider"> </div> <div class="twitter"> </div> <div class="clear></div> ``` ```CSS .slider { width: 75%; float: left; } .twitter { width: 20%; float: right; } .clear { cleat: both; } ``` float解除には親要素を用意してclearfixを使います。 (overflow: hidden;でも一応はclearfixできますが、最初の質問にあった「要素が切れてしまう」ことがあるので、使いません。) `clearfix`を使う例 ``` HTML <div class="wrap"> <div class="slider"> </div> <div class="twitter"> </div> </div> ``` ``` CSS .wrap:after { /* .wrapに:afterで擬似要素を作り、そこにclear: both;を指定します。 */ content: ""; clear: both; display: block; } .slider { width: 75%; float: left; } .twitter { width: 20%; float: right; } ``` あまり古いブラウザを対象としないでいいのであれば、`display: flex;`を使います。 HTMLは上と一緒。 `display: flex;`を使う例 ``` CSS .wrap { display: flex; justify-content: space-between; } .slider { width: 75%; } .twitter { width: 20%; } ``` これだけで左右に分かれたレイアウトができます。 レスポンシブである程度までブラウザ幅を縮めたら改行したいだとか、左右どちらかのカラム幅を維持したいなどの場合もあると思いますので、必要であれば検索してみてください。 コメントいただければ、その方法も教えますので、ご遠慮なくどうぞ。 多分`clearfix`か`display: flex;` のどちらかでうまくいくんじゃないかなぁと思うんですが、どうでしょうか?
manmaru

2019/07/22 02:01

伝え方が曖昧であったにも関わらずご丁寧にありがとうございました。 ただいまclear:bothを使った状態の記述で自宅ではないパソコンでみたところ正しく表示されました。 すみません、具体的な原因をご返答したかったのですが不明、、 とはいえ、正しく見えるパソコンがあったので記述には問題ないことがわかりました。。 引き続きがんばります!ありがとうございました!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問