Diaporama ajouter flèche gauche et droite

[Mat]

Bonjour ^^,
J'ai sur forum un diaporama sur la page d'accueil ^^
J'ai suivi pour cela, ce tuto :
https://forum.forumactif.com/t377148-
Mais je voudrais savoir s' il y aurait la possibilité d'ajouter des flèches pour passer d'une diapo à l'autre ou pour revenir à la diapo précédente, sans avoir à attendre le temps défini par le code ^^
Merci d'avance ^^

[Mat]

Et un up

[Mat]

Et un up

[Mat]

Et un up

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Mat]

Et un up

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Mat]

Et un up

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Mat]

Et un up

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Mat]

Et un up

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Mat]

Et un up

[Walt]

Bonjour,

@Ange Tuteur, auteur du tutoriel original (et donc du script) pourra probablement vous aider s'il passe par ici.

Cordialement,
Walt

[Mat]

Bonjour,

@"Ange Tuteur", auteur du tutoriel original (et donc du script) pourra probablement vous aider s'il passe par ici.

Cordialement,
Walt

Un grand merci  (encore une fois ).

[Mat]

Et un up

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Mat]

Et un up

[Ange Tuteur]

Bonjour FkS_DjMat,

Utiliser le script suivant pour ajouter des flèches au diaporama.
PA > Modules > Gestion des codes JavaScript

Placement : sur toutes les pages

Code:

$(function () {
  var rotator = $('[id^="rotator"]'),
      i = 0,
      j = rotator.length;

  if (j) {
    // arrow styles
    $('head').append('<style type="text/css">.rotator-arrows{position:absolute}.rotator-arrows>span{color:#FFF;font-size:24px;font-weight:700;text-align:center;background:#000;width:25px;height:40px;line-height:40px;position:absolute;bottom:-85px;z-index:1000;cursor:pointer;opacity:.2}.rotator-arrows>span:hover{opacity:1}.rotator-arrow-left{left:10px}.rotator-arrow-right{left:125px}</style>');

    // change the focused slide
    window.moveRotator = function (caller, next) {
      var rotator = $(caller).parent().next()[0],
          actif = $('[id^="itemActif"]', rotator)[0],
          slide = rotator.getElementsByTagName('A'),
          focus = next ?
            actif.nextSibling ? actif.nextSibling : slide[0]
            :
            actif.previousSibling ? actif.previousSibling : slide[slide.length - 1];

      if (focus) {
        focus.id = actif.id;
        focus.style.opacity = 1;
        focus.style.zIndex = 999;

        actif.id = '';
        actif.style.opacity = 0;
        actif.style.zIndex = '';
      }
    };

    // add arrows before all rotators
    for (; i < j; i++) {
      rotator[i].insertAdjacentHTML('beforebegin',
        '<div class="rotator-arrows">'+
          '<span class="rotator-arrow-left" onclick="moveRotator(this, 0);">&lt;</span>'+
          '<span class="rotator-arrow-right" onclick="moveRotator(this, 1);" style="left:' + (rotator[i].firstChild.getBoundingClientRect().width - 35) + 'px;">&gt;</span>'+
        '</div>'
      );
    }

  }
});

Le résultat :


Bonne journée

[Mat]

Bonjour FkS_DjMat,

Utiliser le script suivant pour ajouter des flèches au diaporama.
PA > Modules > Gestion des codes JavaScript

Placement : sur toutes les pages

Code:

$(function () {
  var rotator = $('[id^="rotator"]'),
      i = 0,
      j = rotator.length;

  if (j) {
    // arrow styles
    $('head').append('<style type="text/css">.rotator-arrows{position:absolute}.rotator-arrows>span{color:#FFF;font-size:24px;font-weight:700;text-align:center;background:#000;width:25px;height:40px;line-height:40px;position:absolute;bottom:-85px;z-index:1000;cursor:pointer;opacity:.2}.rotator-arrows>span:hover{opacity:1}.rotator-arrow-left{left:10px}.rotator-arrow-right{left:125px}</style>');

    // change the focused slide
    window.moveRotator = function (caller, next) {
      var rotator = $(caller).parent().next()[0],
          actif = $('[id^="itemActif"]', rotator)[0],
          slide = rotator.getElementsByTagName('A'),
          focus = next ?
            actif.nextSibling ? actif.nextSibling : slide[0]
            :
            actif.previousSibling ? actif.previousSibling : slide[slide.length - 1];

      if (focus) {
        focus.id = actif.id;
        focus.style.opacity = 1;
        focus.style.zIndex = 999;

        actif.id = '';
        actif.style.opacity = 0;
        actif.style.zIndex = '';
      }
    };

    // add arrows before all rotators
    for (; i < j; i++) {
      rotator[i].insertAdjacentHTML('beforebegin',
        '<div class="rotator-arrows">'+
          '<span class="rotator-arrow-left" onclick="moveRotator(this, 0);"><</span>'+
          '<span class="rotator-arrow-right" onclick="moveRotator(this, 1);" style="left:' + (rotator[i].firstChild.getBoundingClientRect().width - 35) + 'px;">></span>'+
        '</div>'
      );
    }

  }
});

