aide JS SLIDER TEXT

[Kas 2]

Bonsoir, je n'ai aucune base en js et, je voudrais reproduire un slider comme sur la chaine BFMTV (le texte tout en bas NEWS 24/7) que l'on voit dans leurs émissions, qui pourrait m'aider, merci

 

TEXTE 1 -> TEXTE 2 -> TEXTE 3 -> TEXTE 4

[Hygie 85]

Salut,

 

Pour éviter de t'embêter, tu as une balise en HTML pour faire exactement pareil

<marquee>Le texte à faire défiler</marquee>

Si tu veux plus d'informations, je t'invite à aller sur ce site: http://www.eclairement.com/Faire-defiler-un-texte-en-HTML 

 

- Rick

[Henri 80]

Effectivement, le marquee html est 1000 fois plus simple que le JS mais si tu insistes vraiment ,avec mon ami google , j'ai trouvé ceci : https://codepen.io/aamirafridi/pen/qgutw (attention, il faut 2 librairies JS, voir les paramètres du site dans l'onglet JS )

 

[Romuald-ROCMS 6]

J'aime pas dire sa mais google est ton ami même sans connaissance avec de la bonne foie tu va y arriver, bon courage

[Arwantys 643]

Il y a 15 heures, Rick a dit :

Salut,

 

Pour éviter de t'embêter, tu as une balise en HTML pour faire exactement pareil

<marquee>Le texte à faire défiler</marquee>

Si tu veux plus d'informations, je t'invite à aller sur ce site: http://www.eclairement.com/Faire-defiler-un-texte-en-HTML 

 

- Rick

Obsolète  

 

Tiens https://github.com/aamirafridi/jQuery.Marquee tu as la doc détaillé ainsi que la librairie, si tu suis correctement en 5 minutes t'a fini

 

 

Il y a 14 heures, Romuald-ROCMS a dit :

J'aime pas dire sa mais google est ton ami même sans connaissance avec de la bonne foie tu va y arriver, bon courage

Aucun intérêt de poster un message comme ça, il demande de l'aide pas une leçon de moral 

[Romuald-ROCMS 6]

De l aide je veut bien mais sachant  qu'ils  y a un tas de topic sur différent forum répondant à sa question je trouve sa inutile 

[Hygie 85]

Il y a 5 heures, Arwantys a dit :

Obsolète  

 

Tiens https://github.com/aamirafridi/jQuery.Marquee tu as la doc détaillé ainsi que la librairie, si tu suis correctement en 5 minutes t'a fini

 

Ah je savais pas, je t'avoue que cela fait longtemps que je n'ai pas fait de page avec ces balises !

Merci pour la librairie du coup

[Kas 2]

<div id="news1">
<div id="texti">
	<table width="50%" align="center">
<tr>
<td>
<div class="slide">
<ul>
<li>
<a style="font-size: 25px;line-height: 25px;color:white;justify-content: center;align-items: center;padding: 0px 170px;display: flex;margin-top: 5px;width: 1728px;">1 inshare c'est super, on ne s'ennuie pas, on se réjouit de voir le nouveau membre chaque mois le nouveau membre, l'équipe admin est cool je trouve (suce boules) !!!!!!!!!!!!!!!!!</a>
</li>
<li>
<a style="font-size: 25px;line-height: 25px;color:white;justify-content: center;align-items: center;padding: 0px 170px;display: flex;margin-top: 5px;width: 1728px;margin-left: 50%;">2 inshare c'est super, on ne s'ennuie pas, on se réjouit de voir le nouveau membre chaque mois le nouveau membre, l'équipe admin est cool je trouve (suce boules) !!!!!!!!!!!!!!!!!</a>
</li>
<li>
<a style="font-size: 25px;line-height: 25px;color:white;justify-content: center;align-items: center;padding: 0px 170px;display: flex;margin-top: 5px;width: 1728px;margin-left: 100ù;">3 inshare c'est super, on ne s'ennuie pas, on se réjouit de voir le nouveau membre chaque mois le nouveau membre, l'équipe admin est cool je trouve (suce boules) !!!!!!!!!!!!!!!!!</a>
</li>
</ul>
</div>
</td>
</tr>
</table>
</div>
</div>

 

