Version imprimable du sujet

Cliquez ici pour voir ce sujet dans son format original

Forums MacBidouille _ Les Langages Du Web _ Bouton « suivant » dans script Javascript

Écrit par : Neozio 10 Feb 2017, 08:17

Bonjour à tous.

J'espère que quelqu'un pourra m'aider. J'ai trouvé ce super script Javascript pour un slide :
https://codyhouse.co/demo/pointy-slider/index.html

Voici le javascript :

Code

jQuery(document).ready(function($){
    var sliderContainers = $('.cd-slider-wrapper');

    if( sliderContainers.length > 0 ) initBlockSlider(sliderContainers);

    function initBlockSlider(sliderContainers) {
        sliderContainers.each(function(){
            var sliderContainer = $(this),
                slides = sliderContainer.children('.cd-slider').children('li'),
                sliderPagination = createSliderPagination(sliderContainer);

            sliderPagination.on('click', function(event){
                event.preventDefault();
                var selected = $(this),
                    index = selected.index();
                updateSlider(index, sliderPagination, slides);
            });

            sliderContainer.on('swipeleft', function(){
                var bool = enableSwipe(sliderContainer),
                    visibleSlide = sliderContainer.find('.is-visible').last(),
                    visibleSlideIndex = visibleSlide.index();
                if(!visibleSlide.is(':last-child') && bool) {updateSlider(visibleSlideIndex + 1, sliderPagination, slides);}
            });

            sliderContainer.on('swiperight', function(){
                var bool = enableSwipe(sliderContainer),
                    visibleSlide = sliderContainer.find('.is-visible').last(),
                    visibleSlideIndex = visibleSlide.index();
                if(!visibleSlide.is(':first-child') && bool) {updateSlider(visibleSlideIndex - 1, sliderPagination, slides);}
            });
        });
    }

    function createSliderPagination(container){
        var wrapper = $('<ol class="cd-slider-navigation"></ol>');
        container.children('.cd-slider').find('li').each(function(index){
            var dotWrapper = (index == 0) ? $('<li class="selected"></li>') : $('<li></li>'),
                dot = $('<a href="#0"></a>').appendTo(dotWrapper);
            dotWrapper.appendTo(wrapper);
            var dotText = ( index+1 < 10 ) ? '0'+ (index+1) : index+1;
            dot.text(dotText);
        });
        wrapper.appendTo(container);
        return wrapper.children('li');
    }

    function updateSlider(n, navigation, slides) {
        navigation.removeClass('selected').eq(n).addClass('selected');
        slides.eq(n).addClass('is-visible').removeClass('covered').prevAll('li').addClass('is-visible covered').end().nextAll('li').removeClass('is-visible covered');

        //fixes a bug on Firefox with ul.cd-slider-navigation z-index
        navigation.parent('ul').addClass('slider-animating').on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
            $(this).removeClass('slider-animating');
        });
    }

    function enableSwipe(container) {
        return ( container.parents('.touch').length > 0 );
    }
});

Je souhaite simplement ajouter un bouton « Suivant », un lien <a> dans le texte de gauche. Je suppose que je dois utiliser la fonction updateSlider() mais mes tentatives sont vaines. Je sens que j'arrive à mes limites de connaissance. J'ai besoin d'un peu d'aide car j'ai quand même le sentiment que la solution n'est pas difficile.

Merci d'avance.

Écrit par : No6 12 Feb 2017, 01:50

Les boutons de navigations pour chacune des pages sont générés par le script lui même, lors de sont instanciation => sliderContainers.each(function(){

donc si tu veux ajouter un bouton suivant il faut commencer par créer une variable pour conserver le numéro de page courant,
cliquer sur le bouton suivant devra faire un +1 sur ce compteur (mais sans aller au delà du nombre de page, donc prévoir un mode off du bouton si on est à la fin
bien sur remettre ce bouton à la bonne valeur si l'utilisateur clique sur un accès directe sur une page, et en prévoyant de remettre à on ou off le bouton suivant selon le cas...

Bref un p'tit délire de code à faire, tu paie combien ?

Écrit par : scoch 18 Feb 2017, 13:59

Bonjour,

Dans le cas où tu insères à la main les liens « suivant » dans la zone de texte à gauche, affecte-leur une classe « suivant » qui servira de sélecteur, et bien sûr, tu n'ajoutes pas de lien suivant à la dernière page

Code

<div class="cd-half-block content">
    <div>
        <h2>Slide Number 3</h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugit ullam voluptatum tenetur ab, non beatae, impedit dolorem itaque voluptates facilis necessitatibus suscipit dolor rerum dolores dignissimos alias facere sunt aliquid.
        </p>
        <a href="#" class="btn suivant">Suivant</a>
    </div>
</div>

Dans main.js, dans la fonction initBlockSlider, dans la boucle sliderContainers.each, récupérer la liste des boutons suivant et leur affecter un click qui passe son index en paramètre de la fonction appelée.

Code

var suivants = document.querySelectorAll('.suivant');
for(var i=0; i<suivants.length; i++) {
suivants[i].addEventListener('click', cliquerBtnSuivant(i, updateSlider, sliderPagination, slides));
}

Et après la boucle sliderContainers.each, au même niveau que les autres fonctions :

Code

/* Paramètres de cliquerBtnSuivant :
pId = index du bouton suivant
pFonction = updateSlider
pSliderPagination = sliderPagination
pSlides = slides
*/
function cliquerBtnSuivant(pId, pFonction, pSliderPagination, pSlides) {
    return function(e) {
        e.preventDefault();
        pFonction(pId+1, pSliderPagination, pSlides);
    }
}

Voilà qui fonctionne. Il y a bien sûr moyen d'optimiser cela.

Propulsé par Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)