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

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

ただいまの
回答率

90.51%

  • PHP

    20295questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    16358questions

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

  • jQuery

    6679questions

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

  • スライダー

    56questions

    GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

  • タブ

    25questions

    コンテンツの上下左右に参照用のメニューを設けることで、複数の要素やページの表示を可能にするユーザーインターフェイスパターンのこと。メニューをクリックすると、一つの要素が可視化され、他の要素は見えなくなる。

wordpressでのスライダーがうまく機能しないので詳しい方よろしくお願いします

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 432

musashidayo

score 25

wordpressでテーマを自作していて、swiperを実装して、foreachで記事数の分だけスライドが追加されるという事がしたいのですが、ページネーションが表示されないのが一点と、
もう一点として、タブ切り替えをすると、二個目のタブになるとうまくスライダーが機能しません。(一つ目のタブではしっかりとスライダーは動きます。)

今回初めてスライダーを実装したので、詳しく教えて頂けると幸いです。

html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <?php wp_enqueue_script('jquery'); ?>;
    <?php wp_head();?>
    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/reset.css" type="text/css" />
    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css" type="text/css" />
        <!--タブ切り替え-->
    <script type="text/javascript">
                (function($) {
                $(document).ready(function() {
                $('.tab_area:first').show();
                $('.tab li:first').addClass('active');
                $('.tab li').click(function() {
                $('.tab li').removeClass('active');
                $(this).addClass('active');
                $('.tab_area').hide();
                $(jQuery(this).find('a').attr('href')).fadeIn();
                return false;
                });
                });
                })(jQuery);
    </script>
    <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/swiper.min.css">
</head>
<body>
    <header>        
    </header>
.................................
             <ul class="tab">
                    <li><a href="#tab1">ランキング1</a></li>
                    <li><a href="#tab2">ランキング2</a></li>

                    <div class="nulbox"></div>
             </ul>
                 <div class="tab_area" id="tab1">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <?php
                                $page = get_page_by_path('自作固定ページ1');
                                $my_ranking = get_field('自作カテゴリ1',$page->ID);
                                if ( $my_ranking ) {
                                $number = 1;
                                global $wpdb;
                                global $rateAvg;            
                            ?>
                            <?php 
                                foreach($my_ranking as $value){
                                    //繰り返し回数による判定
                                    if ( $number >= 6){
                                    break; 
                                    }
                                    setup_postdata($value);
                            ?>
                                <!--表示したい内容を取得-->
                                <div class="swiper-slide">
                                    <!--表示したい内容-->
                                <div class="swiper-pagination"></div>
                                <div class="swiper-button-prev"></div>
                                <div class="swiper-button-next"></div>
                                </div>

                            <?php wp_reset_postdata(); ?>
                            <?php 
                                $number++; //繰り返された回数を1つづずカウント
                                    }
                                }
                            ?>

                        </div>
                    </div>
                </div>
                <div class="tab_area" id="tab2">
                 <div class="swiper-container">
                  <div class="swiper-wrapper">
                    <?php
                        $page = get_page_by_path('自作固定ページ2');
                        $my_ranking = get_field('自作カテゴリ2',$page->ID);
                        if ( $my_ranking ) {
                        $number = 1;
                        global $wpdb;
                        global $rateAvg;            
                    ?>
                    <?php 
                        foreach($my_ranking as $value){
                            //繰り返し回数による判定
                            if ( $number >= 6){
                            break; 
                            }
                            setup_postdata($value);
                    ?>
                    <!--表示したい内容を取得-->
                        <div class="swiper-slide">
                         <!--表示したい内容-->
                        <div class="swiper-pagination"></div>
                        <div class="swiper-button-prev"></div>
                        <div class="swiper-button-next"></div>
                        </div>
                    <?php wp_reset_postdata(); ?>
                    <?php 
                        $number++; //繰り返された回数を1つづずカウント
                            }
                        }
                    ?>
                </div>
            </div>
        </div>
                <div class="tab_content">
                    <div class="tab_area" id="tab3">
                        <ul>
                            <?php random_post_list(6); ?>
                        </ul>
                    </div>
                    <div class="tab_area" id="tab4">
                        <ul>
                            <?php new_post_list(6); ?>
                        </ul>
                    </div>
                </div>
                <div class="inline_block">
            </div>
            <p>全てのランキングを見る場合はこちら <a href="/cat_rank">>ランキング</a></p>
