Créer un slider ?

[KitsuHG]

Détails techniques

Version du forum : AwesomeBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 14/06/2020
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour,
J'aimerais créer un slider avec à peu prêt le même design que dans le screen, vous pensez que c'est possible ? Si oui, vous pouvez m'aider ?

Merci à vous

[*Splash*]

Hi,
Sujet déjà traité ici : https://forum.forumactif.com/t369492-creez-un-slider

[Neptunia]

Coucou ^^


Sujet traité une bonne vingtaine de fois -> https://forum.forumactif.com/search?search_keywords=slider

Et certains de ces sujets renferment des pépites...

[KitsuHG]

Hello,
Alors j'ai consulté ce tutoriel: https://forum.forumactif.com/t223082-banniere-aleatoire-ou-defilante
Avec le code suivant:

Code:


$(function() {
  var duration = 7;
  var a = [
    "https://adresse1",
    "https://adresse2",
    "https://adresse3",
  ];
 
  b=function(){$("#pun-logo img,#i_logo,#logo img").attr("src",a[Math.floor(Math.random()*a.length)])};b();setInterval(b,duration*1000);
 
});


Mais j'obtiens ceci un petit truc en haut à gauche comme logo, hors je veux le mettre ici:
https://i.goopics.net/ZoLlv.png


Comment faire ?

[Neptunia]

Pourriez-vous poster le code exact que vous avez essayé ?

Celui en place sur votre fofo ...

[KitsuHG]

C'est celui dans le sujet ci dessus

[Neptunia]

En fait je parlais du script avec vos propres liens, mais plus besoin, j'ai réussi à le récupérer avec la console du navigateur.

Je teste un truc et je reviens...


... bah je laisse tomber.
Comme votre profil indiquait ModernBB j'avais fait quelque chose qui fonctionne, jusqu'à ce que je me rende compte que le fofo (et la demande) sont en awesomeBB.

Mon script qui fonctionnait sur toutes les versions est inopérant sur awesomeBB

[KitsuHG]

Ah bas pas de soucis, quelqu'un d'autre à une solution ?

[KitsuHG]

Ah bas pas de soucis, quelqu'un d'autre à une solution ?

[mSyx]

Hello o/
C'est ce genre de rendu que tu recherches ?: https://syxtestspace.forumactif.com/h5-slider-msyx

[*Splash*]

Hi
Il existe ce tuto pour avoir plusieurs images de header suivant plusieurs URL dédiées pour la version AwesomeBB
https://lesforums.caforum.fr/t516-awesomebb-plusieurs-images-de-header-sur-votre-forum#2293

[KitsuHG]

Hello o/
C'est ce genre de rendu que tu recherches ?: https://syxtestspace.forumactif.com/h5-slider-msyx

Oui c'est ça que je recherche !

[mSyx]

Re,
Le JS -à mettre dans un nouveau script dans la Gestion des codes Javascript:

Code:

var images=new Array('https://i.ibb.co/PYXbsp1/image.png','https://i.ibb.co/r05jBpB/image.png','https://i.ibb.co/gtScsNr/image.png');
var nextimage=0;

doSlideshow();

function doSlideshow()
{
    if($('.hslider').length!=0)
    {
        $('.hslider').fadeOut(1000,function(){slideshowFadeIn();$(this).remove()});
    }
    else
    {
        slideshowFadeIn();
    }
}
function slideshowFadeIn()
{
    $("div#header-banner").prepend($('<img class="hslider" src="'+images[nextimage++]+'" style="display:none">').fadeIn(1000,function(){setTimeout(doSlideshow,3000);}));
    if(nextimage>=images.length)
        nextimage=0;
}

Je te laisse mes images dans le code pour que tu puisses tester le code sans le modifier, pour déjà voir si ça fonctionne correctement.
Si ça te convient, il faudra changer les images au niveau de la première ligne.

Code:

var images=new Array('image1','image2','image3');

En sachant que tu peux en rajouter d'autres en répétant le même schéma. Exemple avec 5 images:

Code:

var images=new Array('image1','image2','image3','image4','image5');

edit: j'oublie le CSS '-'

Il faudra une touche de CSS pour éviter que les images dépassent (selon les images).

Pour que les images remplissent le header (au risque de les écraser):

Code:

.hslider {
  width: 100%;
  height: 100%;
}

Pour que les images gardent leur taille d'origine:

Code:

div#header-banner {
  overflow: hidden;
}

Pour que les images ne dépassent pas mais qu'elles soient forcées de faire toute la largeur du header:

Code:

div#header-banner {
  overflow: hidden;
}

.hslider {
  width: 100%;
  height: auto
}

[KitsuHG]

Oui c'est pas mal, mais comment je peux agrandir le header ? Parce que la mes images sont petites genre agrandir l'espace ?:

[mSyx]

Tu peux mettre un height: auto, mais il faudrait que tu modifies chacune de tes images pour qu'elles soient de la même taille:

Code:

div#header-banner {
  overflow: hidden;
  height: auto;
}

C'est pour un serveur SA:MP ou GTA 5 ? :b

[KitsuHG]

Merci, tout fonctionne correctement !

Oui, la faction police d'un serveur SA-MP, tu joue à ce jeu ?

[mSyx]

Niquel.
J'ai arrêté il y a quelques années, mais j'étais sur pas mal de serveurs; lrp, sarp, street kings et j'en passe :b

[KitsuHG]

Ah ouais cool, je connais bien-sûr, LRP qui est d'ailleurs toujours en service avec la plus grosse concentration de joueur de la communauté FR-RP. 

Si tu repasse dans lcoin, fais nous signe hein