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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

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

Q&A

解決済

1回答

3082閲覧

scrollify.jsのページャーを1ページ目だけ消したいのですが

futon

総合スコア10

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

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

0グッド

0クリップ

投稿2019/01/19 09:29

編集2019/01/19 22:32

jQueryのscrollifyを導入しています。

scrollify デモサイト

ページャーを以下のように設定しているとすると、4ページあるうち、1ページ目のページャー(〇●●●)だけ非表示にするにはどのように記述したらよいでしょうか。
(通常時の動作確認は完了しています)
ボタンで取得する形ではなく、スクロールする前の最初のページだけページャーが見えない感じです。

var $section = $('.js-section'); // 各スライド var $pager = $('#js-pager'); // ページャー枠 // scrollifyのオプション設定 var option = { section : '.js-section', easing: "swing", scrollSpeed: 600, scrollbars: true, before:function(index) { pagerCurrent(index); // ページャーに対応する順番にクラス名を付与 }, afterRender:function() { createPager(); // ページャーの作成 } }; $(function() { $.scrollify(option); // scrollifyの実行 }); // ============================== // functions // ------------------------------ // ページャーに対応する順番にクラス名を付与 function pagerCurrent(index = 0) { var $li = $pager.find('li'); $li.removeClass('is-current'); $li.eq(index).addClass('is-current'); } // ページャーの作成 function createPager() { $section.each(function(i, e){ // ページ内リンク先の作成 var sectionName = $(e).attr('data-section-name'); // 最初のliにはクラスを付与 var addClass = ''; if (i === 0) { addClass = 'is-current'; } // liのHTML作成 var html = ''; html += '<li class="' + addClass + '">'; html += '<a href="#' + sectionName + '"></a>'; html += '</li>'; $pager.append(html); }); pagerLink(); } // ページャーでaタグをクリックされたらスクロールする function pagerLink () { $pager.find('a').on('click', function() { $.scrollify.move($(this).attr("href")); }); }

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

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

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

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

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

kei344

2019/01/19 10:15

プラグイン/ライブラリは公式配布サイトのURLを質問文に追記ください。(URLにはリンクを張ることができます)
futon

2019/01/19 22:33

大変失礼いたしました!リンクを追加しましたのでよろしくお願いいたします。
guest

回答1

0

ベストアンサー

関数pagerCurrent内でindex0のときに、$pageropacity: 0;になるようなクラスをつければよいのでは。

投稿2019/01/20 01:40

kei344

総合スコア69407

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

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

futon

2019/01/24 11:57

お礼が大変遅くなり申し訳ありません! function pagerCurrent(index = 0) { var $li = $pager.find('li'); $li.removeClass('is-current'); $li.eq(index).addClass('is-current'); if (index === 0){ $pager.css('opacity','0'); }else{ $pager.css('opacity','100'); } } 初歩的な質問ですみませんでした。 教えていただいたように、こんな感じで書いたらイメージ通りに動きましたのでご報告させていただきます。ありがとうございました。
futon

2019/01/25 22:29

度々すみません。 上記の方法だと初回読み込み時だけページャーが表示されてしまいます。 (2ページ目にスクロールして、1ページ目に戻ると消えます) 初回も非表示にする場合どのように記述したらよいでしょうか。 よろしくお願いいたします。
futon

2019/01/26 00:27 編集

度々初歩的な質問ですみません。 setCurrentに$pager.css('opacity','0');を置いて自己解決しました。 「まだ回答を求めています」ボタンを押したいためにベストアンサーを一度外させていただきましたが、ベストアンサー再度押させていただきます。ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問