..................
<footer>
</footer>
<?php wp_footer(); ?>


<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/swiper.min.js"></script>
<script>
  var mySwiper = new Swiper ('.swiper-container', {
    // Optional parameters
    direction: 'horizontal',
    loop: true,

    // If we need pagination
    pagination: {
      el: '.swiper-pagination',
    },

    // Navigation arrows
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },

    // And if we need scrollbar
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })
</script>
</body>
</html>


css:

.cbp-spmenu-push{
    margin-top: -25px;
}
/*スライダー*/
.swiper-container {
    width: 100%;
    height: auto;
}
/*-----------------------------
記事タブメニュー
------------------------------*/
.tab{
    padding:15px 0px 2px 0px;
    margin-left:20px;
    }
    .tab li { /*タブ部分*/
    display:inline-block;
    margin-right:10px;/*タブの隙間*/
    font-size: 17px;
    border-top:solid 1px #acacac;
    border-left: solid 1px #acacac;
    border-right: solid 1px #acacac;
    border-bottom: solid 1px #acacac;
    margin: 0 auto;
    }
    .tab .nulbox{clear:left;}
    .tab li a {
    display:inline;
    color:#666;
    text-decoration: none;
    background-color:#f3f3f3; /*タブ画像*/
    padding:4px 5px 5px 5px;
    }
    .tab li.active a{ /*選択中のタブ*/
    background-color:#122450;
    padding:4px 5px 5px 5px;
    color:#FFFFFF;
    }
    .tab_area { /*切り替え部分非表示*/
    display: none;
    border-top:solid 1px #acacac;
    border-left: solid 1px #acacac;
    border-right: solid 1px #acacac;
    border-bottom: solid 1px #acacac;
    margin-top: -3px;
    border-radius: 3px;
    }
    .tab_content { /*内容*/
    font-size: 13px;
    clear: both;
    overflow: hidden;
    width: 300px;
    }
    .tab_content a {
    color:#000000;
    text-decoration: none;
    font-weight:bold;
    }
    .tab_content a:hover {
    color:#0044cc;
    text-decoration: underline;
    }
    .tab_content ul li{ /*内容のリスト表示*/
    background-color: #ffffff; /*リスト画像*/
    padding-left:0px;
    font-size: 13px;
    line-height:16px;
    margin-top:15px;
    clear: both;
    }
    #tab1 ul.wpp-list li { /*週間人気記事のリスト表示*/
    font-size: 13px;
    line-height:16px;
    margin: 6px 5px -18px 1px;
    clear: both;
    }
    #tab2 ul.wpp-list li { /*月間人気記事のリスト表示*/
    font-size: 13px;
    line-height:16px;
    margin: 6px 5px -18px 1px;
    clear: both;
    }
    #tab3 img{
    float: left;
    padding:0px 2px 2px 0px;
    margin: 2px 5px 2px 1px;
    }
    #tab4 img{
    float: left;
    padding:0px 2px 2px 0px;
    margin: 2px 5px 2px 1px;
    }
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+1

質問文をちゃんと読んでいなかったのと、最初の回答がコメントにあるように関係ない指摘でしたので、回答を全面的に編集しました。すみません、ご指摘ありがとうございます。

JavaScriptを下記のようにしてみてください。

Swiperというのは、作成してあるタブごとにインスタンスを作成しなければなりません。タブ1できちんと動いているということなので、同じオプションで問題ないのであれば下記のようにします。別々のオプションが必要な場合は、別々にセレクターで指定してインスタンスを作成します。

試してないので不具合があるかもしれませんが、ポイントとしては、タブがクリックされて、フェードイン完了時にSwiperインスタンスを作成すればよいと思います。

  1. タブクリック
  2. フェードイン
  3. Swiperインスタンス作成(フェードインが終わったら)

※注意点

  • 初期タブは上記と関係なくSwiperインスタンスを作成します。
  • 後で同じタブをクリックしたときに、作成済みインスタンスで実行できるので、インスタンスを配列などに入れて記憶しておきます。
