Supprimer un élément d'un slider décaler les suivants

**SalutAVous** · 29/06/2014, 11h09

Bonjour,

J'essaye de créer un slider tout simple en javascript qui est un slider vertical censé faire défiler des éléments verticalement, vert le haut.
Cependant je souhaiterai qu'à chaque défilement de slide le premier élément (donc celui qui vient de défiler) soit automatiquement supprimé. Le problème c'est que lorsque je supprime cet élément les élements suivants sont déplacés vert le haut, comme pour combler la place disponible libérée par l'élément supprimé.
L'élément suivant l'élément supprimé prend donc sa place, ce que je ne souhaite pas.

Un peu de code sera plus parlant...

Le code html et javascript:

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="test.css">
	</head>
	<body>
		<div id="container">
			<ul>
				<li>
					<p class="paragraph">Du texte</p>
				</li>
				<li>
					<p class="paragraph">Un texte</p>
				</li>
				<li>
					<p class="paragraph">Et un texte</p>
				</li>
			</ul>
		</div>
		<button id="bouton">Run</button>
		<script>
                        var bouton = document.getElementById('bouton');
                        bouton.onclick = function() {
                                var container = document.getElementById('container'),
                                    ul = container.firstElementChild,
                                    height = ul.offsetHeight,
                                    currentIndex = 0;
                                ul.style.top = 0;
                                var animation = setInterval(function() {
                                        currentIndex += 1;
                                        ul.style.top = "-" + (currentIndex * height) + '%';
                                        ul.removeChild(ul.children[0]);
                                }, 2000);
                        };
                </script>
	</body>
</html>

Le code 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
#container
{
	width: 400px; 
	height: 100px;
	overflow: hidden;
}
 
#container > ul
{
	height: 100px;
	list-style: none;
	margin: 0; 
	padding: 0;
	position: relative;
	transition: 0.5s top;
        -webkit-transition: 0.5s top;
        -moz-transition: 0.5s top;
        -ms-transition: 0.5s top;
        -o-transition: 0.5s top;
}
 
#container > ul > li
{
	float: left;
	width: 400px; 
	height: 100px;
	margin: 0; 
	padding: 0;
}
 
.paragraph
{
	display: block;
	width: 100%;
	background-color: #1ff;
	height: 100px;
	margin: 0; 
	padding: 0;
}

Dans le scénario que je souhaiterai obtenir je visualiserai la première slide affichant "du texte" qui serait ensuite supprimée, puis je verai "un texte", (supprimé à son tour) puis "et un texte".

Actuellement je vois "du texte" puis "et un texte" sans voir "un texte", car se dernier à été "remonté" lors de la suppression de la première slide.
Comment pourrais je réaliser cela ?

En espérant avoir été suffisamment clair dans mes propos et que quelqu'un voudra bien prendre la peine de lire et de me répondre.
Veuillez m'excuser ou me le faire remarquer si j'ai été un peu confus dans mes explications.

Bonne journée

**SylvainPV** · 29/06/2014, 11h19

Il me semble que pour presque tous les sliders existants, la position de chaque slide est fixée en positionnement absolu pour permettre ce genre de choses, ainsi qu'un plus grand contrôle dans les transitions.

**Watilin** · 29/06/2014, 17h53

Je plussoie Sylvain, il y a de fortes chances que ton problème soit une affaire de positionnement.

Je rajoute que le positionnement flottant est bourré de pièges, et j'ai toujours trouvé moyen de faire sans, par exemple en utilisant display: table-cell ou display: inline-block (voir : valeurs possibles de display). Ou, évidemment, avec le positionnement absolu.

J'ai une question un petit peu hors sujet : l'utilisateur peut-il revenir en arrière, c'est-à-dire slider vers le bas ? Si oui, il est peut-être plus astucieux de garder les éléments en mémoire plutôt que les supprimer. Tu les retires du DOM avec la méthode removeChild, mais tu gardes une référence dessus dans une variable JavaScript (par exemple un tableau), et tu peux réinjecter l'élément dans le DOM (appendChild ou insertBefore) quand le besoin se présente.

**SalutAVous** · 30/06/2014, 18h53

Merci à vous deux pour vos réponses.

En effet c'était un problème de positionnement. J'ai donc utilisé le positionnement absolu pour arriver à mon but.
Et en ce qui concerne le positionnement flottant, je connais effectivement les problèmes que cela peut apporter.

Sinon Watilin, pour répondre à ta question, non l'utilisateur ne pourra pas revenir en arrière. En fait c'est un slider un peu particulier, une sorte de slider infini si on veut...
Mais j'approuve ton idée

Supprimer un élément d'un slider décaler les suivants

JavaScript

Vue hybride

Discussions similaires

Partager

Partager