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 :
Merci pour votre aide.
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 ; }
Partager