(function($) {
    $(document).ready(function() {
        $('.tab_area:first').show();
        $('.tab li:first').addClass('active');

        //タブ切替
        $('.tab li').click(function() {
            $('.tab li').removeClass('active');
            $(this).addClass('active');
            $('.tab_area').hide();
            //fadeIn()をインラインへ移動
            return false;
        });
    });
})(jQuery);

インラインのJavaScriptを下記のようにします。

var options = {
    // Optional parameters
    direction: 'horizontal',
    loop: true,

    // If we need pagination
    pagination: {
      el: '.swiper-pagination'
    },

    // Navigation arrows
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev'
    },

    // And if we need scrollbar
    scrollbar: {
      el: '.swiper-scrollbar'
    }
};

var swipers = [];

//タブ切替
$('.tab li').click(function() {
    //タブのフェードインが完了したら、Swiperを動作させる
    $($(this).find('a').attr('href')).fadeIn(400, 'swing', function() {
        var currentId = $(this).attr('id');

        //#tabX Swiper作成
        if ($.type(swipers[currentId]) !== 'object') {
            swipers[currentId] = new Swiper('#'+ currentId +' .swiper-container', options);
        }
    });
    return false;
});

//#tab1(初期タブ) Swiper作成
swipers['tab1'] = new Swiper('#tab1 .swiper-container', options);

下記でもサイトにサンプルがあるので、参考になるかと思います。(JavaScriptのソースは/js/main.jsです)
http://idangero.us/swiper/demos/

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/12/28 16:12

    ちなみに、タブ切り替えで参考にしたサイトはhttp://mama-hack.com/tab_menuです

    キャンセル

  • 2017/12/28 16:12

    「オブジェクトリテラルの末尾のカンマ」はES5で実装され、MDNによるとIE9+で対応されています。
    質問者の環境がIE8なら話は別ですが、おそらくこれは原因ではありませんので、マイナス評価します。
    (そもそも末尾カンマが原因なら文法エラーが投げられるので、ひとつ目のタブだけ動くということはないはず)
    https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Trailing_commas

    キャンセル

  • 2017/12/28 18:35

    こちらのコードに変更してやってみたのですが、変更前と同じ挙動でした。
    https://teratail.com/questions/51618
    やはりこちらに載っているようにタブ切り替えの際にhiddenになっていると正しく表示されないのでしょうか?

    キャンセル

  • 2017/12/28 20:14

    > こちらのコードに変更してやってみたのですが、変更前と同じ挙動でした。
    https://teratail.com/questions/51618 やはりこちらに載っているようにタブ切り替えの際にhiddenになっていると正しく表示されないのでしょうか?

    コードの中身を見ていないので何とも言えませんが、動かないとなるとそうかもしれません。ドキュメントにはイベント関連の設定などもあるので、コンテンツが hidden 時には動かない可能性が高いですね。
    そこで、クリックイベント内でSwiperインスタンスを作成するコードに編集してみました。クリックイベントとフェードイン完了時をクリアできれば問題なく動くと思いますので。

    キャンセル

checkベストアンサー

0

PHPコードの構造を見るとループが組まれているので、これはこういうHTMLが出力されているのではありませんか?

<div class="swiper-container">
  <div class="swiper-wrapper">
    <!--表示したい内容を取得-->
        <div class="swiper-slide">
         <!--表示したい内容-->
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        </div>
    <!--表示したい内容を取得-->
        <div class="swiper-slide">
         <!--表示したい内容-->
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        </div>
    <!--表示したい内容を取得-->
        <div class="swiper-slide">
         <!--表示したい内容-->
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        </div>
    <!--表示したい内容を取得-->
        <div class="swiper-slide">
         <!--表示したい内容-->
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        </div>
    <!--表示したい内容を取得-->
        <div class="swiper-slide">
         <!--表示したい内容-->
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        </div>
    <!--表示したい内容を取得-->
        <div class="swiper-slide">
         <!--表示したい内容-->
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        </div>
  </div>
</div>


だとすると、ナビゲーションのボタンが複数あるなど、SwiperのデモとずいぶんHTML構造が違うのですが、これについては問題ありませんか?
 
また、2つのタブでナビゲーションのクラス名がかぶっていますが、これはSwiperの中でコンテキストを自動的に判断して適切に処理されているのでしょうか? そうでなければ動作しないように思うのですが。

 追記

