Bonsoir à tous,
J'étais persuadé d'avoir lancé une discussion mais je ne la retrouve pas en ligne
J'ai un slider qui slide quand il veut, souvent c'est du image par image. Pourtant j'ai bien vérifié la démo...
D'autre part, les arrow (flèche gauche et droite) n'apparaissent pas non plus.
je vous donne mes CSS :
ainsi que le
Code CSS : 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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90 .slider-wrapper{ margin: auto; width: 50%; height: auto; position: relative; background-color: black; padding-top: 100px; padding-bottom: 100px; } .slider-wrapper.default>div{ display:none } .slider-wrapper.default>div #slides{ font-weight: 400; color: #000; line-height: normal } .slider-wrapper.default>div #slides img{ border:0 } .slider-wrapper.default>div #slides>a{ line-height:0px } .slider-wrapper.default>div #slides h1, .slider-wrapper.default>div #slides h2, .slider-wrapper.default>div #slides h3, .slider-wrapper.default>div #slides h4{ padding: 1% 3% 1% 3%; color: #000; background-color: #000000; line-height: normal; text-align: center } .slider-wrapper.default>div #slides span, .slider-wrapper.default>div #slides p{ line-height:normal } .slider-wrapper.default>div .social{ position:absolute; top:4%;left:3%;z-index:10000 } .slider-wrapper.default>div .social div{ float:left;margin-right:10px } .slider-wrapper.default>div #bullets{ height:10px;position:absolute; top:4%; right:3%; z-index:10000 } .slider-wrapper.default>div #bullets .bullet{ min-height:12px; min-width:12px; border-radius:6px; margin-left:5px; float:left; cursor:pointer; background-color:#b4b4b4; background-color:rgba(255,255,255,0.6) } .slider-wrapper.default>div #bullets .bullet:hover{ background-color:#fff } .slider-wrapper.default>div #bullets .bullet.selected{ background-color:#fff } .slider-wrapper.default>div #left{ position:absolute; width:47px; height:47px; background-image:url(img/arrow.png); left:5%; top:50%; margin-top:-24px; z-index:999999; cursor:pointer } .slider-wrapper.default>div #right{ position:absolute; width:47px; height:47px; background-image:url(img/arrow.png); background-position:right top; right:5%; top:50%; margin-top:-24px; z-index:999999; cursor:pointer }
et le JS qui va avec :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3 <div class="slider-wrapper default"> <div id="slider"> <a href="http://500px.com/photo/47412316" target="_blank"><img src="images/1.jpg" /></a> <a href="http://500px.com/photo/39845938" target="_blank"><img src="images/2.jpg" /></a> <a href="http://500px.com/photo/43565628" target="_blank"><img src="images/3.jpg" /></a> </div> </div>
Le slider se trouve au dessus de l'Iframe YOUTUBE, si vous désirez le voir en live :
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8 <script> $(document).ready(function(){ var slider = $("#slider").mostSlider({ animation: 'slide', aniMethod: 'auto', }); }); </script>
http://lapagetest.fr
En espérant que vous pourrez m'aider.
Merci et bonne soirée,
dh
Partager