Position des blocs (slideshow avec fade)

Version imprimable

Salutations,

je suis en train d'essayer de déployer un slideshow JS sur un site fait en cascade de DIV (menus, etc ...).

Tout fonctionne correctement, si ce n'est que le slideshow passe PAR DESSUS tout le reste du site lorsque l'on scroll.

Voici un bout de mon code actuel :

Code:

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
	* {box-sizing: border-box;}
	body {font-family: Verdana, sans-serif;}
	.mySlides {display: none;}
	img {vertical-align: middle;}
 
	/* Slideshow container */
	.slideshow-container {
		max-width: 1000px;
		position: relative;
		margin: auto;
	}
 
	/* Caption text */
	.text {
		color: #FFFFFF;
		font-size: 15px;
		font-weight: bold;
		padding: 8px 12px;
		position: absolute;
		bottom: 8px;
		width: 100%;
		text-align: center;
		text-shadow: 2px 2px 3px #000000;
	}
 
	/* Fading animation */
	.fade {
		-webkit-animation-name: fade;
		-webkit-animation-duration: 1.5s;
		animation-name: fade;
		animation-duration: 1.5s;
	}
 
	@-webkit-keyframes fade {
		from {opacity: .4} 
		to {opacity: 1}
	}
 
	@keyframes fade {
		from {opacity: .4} 
		to {opacity: 1}
	}

Et :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<div class="slideshow-container">
	<div class="mySlides fade">
		<img src="../pict/Slide/Slide_BOLEX_Paillard_18_5-1961.jpg" style="width:100%">
		<div class="text">Projecteur BOLEX Paillard 18-5 (8mm) de 1961</div>
	</div>
	<div class="mySlides fade">
		<a href="https://youtu.be/9vxkCvYYS_k" target="_blank" rel="noreferrer">
			<img src="../pict/Slide/Slide_CNJV_BNF-2017.jpg" title="Colloque BNF de 2017" style="width:100%">
		</a>
		<div class="text">Colloque BNF de 2017</div>
	</div>
</div>

Avez-vous un début de piste pour moi ?
Si je passe le position du .slideshow-container en inherit, cela semble presque fonctionner, si ce n'est que la transition continue à passer dessus le reste.

Merci de votre aide ...

17/12/2020, 13h37
Casio
Edit : C'est visiblement l'animation qui passe par dessus :
Code:

1 2 3 4 5 6 7 8 9 @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } @keyframes fade { from {opacity: .4} to {opacity: 1} }
Si je désactive le keyframe, je n'ai plus le bug, mais plus d'animations non plus ... :(
18/12/2020, 16h53
Casio

Nobody idea ?

J'ai essayé de refaire des autres animations, mais je ne suis pas expert dans ce genre de trucs avancés.
19/12/2020, 18h42
NoSmoking

Bonjour,
pas assez d'informations pour ce rendre compte de ton soucis mais l'opacité peut influer sur l'empilement : Ce que personne ne vous a jamais dit à propos de z-index.

Voici une bonne partie du code complet :

Code:

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
91
92
93
94
95
96
97
98
99
100
101
 
<style>
        * {box-sizing: border-box;}
        .mySlides {display: none;}
        img {vertical-align: middle;}
 
        /* Slideshow container */
        .slideshow-container {
                max-width: 1000px;
                position: inherit;
                margin: auto;
        }
        
        /* Caption text */
        .text {
                color: #5B5958;
                font-size: 15px;
                font-weight: bold;
                padding: 8px 12px;
                bottom: 8px;
                width: 100%;
                text-align: center;
                /* text-shadow: 1px 1px 1px #FF8727;*/
        }
 
        /* The dots/bullets/indicators */
        .dot {
                /* cursor: pointer;*/
                height: 10px;
                width: 10px;
                margin: 0 2px;
                background-color: #bbb;
                border-radius: 50%;
                display: inline-block;
                transition: background-color 0.6s ease;
        }
 
        .active {
                background-color: #717171;
        }
 
        /* Fading animation */
        .fade {
                -webkit-animation-name: fade;
                -webkit-animation-duration: 1.5s;
                animation-name: fade;
                animation-duration: 1.5s;
        }
 
        /*@-webkit-keyframes fade {
                0% {opacity: 0;} // CSS properties at start
                100% {opacity: 1;} 
        }
 
        @keyframes fade {
                0% {opacity: 0;} // CSS properties at start
                100% {opacity: 1;} 
        }*/
 
        /* On smaller screens, decrease text size */
        @media only screen and (max-width: 300px) {
                .text {font-size: 11px}
        }
</style>
 
<div class="slideshow-container">
	<div class="mySlides fade">
		<a href="https://youtu.be/9vxkCvYYS_k" target="_blank" rel="noopener">
			<img src="../pict/Slide/Slide_CNJV_BNF-2017.jpg" title="Colloque BNF de 2017" style="width:100%">
		</a>
		<div class="text">Colloque BNF de 2017</div>
	</div>
        (...)
</div>
 
<div style="text-align:center">
	<span class="dot"></span>
	(...)
</div>
 
<script>
        var slideIndex = 0;
        showSlides();
 
        function showSlides() {
                var i;
                var slides = document.getElementsByClassName("mySlides");
                var dots = document.getElementsByClassName("dot");
                for (i = 0; i < slides.length; i++) {
                        slides[i].style.display = "none";
                }
                slideIndex++;
                if (slideIndex > slides.length) {slideIndex = 1}
                for (i = 0; i < dots.length; i++) {
                        dots[i].className = dots[i].className.replace(" active", "");
                }
                slides[slideIndex-1].style.display = "block";
                dots[slideIndex-1].className += " active";
                setTimeout(showSlides, 2000); // Change image every 2 seconds
        }
</script>

20/12/2020, 11h29
NoSmoking

C'est en rapport avec ton autre discussion, Aleatoire sur un slideshow JS, ou est-ce une autre approche ?
20/12/2020, 11h36
Casio

Oui, c'est le même script.

J'ai juste posté en 2 fois, en rapport avec la thématique.
21/12/2020, 07h01
NoSmoking

Donc on oublie celle-ci et on se concentre sur l'autre, d'autant que les modifications à apporter pour activer l'effet de fade sont « minimes » !?!