[Kas 2]

Il y a 8 heures, Arwantys a dit :

Obsolète  

 

Tiens https://github.com/aamirafridi/jQuery.Marquee tu as la doc détaillé ainsi que la librairie, si tu suis correctement en 5 minutes t'a fini

 

 

Aucun intérêt de poster un message comme ça, il demande de l'aide pas une leçon de moral 

Merci pour ta réponse qui m'oriente, cependant entre temps j'ai trouvé un code css animation voici le code :

html

<div id="news1">
<div id="texti">
	<table width="50%" align="center">
<tr>
<td>
<div class="slide">
<ul>
<li>
<a style="font-size: 25px;line-height: 25px;color:white;justify-content: center;align-items: center;padding: 0px 170px;display: flex;margin-top: 5px;width: 1728px;">1 inshare c'est super, on ne s'ennuie pas, on se réjouit de voir le nouveau membre chaque mois le nouveau membre, l'équipe admin est cool je trouve (suce boules) !!!!!!!!!!!!!!!!!</a>
</li>
<li>
<a style="font-size: 25px;line-height: 25px;color:white;justify-content: center;align-items: center;padding: 0px 170px;display: flex;margin-top: 5px;width: 1728px;margin-left: 50%;">2 inshare c'est super, on ne s'ennuie pas, on se réjouit de voir le nouveau membre chaque mois le nouveau membre, l'équipe admin est cool je trouve (suce boules) !!!!!!!!!!!!!!!!!</a>
</li>
<li>
<a style="font-size: 25px;line-height: 25px;color:white;justify-content: center;align-items: center;padding: 0px 170px;display: flex;margin-top: 5px;width: 1728px;margin-left: 100ù;">3 inshare c'est super, on ne s'ennuie pas, on se réjouit de voir le nouveau membre chaque mois le nouveau membre, l'équipe admin est cool je trouve (suce boules) !!!!!!!!!!!!!!!!!</a>
</li>
</ul>
</div>
</td>
</tr>
</table>
</div>
</div>

css

#news1 {
    position: fixed;
    z-index: 999999;
    width: 100%;
    height: 60px;
    bottom: 15px;
    left: 0;
    background: #a1130be6;
    font-size: 120%;
}
.slide {
 width:100%;
 height:60px;
 margin: auto;
 overflow: hidden;
 margin-top: -23px;
}
.slide ul {
 display: flex;
 padding: 0;
 width: 300%;
 animation: cambio 15s infinite alternate linear;
 animation-timing-function: ease-in;
}
.slide li {
 width:100%;
 list-style: none;
}
.slide img {
 width:100%;
}
@keyframes cambio{
 0% { margin-left: 0;}
 20% { margin-left: 0;}
 
 25% { margin-left: -100%;}
 45% { margin-left: -100%;}
 
 50% { margin-left: -200%;}
 70% { margin-left: -200%;}
 
 75% { margin-left: -300%;}
 100% { margin-left: -300%;}
}

la question que je me pose c'est comment faire pour que le texte reste 20s sur le texte 1 puis passe au 2 20sec puis passe au 3 20 sec puis au 1  faisant toujours le même slide de gauche il se casse à droite

[Solife 1,347]

    Salut Kas ,
    Ton sujet a été déplacé pour une des deux raisons suivantes :

    - Ta demande a été résolue.

    - Ton sujet se trouvait dans la mauvaise catégorie.

        
      Ceci est un message automatique.

[Narzo 759]

    Salut Kas ,
    Ton sujet a été déplacé pour une des deux raisons suivantes :

    - Ta demande a été résolue.

    - Ton sujet se trouvait dans la mauvaise catégorie.

        
      Ceci est un message automatique.