Discussion :

[solorac]

Bonsoir la Communauté,

Je viens de me créer une galerie de photos simple en utilisant des tutos et je voudrais ajouter deux boutons pour les faire défiler.

Je sais que ma galerie utlise du html et du js mais aussi du css.

Le but c'est au départ de choisir une mini-photo et ensuite à partir de ce positionnement de faire défiler à droite ou gauche en cliquant sur un bouton basique ou image (que je ferai).

Malgré mes recherches sur les forums et sur google je ne trouve rien de convaincant.

Pourriez-vous m'aider ?

Voici mon html :

Code html :

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
<div id="galerie">
  <ul id="galerie_mini">
    <li>
      <a href='../../images/N2!/convention/8686.jpg'><img src="../../images/N2!/convention/8686b.jpg"/></a>    </li>
    <li>
      <a href='../../images/N2!/convention/8687.jpg'><img src="../../images/N2!/convention/8687b.jpg"/></a>    </li>
    <li>
      <a href='../../images/N2!/convention/8689.jpg'><img src="../../images/N2!/convention/8689b.jpg"/></a>    </li>
    <li>
      <a href='../../images/N2!/convention/8686.jpg'><img src="../../images/N2!/convention/8686b.jpg"/></a>    </li>
    <li></ul>
 
  <dl id="photo">
    <dt>Convention N! 2017</dt>
    <dd><img id="big_pict" src="images/photo1.png"/></dd>
  </dl>
</div>

Le css :

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
div#galerie
{
  width: 1250px ;
  background: #EB6F71 ;
  border: 1px solid #dcb ;
  padding: 15px ;
  margin:auto;
  text-align: center ;
  font: 0.9em Georgia, serif ;
}
 
ul#galerie_mini
{
  margin: 0 ;
  padding: 0 ;
  list-style-type: none ;
}
 
ul#galerie_mini li
{
  float: left ;
}
 
ul#galerie_mini li a img
{
  margin: 2px 1px ;
  border: 1px solid #dcb ;
}
 
dl#photo
{
  clear: both ;
  margin: 0 auto ;
}
 
dl#photo dt
{
  font: italic 2.5em/1.5em Georgia, serif ;
  color: #dcb ;
}
 
dl#photo dd
{
  margin: 0 ;
}
 
dl#photo img
{
  border: 1px solid #dcb ;
}

Merci pour votre aide.

[vttman]

En passant ...
En ce qui me concerne, basiquement pour rechercher du code et des idées je regarde du coté codepen ...
donc en tapant "diaporama codepen" sous goo*gle j'ai déjà pas mal d'exemples + code
et aussi "slideshow codepen" après il suffit de copier/ s'approprier le code qui parait le + clair avec +/- de Javascript

[solorac]

Quelqu'un pourrait-il me mettre sur la voie ?