web-dev-qa-db-ja.com

同じページでImage Sliderを2回使用する

JQuery/JavaScriptを使用してImage Sliderを作成したいです。私は自分の投稿タイプでギャラリーを作成したバックエンドから画像をキャッチしています。

問題： 同じサイトでこのスライダを複数回使用したい。 2回使用すると、最初のギャラリーを通過し、同じナビゲーションボタンで次の（2番目の）ギャラリーを通過します。各スライダーは独自のナビゲーションボタンでのみ機能します。

私のテンプレートはこんな感じです：

echo '<section class="slider"><div class="cont">';

$galleryImages = get_post_gallery_images();
$gallaryLength = count( $galleryImages );

for( $i = 0; $i < $gallaryLength; $i++ ) {
    echo "<div>";
    echo "<img src='" . $galleryImages[ $i ] . "'>";
    echo "</div>";
}

echo '</div></section>';

私はギャラリーの画像内の配列をキャッチして、それらをエコーでフロントエンドに表示します。下部には、スライダーナビゲーション用のボタンがあります。

これが私のスライダーのCSSです。

.cont {
    float: right;
    position: relative;
    text-align: center;
    max-width: 200px;
    background-color: black;
}

.cont div {
    display: none;
    width: 100%;
    background-color: white;
}

.cont img {
    width: 100%;
    height: auto;
}

これが私のjQuery/JavaScriptファイルです。

$( document ).ready( function() {

    var currentIndex = 0;
    var items        = $( '.cont div' );
    var itemAmt      = items.length;

    function slideItems() {
        var item = items.eq( currentIndex );
        items.hide();
        item.css( 'display', 'inline-block' );
    }

    $( '.next' ).click( function() {
        currentIndex += 1;

        if( currentIndex > itemAmt - 1 ) {
            currentIndex = 0;
        }

        for( var k = 0; k < items.length; k++ ) {
            slideItems();
        }
    } );

    $( '.prev' ).click( function () {
        currentIndex -= 1;

        if( currentIndex < 0 ) {
            currentIndex = itemAmt - 1;
        }

        for( var x = 0; x < items.length; x++ ) {
            slideItems();
        }
    } );
} );
phpjqueryjavascriptgalleryslideshow
2
Unkdev

私のアプローチは（それをそのままにして）単に各スライダーを区別するだろうユニークなIDを生成することでしょう。
同じ機能が同じページに複数回表示される可能性がある場合は、とにかく良い方法です。

まず、テンプレートで使用する増分の$idを生成する方法を見つけます。たぶんインスタンスID ...これは本当にあなたがあなたのソリューションを実装した方法に依存します、私は提供された情報からもっと言うことはできません。

次に、 template に、セクションのid属性を追加します。

echo '<section id="slider_' . $id . '" class="slider">';

次に、 JSスクリプトで ：

ホバーボタンの親の<section>のid属性を取得し、それを$section_idと呼びましょう。

それから、セレクタを次のように変更します。

$("#$section_id .next").click(function () {});
3
ClemC