Bouton « suivant » dans script Javascript

[Neozio]

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.

[scoch]

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.

Ce message a été modifié par scoch - 18 Feb 2017, 13:59.