ちょっと触ってみたところ、まあなんとか動作しました。オプションにobserver: trueを加えるとよさそうです。
サンプル

ただ、非表示のタブにあるSwiperのナビゲーションとかはなんか変な振る舞いをしますね……

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/12/29 11:59

    Demoを確認した所、
    <!-- Swiper -->
    <div class="swiper-container">
    <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    </div>
    この構造が正しいみたいですね。この形式に書き換えてもやってみましたが、2つ目のタブ内が正しく機能しませんでした。
    swiperというものを初めて使ったので、タブを作ってその中にスライダーを入れれば機能するかと思っていたのですが、そこまで簡単な方式ではダメなようですね。

    キャンセル

  • 2017/12/29 15:39

    > 2つ目のタブ内が正しく機能しませんでした

    回答にも書きましたが、2つのタブでナビゲーションのクラス名がかぶっていますが、これはSwiperの中でコンテキストを自動的に判断して適切に処理されているのでしょうか? そうでなければ動作しないように思うのですが。

    キャンセル

  • 2017/12/29 19:52

    追記しました。

    キャンセル

  • 2018/01/09 14:24

    丁寧に教えていただきありがとうございます。
    年末年始忙しく全く手を付けておらず、たった今こちらの追記の方法でやってみたところ、タブ内でループを使っても実際に動作しましたが、やはり1タブ目のページネーションがうまくいきませんでした。
    どこが悪さをしているのですかね?

    キャンセル

  • 2018/01/09 15:16

    ちらっとググって見た感じ、どうもライブラリの不具合っぽいですね。

    キャンセル

0

タブ切り替え後に Swiper をセット/リセットするか、Swiper でタブも実装してしまう(Demo の Nested Swipers )かどちらかでは。

【CSS - タブ切り替え要素の中にスライダーや他のJSを使いたい(51618)|teratail】
https://teratail.com/questions/51618

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/12/28 17:39

    こちらの質問も参考にしたのですが、如何せんJavascriptを使うのが初めてのために、
    //タブの切替え
    <script type="text/javascript">
    (function($) {
    $(document).ready(function() {
    $('.tab_area:first').show();
    $('.tab li:first').addClass('active');
    $('.tab li').click(function() {
    $('.tab li').removeClass('active');
    $(this).addClass('active');
    $('.tab_area').hide();
    $(jQuery(this).find('a').attr('href')).fadeIn();
    return false;
    });
    });
    })(jQuery);
    </script>
    の部分を
    ②タブ切り替えの方法をdisplay:none;ではなくvisibility:hidden;+height:0;に変更する
    という記述に変更するやり方でつまずいてしまいました・・・。

    キャンセル

  • 2017/12/28 17:49

    つまづいた、というのは何がどうわからないのでしょうか。
    Nested Swipers を使えばとりあえず「タブ切り替え+Swiper」っぽいことができますよ。

    キャンセル

  • 2017/12/28 18:20

    デザイン的にNested Swipersを見てみたのですが、十字にスライドが配置されているのが思っていたのと違ったので、タブ切り替えで実装してみようとしていました。

    javascriptを使う際の記述の仕方が全くわからなかったので、
    https://teratail.com/questions/51618
    にもある、「display:none;ではなくvisibility:hidden;+height:0;に変更する」方法を試そうと試行錯誤してみたのですが、うまくいきませんでした。
    $('.tab_area').hide();
    この部分を変更すればよいということがなんとなくわかるくらいです。

    キャンセル

  • 2017/12/28 19:41

    > 十字にスライドが配置されているのが思っていたのと違ったので
    中のスライドにverticalを使わなければ横スライドに出来ますよ。

    > javascriptを使う際の記述の仕方が全くわからなかったので、
    それではJavaScriptからCSSを操作する方法を調べましょう。

    キャンセル

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

  • ただいまの回答率 90.51%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • PHP

    20295questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    16358questions

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

  • jQuery

    6679questions

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

  • スライダー

    56questions

    GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

  • タブ

    25questions

    コンテンツの上下左右に参照用のメニューを設けることで、複数の要素やページの表示を可能にするユーザーインターフェイスパターンのこと。メニューをクリックすると、一つの要素が可視化され、他の要素は見えなくなる。