web-dev-qa-db-fra.com

Utilisation d'un curseur d'image deux fois sur la même page

Je souhaite créer un curseur d'image à l'aide de jQuery/JavaScript. J'attrape les images du backend où j'ai créé des galeries dans mon propre type de publication.

Le problème: Je souhaite utiliser ce curseur plus d'une fois sur le même site. Si je l'utilise deux fois, il passe par la première galerie ET passe par la prochaine (seconde) galerie avec les mêmes boutons de navigation. Chaque curseur ne doit fonctionner qu'avec ses propres boutons de navigation.

Mon modèle ressemble à ceci:

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>';

J'attrape un tableau dans les images de la galerie et les montre dans l'interface avec un écho. En bas se trouvent mes boutons pour la navigation par curseur.

Voici mon CSS pour le curseur:

.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;
}

Voici mon fichier 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

Mon approche (le prendre comme tel) générerait simplement un identifiant unique qui différencierait chaque curseur.
C’est quand même une bonne pratique lorsque la même fonctionnalité peut potentiellement être affichée plusieurs fois sur la même page.

Commencez par trouver un moyen de générer un $id incrémentiel à utiliser dans votre modèle. Peut-être un identifiant d'instanciation ... Cela dépend vraiment de la manière dont vous avez implémenté votre solution, je ne peux pas en dire plus à partir des informations fournies.

Ensuite, dans votre template , ajoutez l’attribut id d’une section:

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

Ensuite, dans votre script JS :

Obtenez l'attribut id du parent <section> du bouton survolé, appelons-le $section_id.

Puis changez votre sélecteur en:

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