Bouton « suivant » dans script Javascript |
Bienvenue invité ( Connexion | Inscription )
Bouton « suivant » dans script Javascript |
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 |
|
|
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 ? 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) |
|
|
18 Feb 2017, 13:59
Message
#3
|
|
Macbidouilleur d'Or ! Groupe : Membres Messages : 4 885 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 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
|
|
|
Nous sommes le : 21st September 2024 - 17:49 |