Intégrer les navigations avec les bullets
MaralS opened this issue · comments
Bonjour Baptiste,
Déjà je voulais dire que ton travail est juste fantastique et ton slider manager très utile.
Je vais peut être poser une question bête mais je souhaiterais intégrer les bullets dans les sliders.
J'ai réussi à les générer en fonction du nombre de slides, de mettre en surbrillance le bullet correspondant à la slide.
C'est l'effet cliquable qui me pose problème.
J'avoue que je ne sais pas trop comment faire :/
Merci d'avance pour ton aide,
Très belle journée,
Maral
Hello @MaralS,
Content que le module te soit utile et qu'il te plaise! Concernant les bullets, ce que tu peux faire c'est ajouter un eventListener au click sur chaque bullet, et simplement appeler la fonction goTo:
const index = 1
manager.goTo(index)Ce que je vais habituellement, c'est ajouter les index de chaque bullet dans la loop:
<div class="Bullet" data-index="0"></div>
<div class="Bullet" data-index="1"></div>
<div class="Bullet" data-index="2"></div>Ensuite, au click, tu peux récupérer l'index:
const index = e.currentTarget.getAttribute('data-index')Dis-moi,
Coucou @baptistebriel,
Je te remercie pour ta réactivité. En essayant d'appliquer tes conseils (je suis débutante, à la base je suis pas spécialiste en JavaScript), j'ai une erreur manager is not defined.
Juste après slider.init()
/* ------------------------------------------------------------
----- Création des bullets en fonction-------------------------
----- du nombre de balises <section> présentes dans la page ---
----- Ajout des id et des classes associées -------------------
---------------------------------------------------------------*/
var layoutContainer = document.getElementById("__layout")
var dotContainer = document.createElement("div")
dotContainer.className = "js-interactive-dots"
dotContainer.id = "dot-nav"
layoutContainer.appendChild(dotContainer)
/* ------------Pour chaque bullet ajouter un certain ----------
----- nombre d'attributs liés aux sections --------------------
---------*data-theme ------------------------------------------
---------*data-idx --------------------------------------------
---------*href ------------------------------------------------
---------*data-active -----------------------------------------*/
var i;
for (i = 0; i < slides.length; i++) {
var dot = document.createElement("a")
dot.className = "puce"
dotContainer.appendChild(dot)
dot.setAttribute("data-active", "0")
dot.setAttribute("data-idx", i)
dot.setAttribute("href", "#" + slides[i].dataset.title)
dot.setAttribute("data-theme", slides[i].dataset.theme)
}
var dots = [].slice.call(document.querySelectorAll(".puce"))
/* ----------- En fonction du clic sur chaque dot,-------------
-------------- afficher la slide correspondante ---------------
-------------- masquer les autres -----------------------------*/
dots.forEach((dot, i) => {
dot.addEventListener('click', () => {
console.log("clic sur le bullet " + i)
manager.goTo(i) //result manager is not defined
i = e.currentTarget.getAttribute('data-idx')
})
})
C'est un peu confus dans mon cerveau de designer peu réceptif au javascript :)
Merci pour ton aide précieuse,
Bien à toi,
Maral
Ah, c'est tout simplement parce que ta variable s'appelle slider et non manager...
Essaye de remplacer ton code par ceçi:
dots.forEach((dot, i) => {
dot.addEventListener('click', (e) => {
var index = e.currentTarget.getAttribute('data-idx')
console.log("clic sur le bullet " + index)
// effectivement, vu ta boucle, tu pourrait sans doute utiliser la variable i
// normalement, i == index :)
slider.goTo(index)
})
})@baptistebriel merci beaucoup