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

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

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

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

HTML

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

CSS

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

Q&A

0回答

626閲覧

JS CSS HTML 矢印を押すと消えてしまうのをずっと表示したい

退会済みユーザー

退会済みユーザー

総合スコア0

jQuery

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/07/17 13:33

編集2022/01/12 10:55

おせわになります。

画面の左と右に現れる矢印を押すと矢印が消えてしまう。
左や右の矢印を何回押しても矢印が消えないように改善したく試しましたができません。

#ためしたこと

矢印の設定が以下CSSで実施されているところは理解できましたが設定方法がわかりませんでした。
CSS上またはHTML上でページ数によらず表示させるやり方がわかりません。

thisSlide.append('<a href="javascript:void(0);" class="sdPrev"></a><a href="javascript:void(0);"

// StageSlide stageSlide.each(function(){ var thisSlide = $(this), chdPanel = thisSlide.find('.slidePanel'), chdPanelLength = chdPanel.length; chdPanel.eq('0').addClass('activePanel').end().wrapAll('<div class="slideWrap"></div>'); thisSlide.append('<a href="javascript:void(0);" class="sdPrev"></a><a href="javascript:void(0);" class="sdNext"></a><div class="slideNav"></div>'); var thisWrap = thisSlide.find('.slideWrap'), thisPrev = thisSlide.find('.sdPrev'), thisNext = thisSlide.find('.sdNext'), thisPn = thisSlide.find('.slideNav');
.stageSlide .sdPrev { left: 80px; background: transparent url(../img/slide_prev.png) no-repeat left top; } .stageSlide .sdNext { right: 80px; background: transparent url(../img/slide_next.png) no-repeat left top; }

#表示させたい画像

イメージ説明

イメージ説明

左右のNEXT/BACKボタンはスクリプト側から生成するようにしているのでHTMLには記述してません。

フォルダ構成

index.html img css common.css

#css

@charset "utf-8"; /* ======================================= CommonElements ======================================= */ body { font-size: 100%; line-height: 160%; font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "MS Pゴシック", "MS P Gothic", Verdana, Arial, Helvetica, sans-serif; color: #000; text-align: center; background: #fff; position: relative; overflow: hidden; visibility: hidden; } a:link { text-decoration:nderline; color: #0000ff;} a:visited { text-decoration:nderline; color: #0000ff;} a:active { text-decoration:nderline; color: #0000ff;} a:hover { text-decoration:none; color: #0000ff;} p { padding: 0 0 30px 0; } h1 { top: 0; left: 0; padding: 10px 0; width: 100%; background: #000; color: #fff; font-size: 12px; font-weight: bold; text-align: center; position: absolute; } h2 { bottom: 0; left: 0; padding: 30px 0; width: 100%; font-size: 12px; position: absolute; } /* #container --------------------------- */ #container { top: 0; left: 0; width: 100%; position: absolute; z-index: 1; } /* .stageBase --------------------------- */ .stageBase { width: 100%; position: relative; overflow: hidden; } .stageBase .fieldWrap { padding: 100px 0 0 0; text-align: center; } #stage1 {background:#fff;} #stage2 {background:#eee;} #stage3 {background:#ddd;} #stage4 {background:#ccc;} #stage5 {background:#bbb;} /* .stageSlide --------------------------- */ .stageSlide { position: relative; overflow: hidden; visibility: hidden; } .stageSlide .slideWrap { top: 0; left: 0; position: absolute; overflow: hidden; } .stageSlide .slideWrap:before, .stageSlide .slideWrap:after { content: " "; display: table; } .stageSlide .slideWrap:after {clear: both;} .stageSlide .slideWrap {*zoom: 1;} .stageSlide .slidePanel { float: left; overflow: hidden; } .stageSlide .sdPrev, .stageSlide .sdNext { margin-top: -25px; top: 50%; width: 50px; height: 50px; display: block; position: absolute; z-index: 99; } .stageSlide .sdPrev { left: 80px; background: transparent url(../img/slide_prev.png) no-repeat left top; } .stageSlide .sdNext { right: 80px; background: transparent url(../img/slide_next.png) no-repeat left top; } .stageSlide .slideNav { bottom: 70px; left: 0; width: 100%; height: 15px; text-align: center; position: absolute; z-index: 98; } .stageSlide .slideNav a { margin: 0 5px; width: 15px; height: 15px; background: transparent url(../img/nav.png) no-repeat center center; display: inline-block; overflow: hidden; } .stageSlide .slideNav a.pnActive { background: transparent url(../img/nav_acv.png) no-repeat center center; } /* #pageNav --------------------------- */ #pageNav { top: 0; right: 25px; width: 15px; text-align: center; position: fixed; z-index: 2; } #pageNav ul { width: 15px; display: block; } #pageNav ul li { padding-bottom: 5px; width: 15px; height: 15px; display: block; overflow: hidden; } #pageNav ul li a { width: 15px; height: 15px; background: transparent url(../img/nav.png) no-repeat center center; display: block; } #pageNav ul li.activeStage a { background: transparent url(../img/nav_acv.png) no-repeat center center; } /* #pageDown --------------------------- */ #pageDown { bottom: 0; left: 0; width: 100%; height: 40px; text-align: center; position: fixed; overflow: hidden; z-index: 3; } #pageDown a { margin: 0 auto; width: 30px; height: 30px; background: transparent url(../img/next_arw.png) no-repeat center center; display: block; }

宜しくお願いします。

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

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

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

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

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

yukikp

2019/07/17 13:39

>左や右の矢印を何回押しても矢印が消えないように改善したく試しましたができません。 スライドが無くなって、矢印を押しても意味が無いのに表示させ続けたい理由って何でしょう?ユーザーをちょっとイラっとさせたいとかですか?
退会済みユーザー

退会済みユーザー

2019/07/17 13:47

回答ありがとうございます。理由でしょうか。ページ数を増やした場合に消えてしまいます。イラっとさせたいわけではありません。
yukikp

2019/07/17 15:13

ページ数が増えても最終ページだと矢印が消えて当然だと思うのですが。 試しに対象サイトてページ数を増やしてみて下さい。
yukikp

2019/07/17 15:23 編集

あれ。。。対象サイトが消されてますね。 コードの上にある、中途半端なJavaScriptも消して良いかもしれません。 「thisSlide.append('<a href="javascript:void(0);" class="sdPrev"></a><a href="javascript:void(0);" 」 中途半端に書かれたJavaScriptから判断すると、JavaScriptで横にスライドさせるコンテンツの枚数を調べて、最後の(または最初の)コンテンツが表示されたら、右矢印(または左矢印)を消す事でそれ以上は進めない(または戻れない)事をわかりやすく伝えているのだと思います。
yukikp

2019/07/17 15:26

なので、JavaScriptで書かれた「最後の(または最初の)コンテンツが表示されたら」判定部分を見つけ、その中の処理(矢印を消す)を削除すればご希望の通り矢印は表示され続けると思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問