Une DIV (slider) qui n'apparait pas

**dhillig** · 22/11/2021, 06h17

Bonjour à tous,
Je tente de mettre un slider dans mon site, à regarder les CSS, je ne vois pas de conflit mais la <div> est comme inexistante.
J'ai bien mis les scripts et les fichiers sources, mais toujours rien.
Le

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
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
<div class="parallax">
			<img src="img/paris.jpg" alt="Paris" data-parallax='{"y": 230}'/>
		  <p>Paris est magique</p>	
		</div>
 
 
        <div class="slider-wrapper default">
	        <div id="slider">
		        <a href="http://500px.com/photo/47412316" target="_blank">
		        	<img src="../resources/images/1.jpg" class="bg" />
		        </a>
		        <a href="http://500px.com/photo/39845938" target="_blank">
		        	<img src="../resources/images/2.jpg" class="bg" />
		        </a>
		        <a href="http://500px.com/photo/43565628" target="_blank">
		        	<img src="../resources/images/3.jpg" class="bg" />
		        </a>
                	        <a href="http://500px.com/photo/47412316" target="_blank">
		        	<img src="../resources/images/1.jpg" class="bg" />
		        </a>
		        <a href="http://500px.com/photo/39845938" target="_blank">
		        	<img src="../resources/images/2.jpg" class="bg" />
		        </a>
		        <a href="http://500px.com/photo/43565628" target="_blank"><img src="../resources/images/3.jpg" class="bg" />
		        </a>
                	        <a href="http://500px.com/photo/47412316" target="_blank">
		        	<img src="../resources/images/1.jpg" class="bg" />
		        </a>
		        <a href="http://500px.com/photo/39845938" target="_blank">
		        	<img src="../resources/images/2.jpg" class="bg" />
		        </a>
		        <a href="http://500px.com/photo/43565628" target="_blank">
		        	<img src="../resources/images/3.jpg" class="bg" />
		        </a>
                	        <a href="http://500px.com/photo/47412316" target="_blank">
		        	<img src="../resources/images/1.jpg" class="bg" />
		        </a>
		        <a href="http://500px.com/photo/39845938" target="_blank">
		        	<img src="../resources/images/2.jpg" class="bg" />
		        </a>
		        <a href="http://500px.com/photo/43565628" target="_blank">
		        	<img src="../resources/images/3.jpg" class="bg" />
		        </a>
        </div>
 
	    </div>

et les CSS :

Code :

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

1
2
3
4
5
6
7
.slider-wrapper{
	margin: auto;
	max-width: 700px;
	height: auto;
	position: absolute;
}
		.slider-wrapper.default>div{display:none}.slider-wrapper.default>div #slides{font-weight:400;color:white;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:#ffffff;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}

C'est pourtant un slider tout simple. Si quelqu'un a une idée...
Merci et bonne journée,
dh

**ProgElecT** · 22/11/2021, 09h43

Salut

Ton CSS serait plus lisible/compréhensible comme ceci, il te permettra peut être de le comprendre, non ?

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
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;
		max-width: 700px;
		height: auto;
		position: absolute;
	}
	.slider-wrapper.default>div{
		display:none
	}
	.slider-wrapper.default>div #slides{
		font-weight:400;
		color:white;
		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:#ffffff;
		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
	}

**dhillig** · 22/11/2021, 10h07

Bonjour ProgElect,
Merci beaucoup.
Par quel programme es-tu passé pour "tout mettre dans l'ordre" ?
C'est super en tous cas.
Encore merci !
dh

**ProgElecT** · 22/11/2021, 11h44

Par quel programme es-tu passé pour "tout mettre dans l'ordre" ?

Pas de programme, à la main.

Moi ce qui m'interroge s'est .slider-wrapper.default>div{display:none} car si il n'y à pas un code JavaScript qui modifie le display en block dans l'ensemble du code de la page, ben le slider restera invisible.

**dhillig** · 22/11/2021, 12h04

Bien joué !
Je n'ai trouvé que ça :

Code html :

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

1
2
3
4
5
6
7
   <script>
                $(document).ready(function(){
                        var slider = $("#slider").mostSlider({
                                aniMethod: 'auto',
                        });
                });
        </script>

en plus de ces deux sources :

Code html :

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

1
2
<script src="../resources/scripts/modernizr-2.6.2.min.js"></script>
<script src="../../mostslider.js" type="text/javascript"></script>

