Slider texte avec image lien

**beny56** · 21/09/2016, 15h17

Bonjour,
J'ai cherché beaucoup sur google les sliders texte avec image lien mais je n'ai pas trouvé le bon exemple qui me convient pour mon blog. Ent fait le style de slider que je cherche c'est qu'il soit un texte fixe dans une colonne et la colonne à coté contient une image qui va se diriger vers un lien, et je voudrais que l'image se change quand on clique sur une flèche par exemple.
J'espère trouver ce modèle de slider.
Merci beaucoup à vote aide.

**eleydet** · 21/09/2016, 15h44

Bonjour,

Voulez-vous nous proposer quelques images pour nous aider à comprendre?

**beny56** · 21/09/2016, 17h16

Merci pour votre réponse, à peu près proche de cet exemple ici mais je voudrais que le texte reste fixe dans une colonne, et uniquement l'image qui va être changer si on clique au-dessus par un bouton next.

**eleydet** · 21/09/2016, 21h07

Bonsoir,

Ce "slider" me semble simple. Il me paraît plus facile de le construire à partir de zéro que d'en trouver un déjà tout fait et de l'adapter.

Pourquoi ne pas créer un tableau avec une ligne et deux colonnes, plusieurs images à gauche pouvant défiler avec un bout de code en JavaScript, et le texte placé à droite?

**beny56** · 21/09/2016, 23h13

Je ne comprends pas trop en programmation et en développement, j'ai essayé mais je ne sais pas ou dois je mettre le code exactement.

**eleydet** · 22/09/2016, 08h31

Bonjour,

Je ne comprends pas trop en programmation et en développement,

Dans ce cas, il vous faut consacrer un peu de temps à apprendre, en commençant par le HTML, puis le CSS et enfin le Javascript.
Un début de solution, peut-être?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script>
      var image_affichee="numero1";
      function changer() {
        if (image_affichee=="numero1") {
	  document.getElementById("images").src="image2.jpg";
	  image_affichee="numero2";
        }
        else if (image_affichee=="numero2") {
	  document.getElementById("images").src="image3.jpg";
	  image_affichee="numero3";
        }
        else if (image_affichee=="numero3") {
	  document.getElementById("images").src="image1.jpg";
	  image_affichee="numero1";
        }
      }
    </script>
    <style>
      table { margin : auto;}
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td><img src="image1.jpg" id="images" onclick="changer();"></td> 
        <td>Bla bla...</td> 
      </tr>
    </table> 
  </body>
</html>

Slider texte avec image lien

JavaScript

Vue hybride

Discussions similaires

Partager

Partager