IPB

Bienvenue invité ( Connexion | Inscription )

 
Reply to this topicStart new topic
> 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
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
scoch
posté 18 Feb 2017, 13:59
Message #3


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 4 803
Inscrit : 1 Jul 2010
Membre no 156 073



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 wink.gif

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.


--------------------
L'homme n'est que poussière... c'est dire l'importance du plumeau ! Alexandre Vialatte
Go to the top of the page
 
+Quote Post

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 : 29th March 2024 - 15:17