Le résultat :


Bonne journée

Merci
Mais, malheureusement, ça ne fonctionne pas
Je me souviens qu'un membre avait modifié le code de mon diaporama
Je vous l'envoie par mp

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Mat]

Et un up

[Ange Tuteur]

Re,

Essayez le script suivant :

Code:

$(window).load(function () {
  var rotator = $('[id^="rotator"]'),
      i = 0,
      j = rotator.length;
 
  if (j) {
    // arrow styles
    $('head').append('<style type="text/css">.rotator-arrows{position:absolute}.rotator-arrows>span{color:#FFF;font-size:24px;font-weight:700;text-align:center;background:#000;width:25px;height:40px;line-height:40px;position:absolute;z-index:1000;cursor:pointer;opacity:.2}.rotator-arrows>span:hover{opacity:1}.rotator-arrow-left{left:65px}.rotator-arrow-right{left:125px}</style>');
 
    // change the focused slide
    window.moveRotator = function (caller, next) {
      var rotator = $(caller).parent().next()[0],
          actif = $('[id^="itemActif"]', rotator)[0],
          slide = rotator.getElementsByTagName('A'),
          focus = next ?
            (actif.nextSibling && actif.nextSibling.tagName) ? actif.nextSibling : slide[0]
            :
            (actif.previousSibling && actif.previousSibling.tagName) ? actif.previousSibling : slide[slide.length - 1];
 
      if (focus) {
        focus.id = actif.id;
        focus.style.opacity = 1;
        focus.style.zIndex = 999;
 
        actif.id = '';
        actif.style.opacity = 0;
        actif.style.zIndex = '';
      }
    };
 
    // add arrows before all rotators
    for (; i < j; i++) {
      var image = rotator[i].getElementsByTagName('IMG')[0];
     
      rotator[i].insertAdjacentHTML('beforebegin',
        '<div class="rotator-arrows">'+
          '<span class="rotator-arrow-left" onclick="moveRotator(this, 0);" style="bottom:-' + ((+image.height / 2) + 20) + 'px;">&lt;</span>'+
          '<span class="rotator-arrow-right" onclick="moveRotator(this, 1);" style="left:' + (+image.width - 35) + 'px;bottom:-' + ((+image.height / 2) + 20) + 'px;">&gt;</span>'+
        '</div>'
      );
    }
 
  }
});


[Mat]

Re,

Essayez le script suivant :

Code:

$(window).load(function () {
  var rotator = $('[id^="rotator"]'),
      i = 0,
      j = rotator.length;
 
  if (j) {
    // arrow styles
    $('head').append('<style type="text/css">.rotator-arrows{position:absolute}.rotator-arrows>span{color:#FFF;font-size:24px;font-weight:700;text-align:center;background:#000;width:25px;height:40px;line-height:40px;position:absolute;z-index:1000;cursor:pointer;opacity:.2}.rotator-arrows>span:hover{opacity:1}.rotator-arrow-left{left:65px}.rotator-arrow-right{left:125px}</style>');
 
    // change the focused slide
    window.moveRotator = function (caller, next) {
      var rotator = $(caller).parent().next()[0],
          actif = $('[id^="itemActif"]', rotator)[0],
          slide = rotator.getElementsByTagName('A'),
          focus = next ?
            (actif.nextSibling && actif.nextSibling.tagName) ? actif.nextSibling : slide[0]
            :
            (actif.previousSibling && actif.previousSibling.tagName) ? actif.previousSibling : slide[slide.length - 1];
 
      if (focus) {
        focus.id = actif.id;
        focus.style.opacity = 1;
        focus.style.zIndex = 999;
 
        actif.id = '';
        actif.style.opacity = 0;
        actif.style.zIndex = '';
      }
    };
 
    // add arrows before all rotators
    for (; i < j; i++) {
      var image = rotator[i].getElementsByTagName('IMG')[0];
      
      rotator[i].insertAdjacentHTML('beforebegin',
        '<div class="rotator-arrows">'+
          '<span class="rotator-arrow-left" onclick="moveRotator(this, 0);" style="bottom:-' + ((+image.height / 2) + 20) + 'px;"><</span>'+
          '<span class="rotator-arrow-right" onclick="moveRotator(this, 1);" style="left:' + (+image.width - 35) + 'px;bottom:-' + ((+image.height / 2) + 20) + 'px;">></span>'+
        '</div>'
      );
    }
 
  }
});


Encore un grand merci, ça fonctionne un peu mieux
On vois les flèches mais elle bug :
Voici une vidéo de ce que ça donne  :

Au début de la vidéo je laisse aller le diaporama, après je recharge la page et j'essaye d'utiliser les flèches

Je vous remercie déja pour les 2 premiers essaies

Et si je peux vous demander autre chose, c'est de coller les flèches à droite et à gauche de l'image, j'ai encore de une marge de chaque coté de toutes manières

