IPB

Bienvenue invité ( Connexion | Inscription )

> Bouton « suivant » dans script Javascript
Options
Neozio
posté 10 Feb 2017, 08:17
Message #1


Mr. Skin
**

Groupe : Membres
Messages : 341
Inscrit : 8 Apr 2004
Lieu : Colmar - Alsace
Membre no 17 353



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.


--------------------
Neozio

Matériel : iMac 27" i7 4 GHz •(fin 2015) 24 Go RAM • iPhone 7 256 GB • Apple Watch Series 2 •• LaCie d2 Thunderbolt 3 To • Réseau : Freebox Revolution
Go to the top of the page
 
+Quote Post
 
Start new topic
Réponse(s)
No6
posté 12 Feb 2017, 01:50
Message #2


Oui ?
*****

Groupe : Membres
Messages : 3 889
Inscrit : 24 Jun 2003
Lieu : BZH
Membre no 8 224



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 ? cool.gif

Ce message a été modifié par No6 - 12 Feb 2017, 01:51.


--------------------
"Je sais que vous croyez comprendre ce que vous pensez que j'ai dit, mais je ne suis pas sûr que vous réalisiez que ce que vous avez entendu n'est pas ce que je pense."
(Alan Greenspan)
Go to the top of the page
 
+Quote Post

Les messages de ce sujet


Reply to this topicStart new topic
1 utilisateur(s) sur ce sujet (1 invité(s) et 0 utilisateur(s) anonyme(s))
0 membre(s) :

 



Nous sommes le : 19th July 2025 - 21:53