C'est tout ce que je peux dire

Merci,
dh

**jreaux62** · 22/11/2021, 13h25

Si tu as la flemme d'INDENTER toi-même :

https://www.tab-it.fr/ (à ne pas prononcer à haute voix ! )

**dhillig** · 22/11/2021, 13h33

Indenter. Je viens d'apprendre un verbe

Dis-moi, je recommence avec ton code, mais impossible de retrouver mon IFRAME à height: 100%. C'est SUPER IMPORTANT !
Pourtant le code de l'IFRAME est le même !!!!?????
Une idée pour le slider ? OUI, C'est un copier>coller

mais je ne vois pas où il peut y avoir un conflit ?
Encore merci,
dh

**jreaux62** · 22/11/2021, 13h47

1- Au moins, il faudrait nous dire d'où tu l'as copié-collé ! (donner le lien)
On ne peut pas deviner.

2- pour l'iframe, ajouter style="width:100%;height:100vh;" : (100vh = 100% hauteur fenêtre)

Code html :

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

<iframe style="width:100%;height:100vh;" src="https://www.youtube.com/embed/rZMCB33hJw0?&amp;=1&amp;loop=1&amp;playlist=rZMCB33hJw0" class="iframe" title="YouTube video player" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" width="100%" height="100%" frameborder="0"></iframe>

CELA DIT... on peut redimensionner selon le RATIO de la VIDEO.
Ici, ça semble être du 4/3 (d'autres sont en 16/9,...)

DONC, mettre alors style="width:100%;height:75vw;" : (75vw = 3/4*100% = 75% largeur fenêtre)

Code html :

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

<iframe style="width:100%;height:75vw;max-height:100vh;" src="https://www.youtube.com/embed/rZMCB33hJw0?&amp;=1&amp;loop=1&amp;playlist=rZMCB33hJw0" class="iframe" title="YouTube video player" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" width="100%" height="100%" frameborder="0"></iframe>

**dhillig** · 22/11/2021, 14h25

C'est parfait, mais il y a un problème avec ton code : la galerie, un "close" et le footer.
Nom : Capture d’écran 2021-11-22 à 14.13.06.png
Affichages : 65
Taille : 600,9 Ko

Nom : Capture d’écran 2021-11-22 à 14.13.06.png
Affichages : 65
Taille : 600,9 Ko

mais c'est du beau travail.
Je mettrai en ligne le slider que je désire ce soir, pour le moment je laisse la page avec la galerie etc...
MERCI ENORMEMENT,
dh

**jreaux62** · 22/11/2021, 14h28

Ce n'est pas "mon code".

C'est le patchwork que tu as créé, façon "créature de Frankenstein" !

Je te l'ai INDENTE.

A toi maintenant de le COMPRENDRE..., et d'y remettre de l'ordre.

**dhillig** · 22/11/2021, 17h08

Des heures que je tente de comprendre... en vain

En local, ça fonctionne. Pourquoi ça ne fonctionne plus en ligne ?
Je suis perdu une nouvelle fois :/

**jreaux62** · 22/11/2021, 17h36

Testé sur Chrome, Opera, Firefox : je ne vois pas de souci d'affichage...

...à part ton slider, mais tu n'as toujours pas dit/montré d'où il sort !

**dhillig** · 22/11/2021, 17h59

Plus rien ne fonctionne

http://lapagetest.fr

**jreaux62** · 22/11/2021, 19h29

La "créature" a tué le "maître"...

Tu ne peux pas faire des "greffes" de code sans rien comprendre...

**dhillig** · 22/11/2021, 19h31

je pensais avoir compris

**jreaux62** · 22/11/2021, 19h40

Déjà, corrige le plus d'erreurs HTML :

https://validator.w3.org/nu/?doc=htt...pagetest.fr%2F

supprime type="text/css" (inutile)
Pour l'iframe (video), supprime width="100%" height="100%"
...

Et aussi :

Apprendre le HTML : guides et didacticiels

**ariennemireau** · 22/11/2021, 20h19

Envoyé par dhillig

Plus rien ne fonctionne

http://lapagetest.fr

Bonjour dhillig
je suis revenu sur votre site et tout fonctionne bien, mais par contre le SSL n'était pas bien installé, je pense qu'il faudrait le corriger via .htaccess