PS : je vous laisse aussi le lien de mon forum  :
http://bit.ly/2rRipBO

[Chacha]

Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 7 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement ! Ce sujet est déplacé à la corbeille, merci d'ouvrir un nouveau sujet si nécessaire, en respectant les Règles générales du forum.

[Chacha]

..	Bonjour, Le topic est replacé à la demande de l'auteur du sujet. A bientôt sur ForumActif

[Ange Tuteur]

Re,

Voici le script mis à jour :

Code:

$(window).load(function () {
  var rotator = $('[id^="rotator"]'),
      i = 0,
      j = rotator.length;
 
  if (j) {
    // arrow styles
    $('head').append('<style type="text/css">.rotator-arrows{position:absolute}.rotator-arrows>span{color:#FFF;font-size:24px;font-weight:700;text-align:center;background:#000;width:25px;height:40px;line-height:40px;position:absolute;z-index:1000;cursor:pointer;opacity:.2}.rotator-arrows>span:hover{opacity:1}.rotator-arrow-left{left:5px}.rotator-arrow-right{left:125px}</style>');
 
    // change the focused slide
    window.moveRotator = function (caller, next) {
      var rotator = $(caller).parent().next()[0],
          actif = $('[id^="itemActif"]', rotator)[0],
          slide = rotator.getElementsByTagName('A'),
          i = 0,
          j = slide.length,
          focus;

      // find the active index
      for (; i < j; i++) {
        if (slide[i] == actif) {
          focus = next ?
                    slide[i + 1] ? slide[i + 1] : slide[0]
                    :
                    slide[i - 1] ? slide[i - 1] : slide[slide.length - 1];
          break;
        }
      }
 
      // change the active slide
      if (focus) {
        focus.id = actif.id;
        focus.style.opacity = 1;
        focus.style.zIndex = 999;
 
        actif.id = '';
        actif.style.opacity = 0;
        actif.style.zIndex = '';
      }
    };
 
    // add arrows before all rotators
    for (; i < j; i++) {
      var image = rotator[i].getElementsByTagName('IMG')[0],
          height = ((+image.height / 2) + 20);
   
      rotator[i].insertAdjacentHTML('beforebegin',
        '<div class="rotator-arrows">'+
          '<span class="rotator-arrow-left" onclick="moveRotator(this, 0);" style="bottom:-' + height + 'px;">&lt;</span>'+
          '<span class="rotator-arrow-right" onclick="moveRotator(this, 1);" style="left:' + (+image.width + 35) + 'px;bottom:-' + height + 'px;">&gt;</span>'+
        '</div>'
      );
    }
 
  }
});

Bon dimanche

[Mat]

Re,

Voici le script mis à jour :

Code:

$(window).load(function () {
  var rotator = $('[id^="rotator"]'),
      i = 0,
      j = rotator.length;
 
  if (j) {
    // arrow styles
    $('head').append('<style type="text/css">.rotator-arrows{position:absolute}.rotator-arrows>span{color:#FFF;font-size:24px;font-weight:700;text-align:center;background:#000;width:25px;height:40px;line-height:40px;position:absolute;z-index:1000;cursor:pointer;opacity:.2}.rotator-arrows>span:hover{opacity:1}.rotator-arrow-left{left:5px}.rotator-arrow-right{left:125px}</style>');
 
    // change the focused slide
    window.moveRotator = function (caller, next) {
      var rotator = $(caller).parent().next()[0],
          actif = $('[id^="itemActif"]', rotator)[0],
          slide = rotator.getElementsByTagName('A'),
          i = 0,
          j = slide.length,
          focus;

      // find the active index
      for (; i < j; i++) {
        if (slide[i] == actif) {
          focus = next ?
                    slide[i + 1] ? slide[i + 1] : slide[0]
                    :
                    slide[i - 1] ? slide[i - 1] : slide[slide.length - 1];
          break;
        }
      }
 
      // change the active slide
      if (focus) {
        focus.id = actif.id;
        focus.style.opacity = 1;
        focus.style.zIndex = 999;
 
        actif.id = '';
        actif.style.opacity = 0;
        actif.style.zIndex = '';
      }
    };
 
    // add arrows before all rotators
    for (; i < j; i++) {
      var image = rotator[i].getElementsByTagName('IMG')[0],
          height = ((+image.height / 2) + 20);
    
      rotator[i].insertAdjacentHTML('beforebegin',
        '<div class="rotator-arrows">'+
          '<span class="rotator-arrow-left" onclick="moveRotator(this, 0);" style="bottom:-' + height + 'px;"><</span>'+
          '<span class="rotator-arrow-right" onclick="moveRotator(this, 1);" style="left:' + (+image.width + 35) + 'px;bottom:-' + height + 'px;">></span>'+
        '</div>'
      );
    }
 
  }
});

Bon dimanche

Géniallllllll  , ça marche 
Un très très très grand merci Ange Tuteur  
Et merci d'avoir passer plusieurs heures sur mon code