[mostSlider] Fonctionnement du slide

**dhillig** · 24/11/2021, 23h01

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 :

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
        }

ainsi que le

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>

et le JS qui va avec :

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>

Le slider se trouve au dessus de l'Iframe YOUTUBE, si vous désirez le voir en live :
http://lapagetest.fr
En espérant que vous pourrez m'aider.
Merci et bonne soirée,
dh

**jreaux62** · 24/11/2021, 23h52

Encore une fois, si tu ne donnes pas le lien* vers la page où tu as copié ce code, on ne peut pas t'aider.

* En tout cas, ce n'est pas à nous d'aller le chercher (mostSlider)

Moi, j'utilise celui-ci :

https://kenwheeler.github.io/slick/

**dhillig** · 25/11/2021, 00h03

Bonsoir jreaux,
https://lapagetest.fr/mostslider-mas...ing/index.html
Je ne retrouve pas le lien de la démo, mais je te donne le code que tu désires ainsi que les fichiers js si tu veux.
Merci à toi et bonne soirée,
dh