Mettre un carroussel d'image

[.lolita]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Moi uniquement
Lien du forum : http://lacaverneagigi.forums-actifs.com

Description du problème

Bonjour j'aurais voulu mettre un carrousel d'image sur la page d'accueil ou le portail de mon forum mais je ne sais pas comment faire , si il existe un tuto ou autre explications je serais prenante et enchantée d'apprendre a le faire , merci d'avance et bonne fin de journée a tous !

j'ai vue ça sur un autre forum mais je n'y suis as inscrite donc peux pas demander de l'aide !

[Bipo]

Bonsoir @choupette60,

A toutes fins utiles, peut-être que cette astuce pourrait vous intéresser : Créer un diaporama d'images défilantes.

Bonne soirée sur Forumactif.
Bipo.

[.lolita]

Bonjour bipo merci mais j'aurais préféré comme sur ce forum !

https://www.graphisme-lesangesdenadege.com/portal

absente ce week end merci de ne pas verrouiller mon post

[creange]

Bonjour Choupette je pense que ce carroussel a été fait avec un logiciel flash ou autre 
avant d'être installé sur le forum ..
Bon week end

[Lutins]

Bonjour @choupette60,

Bonjour bipo merci mais j'aurais préféré comme sur ce forum !

https://www.graphisme-lesangesdenadege.com/portal

absente ce week end merci de ne pas verrouiller  mon post

Ce forum semble appartenir à une habituée du Forum des Forums, à savoir @Chéryl145 ! Je me permets donc de la taguer afin qu'elle réponde directement à votre demande.

---

Bonjour @creange,

Bonjour Choupette je pense que ce carroussel a été fait avec un logiciel flash ou autre 
avant d'être installé sur le forum ..
Bon week end

Ce n'est absolument pas du flash (sachant qu'il n'est plus supporté par les navigateurs) et cela n'a pas été réalisé par un "logiciel". C'est une combinaison de HTML + CSS qui permet d'avoir ce rendu  

Bonne journée

[creange]

Bonjour Lutins oui j'ai vu que le le logiciel Flash ne fonctionnait plus l'ayant moi même essayé 
mais j'ignorais que l'on pouvait faire ce carroussel avec  de l'html et du css
Merci pour l'information Lutins je note ça peut servir 
bon week end

[.lolita]

Bonjour merci pour vos réponse finalement j'ai mis le diaporama mais comment le centré !

[creange]

Mets ceci au début et à la fin de ton code

Code:

[center] ton texte ici  [/center]

ça devrait marcher

bonne journée

[.lolita]

Bonjour merci ça marche pas ça déforme tout !

[Lutins]

Bonjour @choupette60,

Ce qui serait pratique pour vous aider, c'est d'avoir le code du carrousel ! Pouvez-vous nous le fournir en le mettant bien entre les balises [code].

Lutins.

[.lolita]

Bonsoir lutin merci de votre aide voici le code !

Code:

<style type="text/css">#rotator1671468739704 {height:510px;} #rotator1671468739704 a{position:absolute;background:#FFFFFF;border:1px solid #CCCCCC;padding:4px;} #rotator1671468739704 img { height:500;width:500; }</style><div id="rotator1671468739704"><a id="itemActif1671468739704" style="z-index:999" href="#" title="" target="_blank"><img src="https://i.goopics.net/4qivp4.jpg" alt="" /></a><a  href="#" title="" target="_blank"><img src="https://i.goopics.net/inc5rw.jpg" alt="" /></a><a  href="#" title="" target="_blank"><img src="https://i.goopics.net/m5mldb.gif" alt="" /></a><a  href="#" title="" target="_blank"><img src="https://i.goopics.net/8eb9mq.png" alt="" /></a><a  href="#" title="" target="_blank"><img src="https://i.goopics.net/6a5s1d.png" alt="" /></a><a  href="#" title="" target="_blank"><img src="https://i.goopics.net/613wwt.png" alt="" /></a><a  href="#" title="" target="_blank"><img src="https://i.goopics.net/h7kg20.jpg" alt="" /></a><a  href="#" title="" target="_blank"><img src="https://i.goopics.net/tm295f.png" alt="" /></a></div><script type="text/javascript">(function(){var r = document.getElementById("rotator1671468739704"), l = r.getElementsByTagName("A"), rotate = window.setInterval(function() {var a = document.getElementById("itemActif1671468739704"), n = jQuery(a).next()[0] || l[0]; if (!a) return window.clearInterval(rotate); n.style.opacity = 1;n.style.zIndex = 998;jQuery(a).animate({"opacity":0},800,"linear",function() {a.id = "";a.style.zIndex = "";n.id = "itemActif1671468739704";n.style.zIndex = 999})},3500)})();</script>

[Lutins]

Re @choupette60,

Je suis parti du principe que votre carrousel sera placé dans :

Panneau d'administration  Affichage  Page d'accueil - Généralités, Message sur la page d'accueil

voici le code corrigé :

Code:

<style type="text/css">
    #rotator1671468739704 {
        height: 510px;
        display: flex;
        justify-content: center;
    }

    #rotator1671468739704 a {
        position: absolute;
        background: #FFFFFF;
        border: 1px solid #CCCCCC;
        padding: 4px;
    }

    #rotator1671468739704 img {
        height: 500;
        width: 500;
    }
</style>   
<div id="rotator1671468739704">
           <a target="_blank" title="" href="#" style="z-index:999" id="itemActif1671468739704"><img alt="" src="https://i.goopics.net/4qivp4.jpg" /></a><a target="_blank" title="" href="#"><img alt="" src="https://i.goopics.net/inc5rw.jpg" /></a><a target="_blank" title="" href="#"><img alt="" src="https://i.goopics.net/m5mldb.gif" /></a><a target="_blank" title="" href="#"><img alt="" src="https://i.goopics.net/8eb9mq.png" /></a><a target="_blank" title="" href="#"><img alt="" src="https://i.goopics.net/6a5s1d.png" /></a><a target="_blank" title="" href="#"><img alt="" src="https://i.goopics.net/613wwt.png" /></a><a target="_blank" title="" href="#"><img alt="" src="https://i.goopics.net/h7kg20.jpg" /></a><a target="_blank" title="" href="#"><img alt="" src="https://i.goopics.net/tm295f.png" /></a>   
</div><script type="text/javascript">
    (function() {
        var r = document.getElementById("rotator1671468739704"),
            l = r.getElementsByTagName("A"),
            rotate = window.setInterval(function() {
                var a = document.getElementById("itemActif1671468739704"),
                    n = jQuery(a).next()[0] || l[0];
                if (!a) return window.clearInterval(rotate);
                n.style.opacity = 1;
                n.style.zIndex = 998;
                jQuery(a).animate({
                    "opacity": 0
                }, 800, "linear", function() {
                    a.id = "";
                    a.style.zIndex = "";
                    n.id = "itemActif1671468739704";
                    n.style.zIndex = 999
                })
            }, 3500)
    })();
</script>

Voir illustration :

[.lolita]

Bonjour merci ça fonctionne ! bon noel a vous !