我想使用jQuery/JavaScript创建一个图像滑块。我正在从后端捕获图像，在那里我以自己的帖子类型创建了图库。

The problem: 我想在同一个站点上多次使用此滑块。如果我使用它两次，它将使用相同的导航按钮在第一个库和下一个（第二个）库中运行。每个滑块只能使用自己的导航按钮。

我的模板如下所示：

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();
        }
    } );
} );

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

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